What is a modular type scale?

A modular scale multiplies a base size by a fixed ratio repeatedly to generate a consistent set of font sizes — the same idea as musical intervals. Using one ratio across a whole design keeps every heading and text size feeling related instead of arbitrary.

Which ratio should I pick?

Smaller ratios (1.067–1.2) produce tighter, closer-together sizes that suit information-dense UI like dashboards. Larger ratios (1.333–1.618) create bigger jumps between sizes, which reads as more dramatic and works well for editorial or marketing pages with a handful of large headings.

Why does the output use CSS custom properties instead of raw font-size rules?

Custom properties like --font-lg let you reference the same scale value from many rules (font-size, but also line-height math, spacing, or JS) without repeating the number, and they can be redefined per breakpoint or theme without touching every rule that uses them.

Should font sizes be set in rem or px?

The scale is generated in rem (relative to a 16px root) alongside its px equivalent for reference. rem respects a user's browser font-size setting, which is important for people who increase their default size for readability — px values ignore that preference entirely.

Does this tool save my scale settings anywhere?

No — the scale is computed live in your browser from the base size, ratio, and step counts you choose. Nothing is uploaded or persisted; reloading the page resets it to the defaults.

TYPOGRAPHY SCALE GENERATOR

Build a modular font-size scale from a base size and ratio, then copy the CSS variables.

Base size: 16px

Scale ratio

Steps down: 2

Steps up: 5

4xl3.052rem / 48.83pxThe quick brown fox

3xl2.441rem / 39.06pxThe quick brown fox

2xl1.953rem / 31.25pxThe quick brown fox

xl1.563rem / 25pxThe quick brown fox

lg1.25rem / 20pxThe quick brown fox

base1rem / 16pxThe quick brown fox

sm0.8rem / 12.8pxThe quick brown fox

xs0.64rem / 10.24pxThe quick brown fox

:root {
  --font-xs: 0.64rem; /* 10.24px */
  --font-sm: 0.8rem; /* 12.8px */
  --font-base: 1rem; /* 16px */
  --font-lg: 1.25rem; /* 20px */
  --font-xl: 1.563rem; /* 25px */
  --font-2xl: 1.953rem; /* 31.25px */
  --font-3xl: 2.441rem; /* 39.06px */
  --font-4xl: 3.052rem; /* 48.83px */
}

How to build a type scale

1
Set your base font size (typically 16px, matching the browser default).
2
Pick a scale ratio — smaller ratios like 1.125 suit dense UI, larger ones like 1.5 suit editorial headings.
3
Adjust how many steps go below and above the base size.
4
Check the live preview of every step at its real rendered size.
5
Copy the CSS custom properties and use var(--font-xl) anywhere you need that step.

Questions

What is a modular type scale?: A modular scale multiplies a base size by a fixed ratio repeatedly to generate a consistent set of font sizes — the same idea as musical intervals. Using one ratio across a whole design keeps every heading and text size feeling related instead of arbitrary.
Which ratio should I pick?: Smaller ratios (1.067–1.2) produce tighter, closer-together sizes that suit information-dense UI like dashboards. Larger ratios (1.333–1.618) create bigger jumps between sizes, which reads as more dramatic and works well for editorial or marketing pages with a handful of large headings.
Why does the output use CSS custom properties instead of raw font-size rules?: Custom properties like --font-lg let you reference the same scale value from many rules (font-size, but also line-height math, spacing, or JS) without repeating the number, and they can be redefined per breakpoint or theme without touching every rule that uses them.
Should font sizes be set in rem or px?: The scale is generated in rem (relative to a 16px root) alongside its px equivalent for reference. rem respects a user's browser font-size setting, which is important for people who increase their default size for readability — px values ignore that preference entirely.
Does this tool save my scale settings anywhere?: No — the scale is computed live in your browser from the base size, ratio, and step counts you choose. Nothing is uploaded or persisted; reloading the page resets it to the defaults.