vocab.design

typography

OpenType features

also called font features, feature tags, font-feature-settings (css), OpenType

Optional glyph substitutions and spacing rules packed inside a font file, addressed by four-letter tags and switched on from CSS.

A font file is not only a set of drawings. It also carries tables of rules about those drawings: replace this pair of letters with a single ligature, swap these numerals for a set of a different width, rebuild this sequence as a fraction, pull these two shapes closer together. Each rule set has a four-letter tag, and the tags are the vocabulary you use to ask for them. Some are on before you ask (liga, kern, calt); the interesting ones are not.

There are two ways to say it in CSS and they are not equals. font-variant-caps, font-variant-ligatures, and font-variant-numeric are the high-level spellings: they take readable keywords, they inherit sensibly, and separate declarations combine. font-feature-settings takes the raw tags, and it is one property holding one list, so a rule that sets "frac" 1 on an element that had "tnum" 1 from an ancestor has just turned tabular figures off. Reach for the high-level property whenever one exists, and keep font-feature-settings for tags that have no keyword, chiefly the stylistic sets ss01 through ss20.

The awkward part is discovery. Nothing in CSS reports which tags a given file actually carries, and asking for one that is missing is not an error: it simply does nothing, silently, which is what the third row of the specimen is. The one exception makes it worse, because font-variant-caps: small-caps will be faked by the browser out of scaled capitals when the font has no smcp table, so the declaration that looks like it worked is the one you should distrust. Real small caps are drawn, not shrunk. Check a face before you build a design on a feature, and remember that a fallback font will not have the same tables.

Two habits keep this honest. Scope every feature to where it belongs, since tabular figures across a whole document make prose look like a spreadsheet and discretionary ligatures in running text are a distraction. And remember that all of this is rendering only: the DOM still holds 1/2 and office, so search, copy and paste, and screen readers see the characters you wrote, not the glyphs that were drawn for them.

Which word?

If you wantsay
reaching for a font capability that is off by defaultopentype features
switching a font's single-storey a onstylistic set
a script font changes shape depending on its neighbourscontextual alternates
two letters collide and the font fuses themligature

Sources