CSS

Modular Type Scale & Rhythm Calculator

Build a measured type hierarchy. Compare rounded sizes and line heights, then export a reusable set of CSS variables.

Result

A modular scale with a steady rhythm

The preview simulates your reference root. Sizes are fixed steps, not viewport interpolation.

--type-4 · 2.441rem · 39.056px at 16px root

Good type gives ideas room.

--type-3 · 1.953rem · 31.248px at 16px root

Good type gives ideas room.

--type-2 · 1.563rem · 25.008px at 16px root

Good type gives ideas room.

--type-1 · 1.25rem · 20px at 16px root

Good type gives ideas room.

--type-0 · 1rem · 16px at 16px root

Good type gives ideas room.

--type-n1 · 0.8rem · 12.8px at 16px root

Good type gives ideas room.

--type-n2 · 0.64rem · 10.24px at 16px root

Good type gives ideas room.

Sizes and line heights at the reference root
Step Size (rem) Size (px) Line (rem) Line (px)
-20.6410.24116
-10.812.81.2520
01161.524
11.25201.7528
21.56325.0082.2536
31.95331.2482.7544
42.44139.0563.556

System fonts vary by device.

Seven fixed steps and a 4px rhythm at a 16px root.

CSS 

/* Reference root: 16px. This does not force a root font size. */
:root {
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rhythm: 0.25rem;
  --type-n2: 0.64rem;
  --leading-n2: 1rem;
  --type-n1: 0.8rem;
  --leading-n1: 1.25rem;
  --type-0: 1rem;
  --leading-0: 1.5rem;
  --type-1: 1.25rem;
  --leading-1: 1.75rem;
  --type-2: 1.563rem;
  --leading-2: 2.25rem;
  --type-3: 1.953rem;
  --leading-3: 2.75rem;
  --type-4: 2.441rem;
  --leading-4: 3.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

.type-sample {
  font-family: var(--font-text);
  font-size: var(--type-0);
  line-height: var(--leading-0);
}

.type-heading {
  font-family: var(--font-text);
  font-size: var(--type-4);
  line-height: var(--leading-4);
  margin: 0 0 var(--space-4);
}
CSV 

step,token,font_size_rem,font_size_px_at_reference,line_height_rem,line_height_px_at_reference
-2,--type-n2,0.64,10.24,1,16
-1,--type-n1,0.8,12.8,1.25,20
0,--type-0,1,16,1.5,24
1,--type-1,1.25,20,1.75,28
2,--type-2,1.563,25.008,2.25,36
3,--type-3,1.953,31.248,2.75,44
4,--type-4,2.441,39.056,3.5,56

Build a modular scale and vertical rhythm

  1. Set a pixel base size, reference root and scale ratio.
  2. Choose how many steps appear above and below the base.
  3. Set a minimum line-height ratio and rhythm unit, then inspect the specimens and measurement table.
  4. Copy the CSS variables and usage classes, or download the table as CSV.

How are sizes calculated?

Each ideal size is base × ratio raised to its step. Negative steps divide by the ratio. With a 16px base and 1.25 ratio, step -1 is 12.8px and step 1 is 20px. The tool converts each ideal size to rem using the reference root, then rounds the rem token to your chosen decimals. The table and preview show that rounded token’s effective pixel size, so they match the export at the reference root.

How does the rhythm work?

The rhythm unit is also converted to rem and rounded first. Each line height is the smallest whole multiple of that rounded unit which meets the chosen minimum size × line-height ratio. Spacing tokens use 1, 2, 3, 4, 6 and 8 rhythm units. This is a length-based rhythm system; test that its line heights suit your actual font, language and content. Letter shapes and fallback metrics differ between systems.

Does this change size with the viewport?

No. This is a fixed modular scale, distinct from a fluid clamp generator. Rem values follow the final page’s root font size and user settings. The export deliberately does not force the root size. The preview simulates the reference root with equivalent pixel values so it does not change the surrounding tool interface. At a different root, all exported rem-based sizes, line heights and spaces change proportionally.

Bounds and rounding

Base size is 8–48px, reference root 8–32px, ratio 1.05–2, with up to four steps below and six above. Every ideal generated size must stay between 6px and 256px. The rhythm unit is 2–16px, minimum line-height ratio 1–2, and token precision two to four decimals. Coarse precision can move effective sizes or rhythm away from the requested pixel values; the output reports these values explicitly. Small scale steps are not automatically suitable for readable body text. Custom web fonts are not downloaded.

References

Read MDN CSS lengths and rem units and MDN line-height .

Related Tools