Font Size Scales: Building Resilient Type Systems
A type scale that looks perfect in a style guide often breaks on real content. Here is how I build font size scales that survive contact with actual pages. Every designer learns the modular type scale early on: pick a base size, pick a ratio, multiply the base by the ratio to generate a sequence of sizes, and apply the sequence to headings and body text. The result looks tidy in a style guide and breaks the moment it meets real content. I have built more type scales than I can count, and the ones that survived real pages all share a few traits that the textbook scales lacked. Here is what I do differently now. Starting From the Body, Not the Headings The textbook approach starts from a base size and generates the heading sizes by multiplying upward. I do the opposite. I start from the body size, which I almost always set at seventeen or eighteen pixels for desktop and sixteen for mobile, and I build the headings downward from a maximum the design can actually accommodate. The largest heading size is a constraint, not a derived value. I ask how much vertical room a hero heading has on a real article page, and I set the maximum to fit that room with comfortable line breaks.