Type Scale Calculator - Modular Font Sizes in px, rem & CSS Variables

This Type Scale Calculator generates a modular font-size chart from a base pixel size, modular ratio, and step count above and below base. Each step shows px and rem values (rem = px ÷ root), with a live preview table and copy-ready CSS custom properties or utility classes.

Type scale settings

Base font size (px)Root font size (px)Modular ratioSteps above baseSteps below base

Modular scale preview

Token	px	rem	Preview
text-sm	10.24	0.64	Aa
text-md	12.8	0.8	Aa
text-base	16	1	Aa
text-lg	20	1.25	Aa
text-xl	25	1.5625	Aa
text-2xl	31.25	1.9531	Aa
text-3xl	39.0625	2.4414	Aa

Export CSS

:root {
  --font-size-sm: 0.64rem;
  --font-size-md: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5625rem;
  --font-size-2xl: 1.9531rem;
  --font-size-3xl: 2.4414rem;
}

Ratio guide

1.125 - subtle UI hierarchy
1.25 - common web default (major third)
1.333 - editorial / marketing headings
1.618 - golden ratio display type

Sample scale - 16px base, 1.25 ratio

Token	px	rem (16px root)
text-sm	12.8	0.8
text-base	16	1
text-lg	20	1.25
text-xl	25	1.5625
text-2xl	31.25	1.9531

Why modular scales beat arbitrary font sizes

Picking font sizes one at a time-14px here, 22px there-creates subtle dissonance that users feel even if they cannot name it. A modular scale multiplies a base size by a fixed ratio so every step relates mathematically to its neighbors. The result is a coherent hierarchy from captions through hero headings, ready to codify as design tokens.

This calculator accepts your base px size, chosen ratio, and step count, then outputs both pixel and rem values. rem conversion respects your declared root font size so tokens align with accessible, zoom-friendly CSS.

From static scale to fluid type

Modular scales define your token ladder; fluid typography makes each rung responsive. After exporting rem values here, use the Fluid Typography Calculator or CSS Clamp Calculator to wrap individual steps in clamp() for viewport-aware scaling.

Type Scale FAQ

What is a modular type scale?

A modular type scale multiplies a base font size by a consistent ratio to produce harmonically related sizes-each step is base × ratioⁿ. Designers use scales so headings, body copy, and captions feel visually coherent rather than picked arbitrarily. Common ratios include 1.25 (major third) and 1.333 (perfect fourth).

Which modular ratio should I choose?

Use 1.125 (minor second) for dense UI with subtle hierarchy. 1.25 (major third) is the most common web default. 1.333 (perfect fourth) suits editorial and marketing pages with dramatic heading jumps. 1.618 (golden ratio) works for display-heavy brand sites. Start with 1.25 unless your design system specifies otherwise.

How do px and rem relate in a type scale?

rem is relative to the root font size-typically 16px on html. This calculator divides each step's px value by your declared root to produce rem. If html { font-size: 16px }, a 20px step becomes 1.25rem. Matching the root input to your project's html font-size keeps exported tokens accurate.

Type scale calculator vs fluid typography calculator: when to use each?

This tool produces fixed modular steps in px and rem-ideal for design tokens, Tailwind theme extensions, and static size charts. The Fluid Typography Calculator adds clamp() viewport scaling for responsive type that grows between breakpoints. Use the type scale for token foundations; use fluid typography when sizes must interpolate across viewports.

How do I export the scale to CSS?

Choose Variables mode to copy a :root block with --font-size-* custom properties, or Classes mode for .text-base { font-size: … } utilities. Paste into your global stylesheet, CSS module, or design-token file. Pair with line-height tokens for complete typography rhythm.

Can I use these sizes in Tailwind CSS?

Yes. Map the exported rem values to Tailwind v4 @theme tokens-e.g., --text-lg: 1.25rem-or paste utility classes into @layer utilities. For a full responsive scale with clamp(), combine this chart with the Fluid Typography Calculator to add min/max viewport bounds per step.