A Type Scale That Holds Up on Real Content
Modular scales look beautiful in a specimen and fall apart the moment an editor writes a nine-word heading. Here's the fluid scale we use instead.
Written by
Elizabeth Sramek
Elizabeth Sramek
Founder & lead designer
Elizabeth started ThemesCraft in 2012 as a one-person theme shop and has designed every theme the studio has released since. She writes about block themes, typography systems, and the unglamorous work of keeping a fourteen-year-old codebase healthy.
Reviewed by
Tomáš Holub
Tomáš Holub
Theme engineer
Tomáš joined the studio in 2017 and owns everything from theme.json architecture to the release pipeline. He maintains the studio's two plugins and runs the accessibility audits.
Last updated ·
Published ·
1 min read
The classic advice is to pick a ratio and multiply. That works until real content arrives with headings twice as long as your sample text.
Fluid, but clamped early
We use clamp() on four sizes only — display, headline, subhead, body — and cap the upper bound well below the viewport maximum. Anything larger gets chosen deliberately per template rather than generated.
Test with the worst case
Our specimen files include the longest heading from the client's existing site and the shortest. If the scale survives both, it ships.
Design for the second-longest heading. The longest one you'll edit; the second-longest will slip through.