Modern fonts are software packages. They ship alternate glyphs, number styles, ligature sets, and small caps - all switched on with one CSS property that almost nobody uses.
The property and the syntax
.fancy {
font-feature-settings: 'ss01' on, 'tnum' on; /* stylistic set 1 + tabular numerals */
}
Four-character OpenType feature tags, comma-separated. Prefer the high-level properties where they exist (font-variant-numeric: tabular-nums beats 'tnum' on), but the full feature set only opens through this property.
The features worth knowing
-
'tnum'- tabular figures (data tables, see every dashboard argument ever) -
'lnum'- lining figures;'onum'- oldstyle figures (book typography) -
'ss01'-'ss20'- stylistic sets (alternate a, g, and ampersand designs) -
'salt'- the single stylistic alternate -
'dlig'- discretionary ligatures (fancy combos beyond the standard fi/fl) -
'case'- case-sensitive forms (punctuation that aligns with caps) -
'zero'- slashed zero (data contexts)
Discovering what your font actually ships
Feature lists live in the font file and in foundry spec sheets. Tools like fontdrop.info visualize them; the foundry's specimen page usually demos them. This is also where audits get interesting: if a design references an alternate glyph but production shows the default, either the feature is off or - more commonly - the font rendering is not what the CSS says. Verify first: screenshot and identify on-device (Typeye names the rendered typeface locally, so you know whether you are toggling features on the right font at all).
The practical starter kit
:root { font-feature-settings: 'kern' on, 'liga' on; } /* usually defaults, be explicit */
.data-table { font-variant-numeric: tabular-nums; }
.brand-mark { font-feature-settings: 'ss01' on; } /* if your brand font has a signature set */
Check your brand font's spec sheet once. If it ships a distinctive stylistic set, you have free brand differentiation sitting unused in the file you already pay for.
Top comments (0)