Typography Scale

v1.0.2

Generate a harmonious modular type scale from a base size and ratio — outputs CSS custom properties for h1–xs.

Generates a harmonious modular type scale from a base font size and a ratio (minor third, major third, perfect fourth, golden ratio), outputting CSS custom properties for h1 through small text.

How to use

→Set the base size (typically 1rem / 16px) and select or enter a scale ratio.
→Preview the result as styled headings to check visual harmony.
→Copy the --size-N CSS custom properties block into your design tokens file.

Base size16px

Scale ratio

Unit

×1.25 — Major Third (1.250)

Scale preview

h1Aa48.83px

h2Aa39.06px

h3Aa31.25px

h4Aa25px

h5Aa20px

h6Aa16px

smAa12.8px

xsAa10.24px

CSS custom properties

:root {
  --text-h1: 48.83px;
  --text-h2: 39.06px;
  --text-h3: 31.25px;
  --text-h4: 25px;
  --text-h5: 20px;
  --text-h6: 16px;
  --text-sm: 12.8px;
  --text-xs: 10.24px;
}