Discover OpenType Layout features—ligatures, stylistic alternates, small caps, and more. Make your typography smarter and more expressive.
Ligatures combine two or more characters into a single glyph for improved readability and aesthetics. Standard ligatures (liga) are enabled by default in most applications.
Without ligatures
fi fl ff ffi ffl
With ligatures
fi fl ff ffi ffl
/* Enable ligatures */
font-feature-settings: "liga" 1;
/* Or use font-variant */
font-variant-ligatures: common-ligatures;
/* Discretionary ligatures */
font-feature-settings: "dlig" 1;Small caps are uppercase letters designed to match the x-height of lowercase letters. They're ideal for acronyms, abbreviations, and adding emphasis without shouting.
Regular capitals
The NASA and FBI report
With small caps
The NASA and FBI report
/* Small caps for lowercase */
font-feature-settings: "smcp" 1;
/* Or use font-variant */
font-variant-caps: small-caps;
/* Caps to small caps */
font-feature-settings: "c2sc" 1;OpenType offers multiple numeral styles: oldstyle (onum) for body text, lining (lnum) for tabular data, proportional (pnum) and tabular (tnum) spacing.
Lining numerals
0123456789
Oldstyle numerals
0123456789
/* Oldstyle numerals */
font-feature-settings: "onum" 1;
/* Or use font-variant */
font-variant-numeric: oldstyle-nums;
/* Tabular numerals for tables */
font-variant-numeric: tabular-nums;The fractions feature (frac) automatically converts sequences like 1/2 into properly typeset fractions with numerators and denominators.
Without fractions
1/2 3/4 5/8
With fractions
1/2 3/4 5/8
/* Enable fractions */
font-feature-settings: "frac" 1;
/* Or use font-variant */
font-variant-numeric: diagonal-fractions;
/* Stacked fractions (if supported) */
font-variant-numeric: stacked-fractions;Stylistic alternates (salt) provide alternative designs for specific characters. Contextual alternates (calt) change glyphs based on surrounding characters.
Common alternates include single-story vs. double-story 'a' and 'g', different ampersand designs, and various numeral styles.
a g & @ 1 7
/* Enable stylistic alternates */
font-feature-settings: "salt" 1;
/* Contextual alternates (usually on by default) */
font-feature-settings: "calt" 1;Swash characters feature decorative extensions and flourishes, often used for initial caps or display typography. Available in many script and serif fonts.
Swashes add elegance and personality to typography, perfect for invitations, headlines, and formal documents.
A B C D E
/* Enable swash characters */
font-feature-settings: "swsh" 1;
/* Contextual swashes */
font-feature-settings: "cswh" 1;Stylistic sets group related alternate glyphs together. Fonts can have up to 20 sets (ss01–ss20), each containing a coordinated collection of alternates.
Each stylistic set typically has a theme: "geometric alternates," "rounded terminals," "open counters," etc. Check your font's documentation.
Aa
Aa
Aa
Aa
/* Enable stylistic set 1 */
font-feature-settings: "ss01" 1;
/* Multiple sets */
font-feature-settings: "ss01" 1, "ss03" 1;
/* Combine with other features */
font-feature-settings: "liga" 1, "ss01" 1, "onum" 1;| Tag | Feature | Description |
|---|---|---|
| liga | Standard Ligatures | Common ligatures like fi, fl, ff |
| dlig | Discretionary Ligatures | Optional decorative ligatures |
| smcp | Small Capitals | Lowercase to small caps |
| c2sc | Caps to Small Caps | Uppercase to small caps |
| onum | Oldstyle Numerals | Lowercase-style figures |
| lnum | Lining Numerals | Uppercase-style figures |
| tnum | Tabular Numerals | Fixed-width figures |
| pnum | Proportional Numerals | Variable-width figures |
| frac | Fractions | Automatic fraction formatting |
| salt | Stylistic Alternates | Alternative glyph designs |
| calt | Contextual Alternates | Context-based substitutions |
| swsh | Swash | Decorative flourishes |
| ss01-20 | Stylistic Sets | Grouped alternate collections |