Variable Font

Fonts came as one file per weight for a long time. Fix font weight, the thickness of the strokes, at 400 for body, 600 for subheads, and 700 for emphasis, and that is three files to download.

Pagedeck could see the cost. Three weights of a Korean typeface came to 1.2 megabytes, and on a slow connection the letters arrived late. Meanwhile the page rendered in whatever font the device already had and re-rendered once the real one landed, and because the two fonts set at different widths, a heading gained a line at that moment and everything below it shifted.

There was a second problem. Distinguishing read from unread items in a list by weight needed something around 450, because the gap between 400 and 700 was too wide — and no file existed at 450.

Putting an axis inside one file and computing the values along it, instead of splitting weights into separate files, is what this format does.

Four things at once.

1. Fewer files to download. Three become one, so there are fewer requests and the letters arrive sooner.
2. Values that were never on the scale. Any point along the axis can be pulled out, so 450 and 460 both work.
3. Weight that changes smoothly. Moving along an axis means a selected item can thicken gradually rather than jumping a step.
4. Narrower text where the font carries a width axis too. Tightening by five percent can pull a two-line heading onto one line.

There is a condition. One variable file is larger than one old-style weight. So for a product using only two weights, downloading two separate files stays lighter. The gain starts from about three or four weights up.

Korean is harder. A single family needs far more glyphs, so the file is large to begin with, and variable Korean typefaces are still not common. Without subsetting to only the glyphs in use, the saving on file count gets cancelled out by file size. Either way, font fallback — the ordered list of substitutes for when the specified font is missing — has to be prepared separately.

"We're using four weights, so let's switch to a variable font. It comes down to one file."

With many weights in play, the format pays off.

"Could I use 450? The gap between 400 and 700 is too wide."

A mid-range weight that isn't on the scale is needed.

"Korean variable fonts are big, so we need to subset first."

Without cutting down to the glyphs in use, the saving disappears.

At Pagedeck, Noa and Theo make this call together. Noa counts how many weights are in use and Theo compares total bytes for both approaches. They set a line at three weights or fewer, where they do not switch, because once mockups start using mid-range weights it is hard to go back.