Build a Type Scale That Actually Works
Generate a harmonious responsive type scale, preview it in context, and export production-ready CSS.
Typography Preview
Better Type
Natural Hierarchy
Good typography is invisible. It creates a clear path for readers to follow, establishes hierarchy, and builds trust in your content.
Learn more about typography →Good typography is invisible. It creates a clear path for readers to follow.
Learn more →Generated Type Scale
| Element | Desktop | Tablet | Mobile | Line Height | Weight |
|---|
CSS Export
Accessibility Check
- Body text is at least 16px
- Comfortable line height for reading
- Clear visual hierarchy
- Responsive values included
Compare Scale Ratios
Tool Overview
About the Type Scale Builder
The Type Scale Builder creates a responsive hierarchy for headings, body copy, labels, and supporting text.
Choose a base size and scale ratio, then compare the desktop and mobile previews. Adjust the rhythm before copying the generated CSS.
How to Use It
- Choose a font family and comfortable body size.
- Select a ratio, weight, and line height.
- Compare responsive previews, then copy the generated code.
Frequently Asked Questions
Common Questions About This Tool
What is a typography scale?+
A typography scale is a related set of font sizes used to create consistent hierarchy between body text, headings, labels, and display text.
What is the best type scale for websites?+
A Major Third ratio around 1.25 is a practical starting point for many websites. Editorial or dramatic designs may use a larger ratio, while dense interfaces usually need a smaller one.
How do I make a responsive type scale?+
Use smaller ratios or fluid clamp values on narrow screens so large headings do not overwhelm the viewport while body text remains readable.
What base font size should I use?+
For most web projects, 16px to 18px is a reliable starting range. Reading-heavy sites may benefit from 18px to 20px.
Does line height belong in a type scale?+
Yes. Font size creates hierarchy, but line height controls rhythm and readability. Larger headings normally need tighter line height than body text.
Keep Exploring