font-style & font-variant
font-style controls whether text is normal, italic, or oblique. font-variant enables typographic refinements like small caps and numeric figure styles. Both work best when the font has dedicated glyphs for these variants — when it doesn't, the browser synthesises them with mixed results.
font-style
CSS
/* The three values */ font-style: normal; /* upright — default */ font-style: italic; /* uses the font's italic variant (different glyph design) */ font-style: oblique; /* slanted version of the upright glyphs (not a true italic) */ /* oblique with an angle (for variable fonts) */ font-style: oblique 12deg; /* slant by exactly 12 degrees */ /* Italic and oblique look different — italic is a separate artistic design, oblique is just the upright font rotated */
italic uses a separate set of glyph designs; oblique is the upright font slanted by CSS — if your font has no italic variant, the browser synthesises oblique
True italics in typefaces like Georgia or Garamond have custom glyph designs for the italic variant — the letterforms are different, not just slanted. `font-style: italic` triggers these. When a font has no italic variant, the browser fakes it with `oblique`. This synthesised italic often looks poor. Always load the italic font file and declare it in `@font-face` if you need real italics.
CSS
/* Load the italic variant */
@font-face {
font-family: 'Merriweather';
src: url('/fonts/merriweather-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Merriweather';
src: url('/fonts/merriweather-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic; /* browser uses this file when italic is requested */
}
/* Usage */
em, i { font-style: italic; }
blockquote { font-style: italic; }font-variant — typographic refinements
font-variant is a shorthand for several OpenType font variant properties. The most commonly used is font-variant-caps for small caps:
CSS
/* font-variant-caps */
font-variant-caps: normal; /* default */
font-variant-caps: small-caps; /* lowercase letters rendered as smaller capitals */
font-variant-caps: all-small-caps; /* both upper and lowercase as small caps */
font-variant-caps: petite-caps; /* even smaller caps */
font-variant-caps: unicase; /* mix of small caps and normal uppercase */
/* Common use: section labels, acronyms, table headers */
.label {
font-variant-caps: small-caps;
letter-spacing: 0.05em; /* small caps often benefit from slightly wider tracking */
}
abbr {
font-variant-caps: all-small-caps;
font-feature-settings: 'c2sc'; /* low-level OpenType: convert caps to small-caps */
}font-variant-numeric — number styles
Many professional typefaces include multiple number styles: proportional (default), tabular (monospaced — same width for alignment), old-style (lowercase-style figures), and lining (uppercase-height figures):
CSS
/* Number figure styles */
font-variant-numeric: lining-nums; /* 0-9 all same height (uppercase height) */
font-variant-numeric: oldstyle-nums; /* some digits have descenders — more elegant in prose */
/* Number spacing */
font-variant-numeric: tabular-nums; /* all digits same width — use in tables/prices */
font-variant-numeric: proportional-nums; /* digits vary in width (default) */
/* Fractions */
font-variant-numeric: diagonal-fractions; /* 1/2 → proper fraction glyph */
font-variant-numeric: stacked-fractions;
/* Combining values */
.price {
font-variant-numeric: tabular-nums lining-nums;
/* all prices align vertically in tables */
}
.prose-number {
font-variant-numeric: oldstyle-nums proportional-nums;
/* more readable in running text */
}font-feature-settings — low-level OpenType control
font-feature-settings gives direct access to OpenType font features. These are four-letter codes that unlock specific glyph variants:
CSS
/* Enabling specific OpenType features */
.ligatures {
font-feature-settings: 'liga' 1, 'calt' 1; /* standard and contextual ligatures */
}
/* fi, fl, ffi become single glyphs when liga is enabled */
.small-caps {
font-feature-settings: 'smcp' 1; /* small caps */
}
.tabular {
font-feature-settings: 'tnum' 1; /* tabular numbers */
}
.old-style {
font-feature-settings: 'onum' 1; /* old-style numbers */
}
/* Common features:
'liga' — standard ligatures (fi, fl, ff)
'calt' — contextual alternates
'smcp' — small caps
'tnum' — tabular numbers
'onum' — old-style numbers
'frac' — diagonal fractions
'kern' — kerning (usually on by default)
'ss01'-'ss20' — stylistic sets */
/* Prefer high-level properties (font-variant-*) when available —
font-feature-settings can conflict with browser internal use */Next
The vertical spacing between lines of text — and why it matters for readability: [line-height](/css/line-height).