Anton, and the case for a loud typeface

Most product typography apologises for existing. We wanted the opposite: headlines that carry weight and know it. Anton is condensed, heavy and slightly awkward at small sizes, which is exactly why it works when you give it room.

Two practical things we learned using it everywhere.

The first is that a condensed face lies about its size. Anton at 17 pixels does not read as loudly as a normal sans at 17 pixels, because the letters are narrower and the word occupies less of the line. In our site footer the labels are set at 17 against body text at 13.5, and that gap was arrived at by eye rather than by ratio. Any rule that sets type by number alone will get a condensed face wrong, in the direction of too quiet.

The second is a genuine bug that a web font caused, and it is the kind of thing worth knowing before it happens to you.

Web fonts load asynchronously. We use font-display: swap, which means the browser draws your text in a fallback face immediately and re-draws it in the real one when it arrives. That is the right default, because the alternative is invisible text. But it means the size of anything containing that text changes at an unpredictable moment, and possibly after the page's load event has already fired.

Our site footer is a fixed card that the page slides away from as you reach the end, and the page reserves exactly the card's height so the two meet flush. The height is measured, not guessed, because the card is a grid and it is 429 pixels on a desktop and 673 on a phone: no single number could be right for both.

The measurement was taken too early. Anton swapped in afterwards, the labels grew, the card got taller, and the reservation was now nine pixels short. What we saw was the page overlapping the top of the footer by twelve pixels, which looks like a layout bug and is in fact a timing bug. Measured before the swap: 438. The real card: 450.

The fix is one line, and it is the general answer to this whole class of problem: re-measure when the fonts are ready, not when the page is. Anything whose size depends on text in a downloaded face has to treat the font's arrival as a layout event, alongside resize and the usual observers.

Loud type is worth the trouble. Just budget for the fact that you are laying out with a font you do not have yet.