How to Use OpenType Features in CSS
Unlock ligatures, small caps, tabular figures, stylistic alternates, and other advanced typography features hidden in your web fonts.
- Unlock ligatures, small caps, tabular figures, stylistic alternates, and other advanced typography features hidden in your web fonts.
- What OpenType Features Are.
- Enabling Features in CSS.
- Most Useful Features for Web.
- Checking Font Support.
What OpenType Features Are
Most professional fonts contain dozens of hidden features: ligatures joining letter pairs, small caps at their own optical size, tabular figures for aligned columns, fractions, ordinals, swash characters, and stylistic alternates. These are built in but disabled by default. Enabling them dramatically improves typographic quality. The difference between raw font output and one using OpenType features is like a Word document versus a professionally typeset book.
Enabling Features in CSS
CSS provides two properties. The high-level font-variant: font-variant-ligatures: common-ligatures; font-variant-caps: small-caps; font-variant-numeric: tabular-nums lining-nums;. The low-level font-feature-settings gives direct access to four-letter tags: font-feature-settings: 'liga' 1, 'smcp' 1, 'tnum' 1;. Prefer font-variant when possible — it’s more readable and cascades properly. Use font-feature-settings for features font-variant doesn’t cover, like stylistic sets (‘ss01’).
Most Useful Features for Web
Most impactful features: common ligatures (‘liga’) — enable globally; they fix collisions like fi, fl, ff. Tabular figures (‘tnum’) — essential for data tables; each digit gets the same width. Small caps (‘smcp’) — purpose-designed for abbreviations (HTML, CSS, API). Oldstyle figures (‘onum’) — numbers that sit within the baseline like lowercase letters, ideal for body copy. Fractions (‘frac’) — converts 1/2 to a proper typographic fraction glyph.
Checking Font Support
Not all fonts include all features. Check with Wakamai Fondue (wakamaifondue.com) — it analyzes any font file and lists available features. Google Fonts specimen pages list some features. In CSS, unsupported features are silently ignored — text displays without the enhancement. This means you can safely enable features globally without worrying about fonts that don’t support them. Use the Font Pairing Tool to preview fonts with features enabled.