Typography Scale Generator

Generate a modular type scale from a base size and ratio. Preview all steps and copy as CSS or Tailwind.

6
2

Preview

5xl
5.610rem / 90px
The quick brown fox
4xl
4.209rem / 67px
The quick brown fox
3xl
3.157rem / 51px
The quick brown fox
2xl
2.369rem / 38px
The quick brown fox
xl
1.777rem / 28px
The quick brown fox
lg
1.333rem / 21px
The quick brown fox
basebase
1.000rem / 16px
The quick brown fox
sm
0.750rem / 12px
The quick brown fox
xs
0.563rem / 9px
The quick brown fox
:root {
  --text-xs: 0.563rem;    /* 9.0px */
  --text-sm: 0.750rem;    /* 12.0px */
  --text-base: 1.000rem;    /* 16.0px */
  --text-lg: 1.333rem;    /* 21.3px */
  --text-xl: 1.777rem;    /* 28.4px */
  --text-2xl: 2.369rem;    /* 37.9px */
  --text-3xl: 3.157rem;    /* 50.5px */
  --text-4xl: 4.209rem;    /* 67.3px */
  --text-5xl: 5.610rem;    /* 89.8px */
}

All processing happens in your browser. Nothing is sent to a server.

FAQ

Is Typography Scale Generator free to use?

Yes, Typography Scale Generator is completely free to use on UtilityCove.

Does Typography Scale Generator upload my data?

No. Typography Scale Generator runs in your browser, so your input stays on your device.

Can I use Typography Scale Generator on mobile?

Yes. Typography Scale Generator works on modern mobile and desktop browsers.

Related Tools

CSS Gradient Generator

Create linear CSS gradients with a live preview.

CSS Box Shadow Generator

Build and preview CSS box-shadow values with one-click copy.

CSS Glassmorphism Generator

Generate frosted-glass CSS with backdrop blur and copy-ready styles.

QR Code Generator

Generate custom QR codes for any text or URL.

WiFi QR Code Generator

Generate a scannable QR code to share WiFi credentials instantly.

Letter Profile Picture

Generate avatar images from initials with custom colors.