Type Scale Calculator

About this tool

Modular typography scale

Generate a modular typography scale using musical/mathematical ratios. Live preview of every step, copy-paste CSS variables + Tailwind config snippets.

RT-DEV-081 · Developer Tools

Base size (px)

Ratio preset

Custom ratio

Steps up

Steps down

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 universal browser default 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 same principle drove Renaissance architecture (the Golden Ratio in proportions), classical music (intervals expressed as frequency ratios), and traditional book typography (Gutenberg's bibles used a 1.5 ratio). 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. Most modern design systems (Material Design 3, Apple HIG, IBM Carbon, GitHub Primer) sit between 1.125 and 1.25 — proven middle ground.

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. Pixel-based designs lock everyone to 16px regardless of preference — a barrier for ~10% of adults who actively adjust browser font size for readability. 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. The Material Design 3 + Apple HIG + Google's modern Material 3 + IBM Carbon all use rem-based scales for this reason.

The ASEAN web-typography angle

Typography across ASEAN has additional considerations beyond Western web design. CJK + Devanagari + Thai + Khmer scripts: complex characters often need slightly larger sizes for clarity — base 16px Latin maps to 14-15px CJK / 14-15px Thai for visual parity. The font has its own size correction too — Noto Sans CJK at 16px reads slightly smaller than DM Sans at 16px due to glyph design. Multilingual sites: Singapore's CommonGov sites (gov.sg, MOM, ICA, IRAS) mostly use 16px base for English + 14px for CJK; Malaysia's gov.my sites use 16px universally with locale-aware fonts. RTL languages (Arabic, Hebrew, used in parts of Brunei + minority communities): type scales work identically; line-height needs adjustment because Arabic + Hebrew glyphs are taller. Reading direction doesn't affect type scale math but affects visual hierarchy perception. For ASEAN tech companies (Grab, Shopee, Lazada, GoTo, Tokopedia), typography decisions are usually made in the design system once, with multi-script overrides applied per locale.

10 Things to Know About Type Scales

Modular type scale = every font size = base × ratio^step. Geometric progression produces visually harmonious hierarchy.

Musical interval ratios — Minor Third (1.2), Perfect Fourth (1.333), Octave (2.0) — sound harmonious AND look harmonious in typography.

The Golden Ratio (1.618) was used in Renaissance architecture + Greek temples + Apple's original logo design.

16px is the universal browser default for body text. The base step in any type scale should be ~16px for compatibility.

Rem units scale with user preferences; pixel units don't. Use rem for accessibility, especially for font sizes.

Material Design 3 uses ratios between 1.125 and 1.25. Apple HIG sits at ~1.2. IBM Carbon at 1.25. The mid-range is the proven sweet spot.

Tim Brown's Modular Scale (modularscale.com, 2011) popularised the concept among web designers. Robert Bringhurst's "Elements of Typographic Style" introduced it earlier.

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. Modular scales were popularised by Tim Brown (modularscale.com, 2011) and Robert Bringhurst's "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 — Material Design, Apple HIG, IBM Carbon all sit here. 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). Users with low vision often increase this to 20-24px for readability. Rem-based typography scales with that preference; pixel-based typography ignores it. ~10% of adults actively adjust browser font size. Setting text in rem (not px) is a small change that makes your site accessible to all 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. Material Design 3 publishes specific line-height tokens per type scale step. CSS clamp() works here too: line-height: clamp(1.1, 1.5 - 0.5 × (font-size / 48px), 1.7) approximates the curve. This calculator focuses on font sizes; line-height is a separate concern handled in your CSS layer.
Historical convention from Robert Bringhurst's "Elements of Typographic Style" (1992). Musical intervals are frequency ratios — Minor Third 6:5 = 1.2, Perfect Fourth 4:3 = 1.333, Octave 2:1 = 2.0. These ratios sound harmonious because of physics (whole-number ratios in the harmonic series). The same ratios, applied to typography sizes, produce visual harmony. The Renaissance-era origins remind designers that proportion theory is older than the web — it works across architecture, music, and typography for the same reason.
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.
Complex scripts (Chinese, Japanese, Korean, Thai, Devanagari, Arabic) usually need slightly larger sizes for visual parity with Latin. Common practice: base 16px Latin → 14-15px CJK/Thai for similar perceived size. The font's individual glyph design matters too — Noto Sans CJK at 16px reads smaller than DM Sans at 16px. Multilingual sites typically maintain locale-specific overrides on top of the scale. Singapore gov.sg, Malaysia gov.my, and Thailand gov.go.th all do this. For ASEAN tech companies (Grab, Shopee, Lazada), the design system defines one scale + per-locale glyph size adjustments via CSS locale selectors.