Type Scale Calculator
Generate a modular typography scale using musical/mathematical ratios. Live preview of every step, copy-paste CSS variables + Tailwind config snippets.
Type Scale Calculator
| Token | Step | Pixels | Rem | Preview |
|---|
📋 CSS Custom Properties
⚡ Tailwind CSS Config
How to use the Type Scale Calculator
Set your base size (usually 16px)
The base size is your body text — the size everything else scales from. 16px is the default in most browsers and the safest choice. 14px for compact designs, 18px for editorial / reading-focused sites. Avoid anything below 14px for body text — readability + accessibility suffer.
Pick a ratio
The ratio determines how dramatic the size jumps are. Smaller ratios (Major Second 1.125) give subtle steps suitable for content-heavy sites; larger ratios (Perfect Fifth 1.500, Golden 1.618) give dramatic steps for editorial design. Sweet spot for most sites: Major Third 1.250 or Perfect Fourth 1.333. The musical names come from frequency ratios in Western music — they sound harmonious because they are.
Choose steps up + down
"Steps up" generates larger sizes (h1, h2, h3, hero headlines). "Steps down" generates smaller sizes (captions, labels, footnotes). 5-6 up + 1-2 down covers most design systems. The table shows every size; the "Preview" column renders actual text at each size.
Copy CSS or Tailwind config
Two output formats: CSS Custom Properties (--text-base, --text-lg, etc.) drops into any vanilla project; reference via var(--text-lg) in declarations. Tailwind config goes into tailwind.config.js's theme.fontSize section. Both are pixel-precise and use rem units (16px = 1rem) so they respect user font-size preferences in browser settings — important for accessibility.
Modular type scales — why ratios make typography sing
A modular type scale is a typography system where every font size relates to a base size by a consistent ratio. Instead of arbitrary sizes like 14, 17, 22, 28, 34, 42px, you get mathematically harmonious sizes like 16, 20, 25, 31.25, 39.0625, 48.83 (with a 1.25 ratio). The numbers feel cleaner because they're not arbitrary — they're a geometric progression. The ratios themselves are borrowed from music, where intervals are frequency ratios — a perfect fourth is 4:3, a fifth 3:2, an octave 2:1. When sizes follow a ratio, headings flow naturally into body, and body flows into captions, with visual hierarchy that feels intentional rather than random.
Choosing the right ratio for your design
Smaller ratios (1.067 Minor Second, 1.125 Major Second) produce subtle, conservative scales — best for content-heavy interfaces where size differences should be felt rather than seen (long-form articles, documentation, dashboards). Mid-range ratios (1.20 Minor Third, 1.25 Major Third, 1.333 Perfect Fourth) are the sweet spot for general-purpose web design — strong enough hierarchy to guide readers, subtle enough to coexist on the same page. Larger ratios (1.5 Perfect Fifth, 1.618 Golden, 2.0 Octave) create dramatic hierarchy suitable for marketing pages, magazine layouts, hero sections where text dominates the design.
A type scale isn't just font sizes — it's a system of relationships. Once your scale exists, every typography decision becomes "which step?" instead of "what number?"
Why rem units beat pixels
The output uses rem units (1rem = the user's browser default, usually 16px) rather than pixels. This matters for accessibility: users with low vision can increase their browser's default font size in settings, and rem-based designs scale proportionally. Text set in pixels ignores that browser setting. WCAG 2.1 SC 1.4.4 asks that text can be resized to 200% without loss of content or function, and honouring the reader's default size is the simplest way to start. Modern best practice: declare font sizes in rem (especially for body + headings); pixel units are fine for borders, fixed UI element heights, and decorative elements that shouldn't scale.
Multilingual typography
Sites that mix scripts need more than one scale decision. Chinese, Japanese, Thai and other scripts set at the same pixel size as Latin text do not look the same size, and the difference depends on the fonts: compare your actual Latin and CJK faces side by side at the base size before deciding whether a locale needs its own base. A scale is a set of ratios, so the same ratios can sit on a different base per locale — the hierarchy stays consistent even when the base moves.
Musical ratios, the 16px browser default, and why rem respects the reader
Modular type scale = every font size = base × ratio^step. Geometric progression produces visually harmonious hierarchy.
The preset names are musical intervals: Minor Third 6:5 (1.2), Perfect Fourth 4:3 (1.333), Perfect Fifth 3:2, Octave 2:1.
At a 1.25 ratio and a 16px base, the steps are 16, 20, 25, 31.25, 39.06, 48.83 — each 1.25 times the last.
16px is the default font size in most browsers (MDN), which is why 1rem is usually 16px.
Rem units scale with user preferences; pixel units don't. Use rem for accessibility, especially for font sizes.
WCAG 2.1 SC 1.4.4 asks that text resize to 200% without loss of content — rem-based sizes follow the reader's setting.
Tim Brown brought modular scales to web designers in "More Meaningful Typography" (A List Apart, May 2011), with his calculator at modularscale.com, pointing readers to Robert Bringhurst's The Elements of Typographic Style.
The "perfect" type scale doesn't exist — context matters. Editorial wants dramatic ratios; dashboards want subtle ones.
CSS clamp() lets you make responsive type scales: clamp(1rem, 2vw + 0.5rem, 1.5rem) scales smoothly between sizes by viewport.
Type scale tokens (--text-xl, --text-2xl) outperform raw values in design systems — changing the scale becomes one edit, not 1000.
Frequently Asked Questions
-
A typography system where every font size relates to a base size by a consistent ratio. Sizes form a geometric progression: 16, 20, 25, 31.25, 39.06... (1.25 ratio). The result feels harmonious because each size has a mathematical relationship to the others. Without a scale, you end up picking arbitrary sizes (14, 17, 22, 28...) that look "off" together. Tim Brown popularised modular scales for the web (A List Apart, 3 May 2011), building on Robert Bringhurst's The Elements of Typographic Style.
-
Depends on your design's voice. Subtle (1.125 Major Second): documentation, dashboards, content-heavy interfaces. Mid-range (1.2 Minor Third, 1.25 Major Third, 1.333 Perfect Fourth): general web design. Dramatic (1.5 Perfect Fifth, 1.618 Golden): marketing pages, editorial, magazine layouts where typography is a primary visual element. Start with 1.25; bump to 1.333 if you want stronger hierarchy; drop to 1.2 if your design is content-dense.
-
1rem = the user's browser default font size (usually 16px, but adjustable in browser settings). Readers with low vision often raise it. Rem-based typography scales with that preference; pixel-based typography ignores it. Setting text in rem (not px) is a small change that serves every one of them. Pixels are still fine for borders, fixed UI heights, decorative elements that shouldn't scale — but font sizes should use rem.
-
Two approaches: (1) Different scales at different breakpoints — mobile uses a tighter scale (1.2), desktop uses a wider scale (1.333). Define each via media queries. (2) Fluid typography using CSS clamp() — sizes scale smoothly with viewport width. Example: clamp(1rem, 2vw + 0.5rem, 1.5rem) sets a font-size that grows between 1rem and 1.5rem as the viewport widens. Fluid is more modern but tricky to debug. Multi-breakpoint scales are simpler and more predictable. Both work fine — this calculator generates a static scale; apply responsive logic in your CSS layer.
-
Mostly yes — that's the point of having a scale. But: hero headlines often want one step BIGGER than your h1 to feel exceptional. Marketing pages can break the scale for impact. The scale gives you defaults; designers can override deliberately. The mistake is using off-scale sizes for normal content (h2 at 27px when your scale says 25px) — that creates "almost but not quite" feeling that looks broken. Either follow the scale or break it on purpose; the in-between is bad.
-
Line-height scales inversely with font size. Body (16px) wants ~1.5-1.7× line-height (24-27px). H1 (40-48px) wants ~1.1-1.2× (44-58px). Headings get tighter as size grows; body gets looser for reading comfort. This calculator focuses on font sizes; line-height is a separate concern handled in your CSS layer.
-
They are musical intervals, which are frequency ratios — Minor Second 16:15 ≈ 1.067, Major Second 9:8 = 1.125, Minor Third 6:5 = 1.2, Major Third 5:4 = 1.25, Perfect Fourth 4:3 ≈ 1.333, Perfect Fifth 3:2 = 1.5, Major Sixth 5:3 ≈ 1.667, Octave 2:1. Tim Brown's 2011 article made the naming common among web designers; the Augmented Fourth preset here is √2 ≈ 1.414 and the Golden Ratio 1.618, neither of which is a simple whole-number ratio.
-
Copy the Tailwind config snippet into your tailwind.config.js's theme.fontSize section — overrides Tailwind's defaults with your scale. For design tokens (Style Dictionary, Tokens Studio): export the values to your tokens JSON, then transform to platform-specific outputs (Figma plugin, CSS variables, iOS / Android constants). For vanilla CSS, copy the CSS Custom Properties block into your :root selector. The CSS uses rem units; your reset / base stylesheet should set html { font-size: 100%; } to honor user preferences.
-
No. All calculations run entirely in your browser via JavaScript. There's no server roundtrip — open DevTools → Network and confirm zero outbound requests. Your design tokens stay on your device. Safe for unannounced design systems, proprietary brand work, or any pre-launch typography decisions.
-
Keep the ratios and decide the base per script. Chinese, Japanese, Korean, Thai and other scripts set at the same pixel size as Latin text do not look the same size, and which way the difference goes depends on the fonts involved — so compare your actual faces side by side before choosing a per-locale base, then apply it with a
:lang()selector. The hierarchy stays consistent because the ratio does.
Method & sources
How it computes
Each step is base × ratio^step, from musical-interval presets (Minor Second 16:15 through Octave 2:1, plus √2 and the golden ratio) or a custom ratio, shown in px and in rem (px ÷ 16), and emitted as CSS custom properties and a Tailwind fontSize config.
What this tool implements
- Tim Brown's "More Meaningful Typography" (A List Apart, 3 May 2011), with the calculator at modularscale.com, brought modular scales to web design, pointing readers to Bringhurst's The Elements of Typographic Style.
- WCAG 2.1 SC 1.4.4: text can be resized to 200% without loss of content — the case for rem; MDN: the default font size is usually 16px. The page's "~10% of adults adjust font size" and design-system ratio claims had no source and were removed.
- Worked: at base 16 and ratio 1.25 the steps are 16, 20, 25, 31.25, 39.06 and 48.83px.
Sources
- Brown T. More Meaningful Typography. A List Apart, 3 May 2011. https://alistapart.com/article/more-meaningful-typography/
- W3C. WCAG 2.1, Success Criterion 1.4.4 Resize Text. https://www.w3.org/TR/WCAG21/#resize-text
- MDN Web Docs. font-size (default browser font size). https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Pick up where you left off
Stored only in this browser — never sent to our servers.