ZeroServer.tools

Typography Scale Generator

Generate a harmonious type scale from a base size and ratio.

Base Size (px)

Scale Ratio

Unit

4xl4.209rem / 67.34px

3xl3.157rem / 50.52px

2xl2.369rem / 37.90px

xl1.777rem / 28.43px

lg1.333rem / 21.33px

base1rem / 16.00px

sm0.75rem / 12.00px

xs0.563rem / 9.00px

:root {
  --text-xs: 0.563rem;
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-lg: 1.333rem;
  --text-xl: 1.777rem;
  --text-2xl: 2.369rem;
  --text-3xl: 3.157rem;
  --text-4xl: 4.209rem;
}

What is a Type Scale?

A typographic scale is a set of font sizes that follow a consistent mathematical ratio. Instead of picking arbitrary sizes, each step is the previous multiplied by the ratio — creating visual harmony. The Perfect Fourth (1.333) and Golden Ratio (1.618) are popular choices. Set the base to your body text size (usually 16px) and use the generated values as CSS custom properties or Tailwind config for consistent, scalable typography.

Private & free — this tool runs entirely in your browser.