Typographic Scale Calculator

Good typography hierarchy isn't about picking font sizes that "look right" — it's about establishing a mathematical relationship between your type sizes that creates visual rhythm and makes the hierarchy obvious at a glance. Modular scale does exactly this: starting from a base size, each level is multiplied by the same ratio, creating a scale with consistent proportional relationships.

What Is a Modular Scale?

Choose a base size (usually 16px for body text) and a ratio. Multiply the base by the ratio repeatedly to get heading sizes. Divide it to get smaller text.

Popular ratios:

Ratio	Name	Character
1.067	Minor Second	Very subtle, dense
1.125	Major Second	Compact, editorial
1.200	Minor Third	Gentle, professional
1.250	Major Third	Classic, versatile
1.333	Perfect Fourth	Balanced, popular
1.414	Augmented Fourth / √2	Geometric, clean
1.500	Perfect Fifth	Bold, dramatic
1.618	Golden Ratio	Natural, flowing
2.000	Octave	Very large jumps

For UI design, the Perfect Fourth (1.333) and Major Third (1.250) are the most practical — they create clear hierarchy without heading sizes becoming too large for body copy on the same page.

How the Calculator Works

At CalcHub, enter your base font size and choose a ratio. The calculator generates a complete scale up and down from the base:

Step	Multiplier	Size (base 16px, ratio 1.333)
-2 (xs)	1/1.333²	9px
-1 (sm)	1/1.333	12px
0 (base)	1	16px
1 (md)	1.333	21.3px → round to 21px
2 (lg)	1.333²	28.4px → 28px
3 (xl)	1.333³	37.9px → 38px
4 (2xl)	1.333⁴	50.5px → 50px
5 (3xl)	1.333⁵	67.3px → 67px

The output includes CSS custom properties, Tailwind fontSize config, and the recommended lineHeight and letterSpacing for each step.

Pairing With Line Height

Line height isn't one size fits all. As font size increases, line height ratio should decrease:

Font Size	Line Height Ratio	Why
12–14px	1.6–1.8	Small text needs more breathing room
16–18px	1.5–1.6	Standard body reading
20–26px	1.4–1.5	Larger body/subheadings
28–40px	1.2–1.3	Headings
42px+	1.0–1.15	Display, headlines
Single-line buttons/badges	1.0–1.1	No multi-line wrapping

A common mistake: using a global line-height: 1.5 applied to everything including 60px headings, creating excessive vertical gaps between heading lines.

Multi-Base Scales

Complex design systems sometimes use two base sizes — like 16px body and 14px for a compact data density — each with its own scale. The calculator supports dual-base mode, generating two parallel scales that share the same ratio and can be toggled via a CSS class for dense vs comfortable layouts.

Type Scale Tokens for Design Systems

Naming conventions matter for maintenance:

:root {
  --text-xs:    0.75rem;   / 12px /
  --text-sm:    0.875rem;  / 14px /
  --text-base:  1rem;      / 16px /
  --text-lg:    1.125rem;  / 18px /
  --text-xl:    1.25rem;   / 20px /
  --text-2xl:   1.5rem;    / 24px /
  --text-3xl:   1.875rem;  / 30px /
  --text-4xl:   2.25rem;   / 36px /
  --text-5xl:   3rem;      / 48px /
  --text-6xl:   3.75rem;   / 60px /
}

This follows Tailwind's naming convention — useful if you're using Tailwind or want to align with a widely understood system.

Tips

• Round to whole numbers. The mathematical scale gives you fractional pixels (21.3px). Round to whole px values; the visual difference is imperceptible and your code is cleaner.
• Don't over-engineer with too many levels. Most UIs need 5–7 sizes: xs (captions), sm (supporting), base (body), lg/xl (lead text), 2xl–4xl (headings), 5xl+ (display). More than 8 levels creates choices that slow down design and development.
• Test scale with real content. A type scale that looks balanced as swatches can look wrong in context. Paste actual body copy and real headline text into your preview.

Should I use the Golden Ratio for typography?

The Golden Ratio (1.618) produces dramatic size jumps — good for expressive editorial design, but the heading sizes become very large quickly. A 16px base with Golden Ratio hits 160px at step 6. Perfect Fourth (1.333) or Major Third (1.250) are more practical for UI design.

How do I handle paragraph and display text differently?

Long-form reading (blog posts, documentation) benefits from generous line heights (1.6–1.7) and slightly wider measure (60–80 characters per line). UI text (dashboards, forms) works better at tighter line heights (1.3–1.5) with shorter line lengths. The scale is the same; the context determines the supporting settings.

What's the right font size for mobile body text?

16px is the safe minimum on mobile — browsers prevent zooming on inputs smaller than 16px on iOS, which is a strong hint about the minimum. Many designers go to 15–16px on mobile and 16–18px on desktop for body text.

Related Calculators

• Font Size Calculator — make your scale fluid across viewport sizes
• Spacing Calculator — pair type scale with a matching spacing system
• Pixel to Rem Calculator — convert your px scale to rem values