OpenType features

The features hiding inside your font files

Most fonts ship with dozens of features you're not using. Ligatures, tabular figures, small caps. The difference between a font being available and a font looking right.

The body-text essentials

Enable these four for running text:

Most browsers enable these by default. Explicit declarations guard against inconsistencies. Prefer font-variant-* over font-feature-settings since changing one feature in font-feature-settings resets the others.

Ligatures in detail

OpenType groups ligatures into four categories:

Code block typography

Ligatures harm code. They collapse fi into one glyph and transform != into a combined symbol:

Choose a monospace face with distinct 0/O, l/1/I glyphs: JetBrains Mono, Fira Code (ligatures off), Cascadia Code, Berkeley Mono. Set code line-height at 1.5–1.7.

Small caps

True small caps are drawn at the optical size of lowercase, not shrunk. A real small-cap H has the stroke weight of a lowercase h. Pseudo small caps (scaled-down uppercase) are too thin.

Use for abbreviations (NATO, HTML, BBC), short labels, and editorial credits. Verify the font ships smcp first. Many free fonts omit it.

Tabular vs. proportional figures

Tabular figures give every digit the same width:

Use tabular figures for tables, prices, dashboards, and animated counters. Proportional figures (variable widths) for body text.

Oldstyle vs. lining figures

Oldstyle figures have ascenders and descenders, like lowercase letters. Lining figures sit on the baseline at cap height.

If font-variant-numeric: oldstyle-nums produces no visible change, the font doesn't support it.

Other features worth knowing