What is a modular type scale?

It multiplies a base font size by a constant ratio to produce every step of the scale — so each size shares a geometric relationship instead of being picked at random. Common ratios are 1.200 (minor third), 1.250 (major third) and 1.333 (perfect fourth).

How do I choose a ratio?

Steeper ratios create stronger contrast between body and display text, which suits landing pages and editorial layouts. Gentler ratios (1.2) keep a tighter, denser system ideal for text-heavy apps and dashboards. Start with 1.25 and adjust.

Why output in rem instead of px?

rem units scale with the user's browser font-size setting, which is the accessible default. The px column shows the rendered size at your chosen base so you can check it matches your design.

Which font pairings are available?

Six curated heading/body pairings built only from widely available system fonts — System, Grotesque, Editorial, Humanist, Geometric and Technical. No webfont loading required, so the preview and output work everywhere.

Typography scale generator

Generate a modular type scale from base size and ratio (1.2 / 1.25 / 1.333). Get px & rem sizes, line heights, letter spacing, font pairings, CSS variables and a live preview. Free, no sign-up.

Base font size (px)

1rem = 16px

Scale ratio

Font pairing

Live preview

System · 1:1.25

Design systems, made with a single color.

The quick brown fox jumps over the lazy dog.

Design systems, made with a single color.

Step	Size (px)	rem	Line height	Letter spacing
xsCaption / helper	10.2px	0.64rem	1.45	0em
smSmall text	12.8px	0.8rem	1.45	0em
baseBody	16px	1rem	1.5	0em
lgLead / callout	20px	1.25rem	1.4	0em
xlSub-heading	25px	1.563rem	1.3	-0.01em
2xlHeading	31.3px	1.953rem	1.15	-0.02em
3xlSection heading	39.1px	2.441rem	1.15	-0.02em
4xlPage heading	48.8px	3.052rem	1.15	-0.02em
5xlDisplay	61px	3.815rem	1.15	-0.02em

CSS variables

:root {
  --text-base: 1rem; /* 16px */

--font-heading: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.64rem; /* 10.2px */
  --leading-xs: 1.45;
  --tracking-xs: 0em;

  --text-sm: 0.8rem; /* 12.8px */
  --leading-sm: 1.45;
  --tracking-sm: 0em;

  --text-base: 1rem; /* 16px */
  --leading-base: 1.5;
  --tracking-base: 0em;

  --text-lg: 1.25rem; /* 20px */
  --leading-lg: 1.4;
  --tracking-lg: 0em;

  --text-xl: 1.563rem; /* 25px */
  --leading-xl: 1.3;
  --tracking-xl: -0.01em;

  --text-2xl: 1.953rem; /* 31.3px */
  --leading-2xl: 1.15;
  --tracking-2xl: -0.02em;

  --text-3xl: 2.441rem; /* 39.1px */
  --leading-3xl: 1.15;
  --tracking-3xl: -0.02em;

  --text-4xl: 3.052rem; /* 48.8px */
  --leading-4xl: 1.15;
  --tracking-4xl: -0.02em;

  --text-5xl: 3.815rem; /* 61px */
  --leading-5xl: 1.15;
  --tracking-5xl: -0.02em;
}

A modular type scale multiplies the base size by a constant ratio so every step stays proportionally related. Steeper ratios (larger) suit display-heavy landing pages; gentler ones suit dense, text-heavy apps.

Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.

How to use this tool

Set your base body size in pixels (16px is the common default).
Choose a scale ratio — 1.25 (normal) is a good starting point; go steeper for landing pages, gentler for dense apps.
Pick a font pairing, preview it live, then copy the CSS variables (rem-based) straight into your stylesheet.

Frequently asked questions

What is a modular type scale?: It multiplies a base font size by a constant ratio to produce every step of the scale — so each size shares a geometric relationship instead of being picked at random. Common ratios are 1.200 (minor third), 1.250 (major third) and 1.333 (perfect fourth).
How do I choose a ratio?: Steeper ratios create stronger contrast between body and display text, which suits landing pages and editorial layouts. Gentler ratios (1.2) keep a tighter, denser system ideal for text-heavy apps and dashboards. Start with 1.25 and adjust.
Why output in rem instead of px?: rem units scale with the user's browser font-size setting, which is the accessible default. The px column shows the rendered size at your chosen base so you can check it matches your design.
Which font pairings are available?: Six curated heading/body pairings built only from widely available system fonts — System, Grotesque, Editorial, Humanist, Geometric and Technical. No webfont loading required, so the preview and output work everywhere.

How to use this tool

Frequently asked questions

Related tools