Member-only story
Sizing typography in design systems
These t-shirts don’t fit.
Depending on the manufacturer, some T-shirts are created bigger or smaller than others. A Large T-Shirt from one company is more like a Medium from another. Therefore, the size on the label is not an accurate gauge of how comfortably the shirt will fit. Sometimes, you have to try the T-Shirt on before you know, and the same is true of typography.
In print, typesetters would define a small set of Headline sizes, such as Large, Medium, and Small, and confidently construct pamphlets, newsletters, and magazines. Because the size of the typography was relative to the static bounds of the paper, T-Shirt sizing worked very well.
However, we are not so fortunate in the age of responsive digital design! Unlike the fixed size of a magazine page, a screen layout changes dynamically with the size of a browser window. Still, the typography must look good and readable at any size the user wants.
T-Shirt Sizing
T-Shirt sizing is the most popular method of defining multiple typography sizes in Design Systems. Sizes like this are familiar to most designers and engineers.
- headline/XL
- headline/L
- headline/M
- headline/S
- headline/XS
Five Headline sizes seem more than enough to handle the job for any imaginable scenario! But is it true? How can we know for sure?
Size is Relative
T-Shirt sizes such as Large, Medium, and Small for typography appear as a reasonable categorization method. However, these concepts quickly break down where responsive layouts are concerned because they are only meaningful in context to their container. To understand the issue, consider the philosophical meaning of Large.
What is ‘Large’?
The Chimelong Ocean Kingdom in Zhuhai, China, holds the Guinness world record for being the largest aquarium in the world. If we were to give it a T-Shirt size as a comparison to other aquariums, we’d need a lot of ‘X’s in front of the ‘L’!
Yet, for one Antarctic Blue Whale, The Chimelong Ocean Kingdom aquarium is a tiny…
