Letterforms

What happens automatically

Text is shaped with a full OpenType shaping engine before any line breaking happens: standard ligatures form (fi, fl, ffi), kerning pairs apply, and marks attach where the font puts them. There is nothing to switch on; the sections below are about deviating from those defaults.

OpenType features

font-feature-settings toggles the optional features a font carries, by four-letter tag:

.figures  { font-feature-settings: "onum" 1; }         /* oldstyle figures */
.plain    { font-feature-settings: "liga" 0; }         /* no ligatures */
.combined { font-feature-settings: "onum" 1, "liga" 0; }

Which tags do something depends entirely on the font: the built-in Crimson Pro carries oldstyle figures (onum) and ligatures (liga), but no small caps, so "smcp" changes nothing there (see Small caps for the way that works with any font). Consult the feature list of your font; typical candidates are smcp (small caps), onum/lnum (oldstyle/lining figures), tnum/pnum (tabular/proportional figures, the difference that makes numbers in tables line up), and the discretionary sets dlig and ss01 ff. Features declared in @font-face via font-feature-settings apply to every use of that face; the property on an element adds to them.

Small caps

font-variant-caps: small-caps asks for small caps independent of the font. A face with an smcp feature gets its designed small caps; for any other face, such as the built-in Crimson Pro, they are synthesized: every letter that changes when uppercased becomes its capital at 70% of the size, with the case rules of the language, so ß becomes SS.

.name { font-variant-caps: small-caps; }

font-synthesis-small-caps: none switches the synthesis off, and the font shorthand and font-variant accept small-caps too. Synthesized small caps are capitals in the PDF, so search and copy see BACH rather than Bach; designed small caps keep the original text.

Letter spacing

letter-spacing adds tracking between glyphs. Its classic use is spaced capitals or small caps in headings; running lowercase text is better left untracked:

h1 { letter-spacing: 0.12em; }

Text decoration

text-decoration-line (underline, overline, line-through), text-decoration-style (solid, double, dotted, dashed, wavy) and text-decoration-color compose freely. Without an explicit color the line follows the text color, as CSS’s currentColor initial value specifies:

Italic correction

An italic glyph leans into the space of an upright neighbor: a closing parenthesis after an italic f collides visibly. OpenType has no metric for text italic correction, so glu offers a heuristic that inserts a small compensating kern at italic-to-upright boundaries:

body { -bag-italic-correction: auto; }

The property is inherited; none switches the heuristic off again for a subtree.