CSS Font Advanced
In this page:
Unlocking OpenType Features with font-feature-settings
Many professional font files bundle optional OpenType features -- like stylistic ligatures, old-style figures, or fraction glyphs -- that are switched off by default. font-feature-settings lets you turn on a specific feature by its four-letter OpenType tag, such as "liga" for standard ligatures or "onum" for old-style numerals.
Note: Check the font's specimen page or OpenType feature list first, since font-feature-settings only works for tags the specific font file actually implements.
Warning: font-feature-settings silently does nothing if the loaded font does not include that particular OpenType feature, with no error or warning shown.
Example: Unlocking OpenType Features with font-feature-settings
<style>
p {
font-feature-settings: "liga" 1;
}
</style>
<p>Text with standard ligatures enabled</p>Adjusting Letter Spacing with font-kerning
Kerning is the small spacing adjustment made between specific letter pairs (like "A" and "V") so they visually sit closer together than their default character widths would allow. font-kerning: normal turns this on explicitly, while font-kerning: none disables it, giving every character its raw, unadjusted spacing.
Note: Leave font-kerning at its default of auto in almost all cases, since modern browsers already apply kerning sensibly without extra configuration.
Warning: Disabling kerning with font-kerning: none can make headline text in particular look noticeably loose and unevenly spaced.
Example: Adjusting Letter Spacing with font-kerning
<style>
.normal { font-kerning: normal; }
.none { font-kerning: none; }
</style>
<p class="normal">AVATAR — kerned</p>
<p class="none">AVATAR — unkerned</p>Balancing Fallback Sizes with font-size-adjust
Different font families can look wildly different in size even when set to the same font-size, because their lowercase letters occupy different proportions of the overall line height. font-size-adjust lets you specify a target aspect ratio so that if the primary font fails to load and a fallback is used, the fallback is automatically resized to visually match.
Note: Set font-size-adjust based on your primary font's x-height ratio so fallback fonts stay visually consistent if the custom font fails to load.
Warning: Without font-size-adjust, a fallback font can appear noticeably larger or smaller than your intended font at the exact same font-size value.
Example: Balancing Fallback Sizes with font-size-adjust
<style>
p {
font-family: "CustomFont", sans-serif;
font-size-adjust: 0.5;
}
</style>
<p>Fallback font resized to visually match the custom font</p>Widening and Narrowing Text with font-stretch
font-stretch selects a condensed or expanded width variant of a font family, provided the font file actually ships those variants (as many variable fonts now do). Unlike transform: scaleX(), which distorts letterforms by squashing them, font-stretch swaps in genuinely redesigned, narrower or wider glyph shapes.
Note: Check whether your font is a variable font with a width axis before relying on font-stretch, since static fonts without condensed cuts will simply ignore it.
Warning: font-stretch has no visible effect on fonts that do not ship condensed or expanded variants, and it will not distort the font as a workaround.
Example: Widening and Narrowing Text with font-stretch
<style>
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
</style>
<p class="condensed">Condensed variant</p>
<p class="expanded">Expanded variant</p>Switching Capital Styles with font-variant-caps
font-variant-caps switches between different capitalization treatments beyond plain text-transform: uppercase -- including small-caps (lowercase letters rendered as smaller capitals) and all-small-caps (uppercase letters shrunk to match). Well-designed fonts include genuine small-cap glyphs rather than simply scaling down regular capitals.
Note: Prefer font-variant-caps: small-caps over text-transform: uppercase when you want the classic "small capitals" typographic look instead of full-size capitals.
Warning: Fonts lacking true small-caps glyphs fall back to synthetically shrunken regular capitals, which can look thinner and less polished than genuine small-caps.
Example: Switching Capital Styles with font-variant-caps
<style>
.small-caps {
font-variant-caps: small-caps;
}
</style>
<p class="small-caps">Small Capitals Look</p>- Assuming font-feature-settings works on every font, when the specific OpenType feature must actually be built into the font file being used.
- Confusing font-stretch with transform: scaleX(), when font-stretch only works if the font family ships genuine condensed or expanded variants.
- Using font-variant-caps: small-caps and expecting real small-caps glyphs, when many fonts fall back to shrunken regular capitals instead.
- font-feature-settings and font-variant-caps unlock OpenType typographic features like ligatures, old-style numerals, and true small caps.
- font-kerning controls whether character-pair spacing adjustments (like the tight fit between "A" and "V") are applied.
- font-stretch and font-size-adjust fine-tune a font's width and fallback sizing behavior respectively.
font-kerning and font-variant-caps are supported in all modern browsers; font-feature-settings and font-stretch require the loaded font file to actually include the relevant OpenType variation data to have a visible effect.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: