Typography
font-feature-settings
Control supported OpenType features with raw tags or named tokens.
Overview
| Class | Declarations |
|---|---|
font-feature-settings:normal | font-feature-settings: normal;
|
font-feature-settings:<value>,<font-feature> | font-feature-settings: <value>,<font-feature>;
|
font-feature-settings:'salt' | font-feature-settings: 'salt';
|
font-feature-settings:'tnum' | font-feature-settings: 'tnum';
|
Examples
Enable a font feature
A quoted four-character tag selects an OpenType feature. Here tnum gives each digit the same advance width in Geist. Compare the two equal-length strings; the feature must exist in the selected font.
Enable a font feature
Glyph-run measurements include the actual text advance. Raw feature settings are reported independently of numeric variants.
<!-- Default proportional digits --><div id="target" class="font-feature-settings:normal font-3xl leading-sm"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div><!-- Raw feature · 'tnum' --><div id="target" class="font-feature-settings:'tnum' font-3xl leading-sm"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div>Reset features
font-feature-settings:normal removes an inherited raw feature request. It does not reset a separate font-variant-numeric declaration.
Reset features
Glyph-run measurements include the actual text advance. Raw feature settings are reported independently of numeric variants.
<!-- Raw tnum inherited, then reset --><div id="context" class="font-feature-settings:'tnum' font-3xl leading-sm"> <p class="m:0"><span id="inherited" class="inline-block">11111</span></p> <p id="target" class="m:0 font-feature-settings:normal"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></p></div>Prefer semantic numeric utilities
Use tabular-nums for ordinary numeric formatting. Reserve raw feature settings for font-specific capabilities without a higher-level property.
Prefer semantic numeric utilities
Glyph-run measurements include the actual text advance. Raw feature settings are reported independently of numeric variants.
<!-- font-feature-settings:'tnum' --><div id="target" class="font-feature-settings:'tnum' font-3xl leading-sm"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div><!-- tabular-nums --><div id="target" class="tabular-nums font-3xl leading-sm"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div>Use feature tokens
Name a repeated feature setting in @theme, then use the token through the same property.
Use feature tokens
Glyph-run measurements include the actual text advance. Raw feature settings are reported independently of numeric variants.
@theme { --font-feature-data: 'tnum';}<!-- A project token for numeric data --><div id="target" class="font-3xl leading-sm font-feature-settings-data"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div>Apply conditionally
Hover or keyboard-focus the numeric sample. The raw tnum feature changes the advance widths while the content stays the same.
Apply conditionally
Glyph-run measurements include the actual text advance. Raw feature settings are reported independently of numeric variants.
<!-- Compare proportional and tabular advances --><div id="target" tabindex="0" role="group" aria-label="Numeric feature sample" class="font-feature-settings:normal font-3xl leading-sm font-feature-settings:'tnum':hover font-feature-settings:'tnum':focus-visible"><span id="ones" class="inline-block">11111</span><br><span id="eights" class="inline-block">88888</span></div>