Skip to content
Typography Master

Type Scale Calculator & Generator

Build a harmonious type scale using mathematical ratios. Enter a base size and choose a scale ratio to generate a complete set of font sizes with ready-to-use CSS custom properties.

Type Scale Calculator
SteprempxPreview
xs0.5639Ag
sm0.7512Ag
base116Ag
lg1.33321.3Ag
xl1.77728.4Ag
2xl2.36937.9Ag
3xl3.15750.5Ag
4xl4.20967.3Ag
5xl5.6189.8Ag
6xl7.478119.7Ag
: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;
  --text-5xl: 5.61rem;
  --text-6xl: 7.478rem;
}

What this type scale does

This type scale calculator generates a modular font-size hierarchy from a base size and mathematical ratio. See every step from caption to display, copy CSS custom properties, and build consistent typography across your product.

How to use it

  1. Enter your base font size — typically 16px or 1rem for web body text.
  2. Choose a scale ratio such as Major Third (1.25) or Perfect Fourth (1.333).
  3. Review the generated sizes and adjust the number of steps in your scale.
  4. Copy the CSS output and paste into your design tokens or global stylesheet.
  5. Read the Type Scale Systems guide to understand when each ratio works best.

For deeper context, read the Type Scale Systems chapter in the Typography Master guide.

Frequently asked questions

What is a type scale?
A type scale is a set of font sizes derived from a base size multiplied by a consistent ratio. It creates visual harmony between headings, body text, and captions without arbitrary pixel values.
What is the best type scale ratio for web design?
Major Third (1.25) works well for UI and dashboards. Perfect Fourth (1.333) suits editorial content. Golden Ratio (1.618) creates dramatic display hierarchies for marketing pages.
What base font size should I use?
Use 16px (1rem) minimum for body text on the web. Many editorial sites use 17–18px for improved readability on desktop without hurting mobile legibility.

Related resources