Font Size Scale Generator

Generate a harmonious typographic scale using modular ratios for consistent design.

Type Scale Ratio

Base Size: 16px

10px24px

Scale Preview

xs11.11pxThe quick brown fox

sm13.33pxThe quick brown fox

base16pxThe quick brown fox

md19.2pxThe quick brown fox

lg23.04pxThe quick brown fox

xl27.65pxThe quick brown fox

2xl33.18pxThe quick brown fox

3xl39.81pxThe quick brown fox

4xl47.78pxThe quick brown fox

5xl57.33pxThe quick brown fox

CSS Custom Properties

:root {
  --font-size-xs: 11.11px;
  --font-size-sm: 13.33px;
  --font-size-base: 16px;
  --font-size-md: 19.2px;
  --font-size-lg: 23.04px;
  --font-size-xl: 27.65px;
  --font-size-2xl: 33.18px;
  --font-size-3xl: 39.81px;
  --font-size-4xl: 47.78px;
  --font-size-5xl: 57.33px;
}

Tailwind Config

fontSize: {
  'xs': '11.11px',
  'sm': '13.33px',
  'base': '16px',
  'md': '19.2px',
  'lg': '23.04px',
  'xl': '27.65px',
  '2xl': '33.18px',
  '3xl': '39.81px',
  '4xl': '47.78px',
  '5xl': '57.33px',
}

About Type Scales

Each step multiplies the previous size by the chosen ratio.
Minor Third (1.2) and Major Third (1.25) are popular for body text.
Perfect Fourth (1.333) works well for headings with more contrast.
The Golden Ratio (1.618) creates dramatic size differences.

How to Use Font Size Scale Generator

1

Set a base size

Enter your base font size in pixels or rems.
2

Choose a scale

Select a modular scale ratio like 1.25, 1.333, or 1.618.
3

Preview the scale

See all heading and body sizes in the generated type scale.
4

Copy the values

Export the scale as CSS custom properties or a Tailwind config.