Generate a harmonious responsive type scale, preview it in context, and export production-ready CSS.
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 →| Element | Desktop | Tablet | Mobile | Line Height | Weight |
|---|
Tool Guide
A responsive type scale creates hierarchy without forcing every heading to shout. Set the body size first, choose a ratio, then judge the result in context.
Frequently Asked Questions
A typography scale is a related set of font sizes used to create consistent hierarchy between body text, headings, labels, and display text.
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.
Use smaller ratios or fluid clamp values on narrow screens so large headings do not overwhelm the viewport while body text remains readable.
For most web projects, 16px to 18px is a reliable starting range. Reading-heavy sites may benefit from 18px to 20px.
Yes. Font size creates hierarchy, but line height controls rhythm and readability. Larger headings normally need tighter line height than body text.
Keep Exploring