Type Scale is a simple, yet powerful web tool that generates a visual hierarchy of font sizes based on a starting value and a chosen ratio. It helps designers and developers quickly establish a consistent and aesthetically pleasing typographic scale for headings, subheadings, and body text, ensuring visual rhythm and readability across a design system. You can see how different sizes will look and export the generated scale for use in your projects.
Editorial check
How this page is checked
Source trail
typescale.com
External links are separated from Surfaced commentary.
Reader safety
Context before clicks
Product links and external services are not presented as guarantees.
Monetization
No affiliate flag
Ads and commerce links are kept distinct from editorial text.
Surfaced take
Why It’s Useful
Establishing a consistent typographic scale is fundamental to good design, but manually calculating and testing each size can be tedious. Type Scale automates this by applying mathematical ratios—like the golden ratio, perfect fifth, or major third—to generate a spectrum of font sizes. This ensures that the relationships between different text elements are visually harmonious and proportional. It's incredibly useful for quickly setting up design systems, style guides, or even just for laying out content on a webpage. Many find it a more intuitive and visually immediate way to define their typography than abstract ratio calculations alone.
In everyday life
When you’d actually reach for this
You're setting up the styles for a new web application and need to define a clear hierarchy for all text elements, from large headers to small captions. Or, you're writing a document and want to ensure your headings and subheadings have a visually pleasing and logical progression in size.
Enjoyed this? Get five picks like this every morning.
Free daily newsletter — zero spam, unsubscribe anytime.