Typography Scale Calculator
Build a font-size ladder from a base size and ratio. Export CSS, SCSS, or JSON.
Typography Scale Calculator
Create harmonious typography scales using mathematical ratios for consistent, readable text hierarchies
Scale Configuration
Typically 16px for web, 14px for mobile
Perfect Fourth
Strong hierarchy with good readability
Generated Scale
How typography scales work
Pick a base size (usually 16px for body) and a ratio. Each step multiplies or divides by that ratio: base × ratio, base × ratio², and so on. That gives you a short list of sizes instead of inventing them one by one.
Keep the scale small: about 6–8 sizes covers body, captions, and headings. More than that and the hierarchy gets muddy.
Common ratios
- 1.125 (major second) — gentle steps; good for long articles and docs
- 1.2 (minor third) — solid default for most sites
- 1.25 / 1.333 — clearer heading jump; corporate and marketing pages
- 1.414 / 1.5 / 1.618 — stronger contrast; landing pages and portfolios
- 2.0 (octave) — dramatic; use sparingly
On small screens, tighter ratios (1.125–1.25) often read better. Desktop can handle a wider jump. Fluid type with clamp() bridges the gap:
h1 {
font-size: clamp(2rem, 4vw, 3rem);
}Body text: ~1.4–1.6 line height. Large headings: ~1.1–1.2. Body should stay at least 16px; aim for ~45–75 characters per line.
Frequently Asked Questions
What's the best ratio for my site?
Content-heavy sites: 1.125–1.25. Marketing and portfolios: 1.333–1.618. If you want one number to try first, use 1.2 or 1.333.
How many font sizes do I need?
Six to eight is enough: body, a couple of small sizes for captions/meta, and a few heading steps. Add a size only when you have a real use for it.
Different scales for mobile and desktop?
Often yes. Use a smaller ratio on mobile, or fluid type with clamp() so sizes ease between breakpoints instead of jumping.
How do I keep the scale accessible?
Base body at 16px or larger. Don't go below ~12px for secondary text. Check contrast, allow zoom to 200%, and map visual sizes to real heading tags (h1–h6).
Can I break the scale?
Yes. Hero type, logos, and dense tables sometimes need one-off sizes. Use the scale as the default and only step off it on purpose.
How do I wire this into Tailwind or Bootstrap?
Tailwind: set fontSize in tailwind.config. Bootstrap: override the $font-size-* variables. CSS custom properties work with any setup and are easy to theme.
Related tools
Related tools
Related Color and Design Tools
Brand Color Extractor (from URL)
Paste a website URL and extract dominant brand colors. Preview, copy HEX, and export as CSS variables or JSON.
CSS Button Style Generator
Design button styles visually—colors, gradients, borders, radii, shadows—and export production-ready CSS classes and variables.
Text Shadow CSS Generator
Create stunning text shadow effects with our interactive CSS generator. Design single or multiple layered shadows, customize colors, blur, and offset. Perfect for web designers and developers.
Real-Time Theme Preview Sandbox
Interactive theme customization tool for previewing and testing color schemes, typography, and spacing in real-time.
Typography Pairing Tool - Find Perfect Font Combinations
Discover and test beautiful font combinations for your web projects. Preview font pairs in real-time.
UI Color Psychology Reference - Complete Guide to Color Emotions & User Behavior
Comprehensive reference guide to color psychology in UI design. Learn how colors affect user emotions, behavior, and decision-making with cultural considerations and accessibility guidelines.
Websafe Colors Reference
Explore and use the traditional 216 websafe colors. Learn about color compatibility across browsers and operating systems.