CSS Font Advanced
In this page:
selector {
font: style weight size / line-height family;
font-variant: small-caps;
}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.
- 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.
- Accepted values:
- normal — default features (initial value)
- "liga" 0 — turns a feature off
- "smcp" 1 — turns small caps on
- "tnum" — tabular numbers
- "ss01" — stylistic set 1
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Leave font-kerning at its default of auto in almost all cases, since modern browsers already apply kerning sensibly without extra configuration.
- Accepted values:
- auto — the browser decides (initial value)
- normal — kerning is applied
- none — kerning is disabled
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- 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.
- Accepted values:
- none — no adjustment (initial value)
- number — the aspect value, e.g. 0.5
- from-font — uses the font's own aspect value
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- 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.
- Accepted values:
- normal — standard width (initial value)
- condensed — narrower faces
- expanded — wider faces
- percentage — 50% to 200%
- ultra-condensed / semi-condensed / semi-expanded / ultra-expanded — other steps
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Prefer font-variant-caps: small-caps over text-transform: uppercase when you want the classic "small capitals" typographic look instead of full-size capitals.
- Accepted values:
- normal — regular capitals (initial value)
- small-caps — lowercase shown as small capitals
- all-small-caps — all letters as small capitals
- petite-caps | all-petite-caps — petite capitals (for lowercase, or for all letters)
- unicase | titling-caps — mixed and titling forms
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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: