OpenType Features

OpenType is the modern font file format. Beyond storing basic letter shapes, it can carry dozens of optional features — alternate glyphs and substitution rules the renderer can switch on or off. Some are decorative (swashes, stylistic alternates); most are typographic essentials that make the difference between a font being available and a font looking right.

The body-text essentials

Always enable these four for running text:

body {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  /* or, explicit */
  font-feature-settings: "kern", "liga", "clig", "calt";
}

• kern — kerning tables for letter-pair spacing. Kerning is the adjustment of space between two specific letterforms — AV, To, Wa — to make spacing look optically even. Quality typefaces ship with extensive kerning tables; always prefer metrics kerning (the font designer's tables) over optical kerning (the renderer's guess).
• liga — standard ligatures (fi, fl, ff, ffi, ffl). Without them, the dot of the i clashes with the hook of the f. With them, the pair flows as one shape.
• clig — contextual ligatures. Substitutions that depend on surrounding letters.
• calt — contextual alternates. Substitutions based on neighbouring letters.

Most browsers enable these by default, but explicit declarations protect against future browser changes and inconsistent font configurations.

Ligatures in detail

OpenType groups ligatures into categories:

• Standard (liga) — the safe everyday set. Always on for body text.
• Contextual (clig) — depends on surrounding context. On for body.
• Discretionary (dlig) — decorative pairs (st, ct, Th) and historical forms. Off for body, optionally on for headlines and display.
• Historical (hlig) — long-s ligatures and archaic combinations. Off unless the design calls for it specifically.

body {
  font-feature-settings: "liga", "clig", "calt";
}
h1 {
  font-feature-settings: "liga", "dlig", "clig", "calt";
}

In code blocks, ligatures are actively harmful. They collapse == or != into single glyphs and hide individual characters in fi and fl — exactly when developers need to see them:

code, pre {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}

Small caps

Small caps are uppercase letterforms drawn at the optical size of lowercase letters. True small caps are drawn, not shrunk — a real small-cap H has the stroke weight and proportion of a lowercase h, just shaped like an H. Pseudo small caps — what you get by reducing the size of full uppercase — are too thin and visually weak.

.abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

Use small caps for abbreviations in running text (NATO, HTML, BBC), short labels, and editorial credits. Verify the font ships small caps before relying on the feature — many free fonts do not include them, and the browser will silently fall back to pseudo small caps.

Tabular vs. proportional figures

Tabular figures are numerals where every digit occupies the same horizontal width. A 1 and a 0 and an 8 all take up the same space. This makes vertical columns of numbers align cleanly:

.data-table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

Use tabular figures for tables, prices, scoreboards, data dashboards, and animated counters. Without them, layouts shift as digits change.

Proportional figures have variable widths — use them for body text, where tabular widths look mechanical.

Oldstyle vs. lining figures

Oldstyle figures have ascenders and descenders, like lowercase letters. They blend quietly into prose. Lining figures sit on the baseline at cap height — the default for tables and UI.

body {
  font-variant-numeric: oldstyle-nums;  /* prose */
}
.btn, h1, table {
  font-variant-numeric: lining-nums;    /* UI / headings / data */
}

Not every font ships oldstyle figures. Premium foundries do; free fonts vary. If font-variant-numeric: oldstyle-nums produces no change, the font does not support it.

Other features worth knowing

• dlig — discretionary ligatures. Decorative; display only.
• swsh — swashes. Ornate alternate letterforms; display only.
• salt / ss01, ss02 — stylistic alternates. Alternate letter shapes the designer offers.
• c2sc — uppercase letters to small caps. Used with smcp to convert all caps to small caps.
• onum / lnum — oldstyle and lining figures explicitly.
• tnum / pnum — tabular and proportional figures explicitly.

The caveat

Features only work if the font supports them. Setting font-feature-settings: "smcp" on a font without small caps does nothing — the browser silently falls back to default. Always verify support before relying on a feature; check the foundry's spec sheet or open the font in a glyph inspector.