Opinionated Typography: Scale

Modernise web typography by combining CSS math functions like pow() and progress() to create mathematically sound, fully fluid font-size scales.

Most of what you look at on the web is text. Even if you’re watch­ing videos. And there are a mil­lion dif­fer­ent takes on what makes great typog­ra­phy. I think it’s fair, then, to throw my hat in the ring.

The font scale

There’s been a lot of debate about font scales and which ones to use. Some peo­ple go with some­thing based on a ​“tra­di­tion­al” scale inher­it­ed from met­al type foundries. You’ve seen these in things like Microsoft Word (6, 8, 9, 10, 11, 12, 16, 18, etc.).

Some just eye­ball it. But this real­ly isn’t sus­tain­able or main­tain­able in the squishy world of web design. Today’s approach is bas­ing scales on a ratio.

The top row is the legacy scale used by word processors. The bottom row uses a 1.2 scale.

The advan­tage here is that there aren’t mag­ic num­bers every­where. Just one.

This is the first thing to set up, and with a few mod­ern tech­niques, a whole font-size scale can be pro­duced in a jiffy.

:root {
  --font-size-ratio: 1.2;
  --font-size-base: 1em;
  --font-size-1…