A specimen of Inter

A typeface arrives with most of its decisions made. The letters are drawn, their spacing is set, their proportions are fixed. What is left to whoever sets it is a short list, and the list is where the work is.

This page goes through that list with one typeface: Inter, by Rasmus Andersson, which is the face you are reading. The yellow is borrowed from Inter’s own specimen, which sets its table of features on a field of it.

The cut

Small type and large type have different problems. At 14 pixels a letter is a handful of pixels, so it wants room: looser spacing, a taller lowercase, and the small cuts where strokes meet that Inter’s site calls ink traps and bridges. Give the same drawing 150 pixels and all that room shows.

So Inter is drawn twice, a text cut and a display cut, and the two stand at the ends of one axis, optical size, which runs from 14 to 32. Its site gives the height of the lowercase at each end: 1,118 units of 2,048 in the text cut and 1,056 in the display cut. That is 54.6% of the type size against 51.6%.

A browser moves along that axis by itself. In Chrome, where I measured it, the optical size is the font size in pixels, held to the ends of the axis: 14 pixel text gets the text cut, anything from 32 up gets the display cut, and 20 is drawn a third of the way between.

With Automatic on, the large word wears the display cut. The tone behind it is the text cut at the same size: 8% longer for this word, and taller in the lowercase. Turn Automatic off and one cut serves both sizes. At 14 the large word fills its tone exactly, because it is the small drawing enlarged. At 32 it is the small word’s turn: tighter, lower, and to my eye harder to read.

The decision left to me is about the sizes between the two ends. Left to the browser, a heading at 22 pixels is drawn part of the way along the axis, in a drawing that belongs to neither end. I give every heading the display cut, whatever its size:

font-variation-settings: "opsz" 32;

Weight, then space

Weight is the other axis, from 100 to 900, and it is continuous. The nine named weights are stops along it, and any number between two of them is a weight too. This page’s headline sits at 500.

Space is not in the font. It is mine to set, and it comes after the two decisions before it. The display cut is already drawn tighter than the text cut: set in the text cut, this page’s headline would run 8% longer before any letter-spacing at all. A heavier weight makes a line longer again, and closes the space inside its letters.

So I take space out by size. This headline loses 0.045 of its type size between every pair of letters, the headings under it lose 0.035, and the text you are reading loses 0.006, which is close to nothing.

The settings lean on each other. Tighter tracking, to my eye, makes a line look heavier than it is, and a heavier weight wants some of its space back. None of them can be judged alone.

Figures

Left alone, Inter’s figures are proportional: each digit is as wide as its own drawing. In the display cut a 1 takes 59% of the width of a 4.

That is right in a sentence and wrong in a column. A price list is read downwards, thousands under thousands, and proportional figures put each digit wherever the ones beside it leave off. Among round prices the drift is small, and the figure below measures it. A single 1 is worse: it moves everything to its left by two fifths of a figure’s width.

The tabular figures give every digit one width, and the column closes up. In CSS that is one line:

font-variant-numeric: tabular-nums;

Tabular figures earn their place twice in an interface. Once in any column. And once wherever a number changes while somebody is looking at it: a price that updates, a clock, a count. With proportional figures everything after the number moves each time a 1 comes or goes.

The small switches

The rest of the list is OpenType features: named switches inside the font, each of which redraws a few glyphs. The table holds the ones this page’s font answers to, each with its own switch and a sample set with it off or on.

Three of them are on before I write a line of CSS. The specification requires contextual alternates and localised forms by default, and browsers apply kerning unless told not to. What is left to me there is to leave them on, and to mark the language of a text so the localised forms know which to be.

The other two I turn on by hand, and only where they belong. Tabular figures go on columns and counters. Fractions go on the fraction. Inter’s are careful, and leave a date like 13/10/2026 alone, but I would still not set a switch that redraws numbers on a whole page.

What I keep from this

• The cut follows the size by itself. Decide what happens between the two ends.
• Weight is a number. The nine names are only stops.
• Space comes last, after the cut and the weight, and more of it comes out as the type gets larger.
• Tabular figures for anything in a column and anything that changes in place.
• Leave the default features on, and mark the language.

None of this is in the drawing of the letters. All of it is in how they are set.