Skip to content
PIXELVERSE

Type Scale Calculator

Choose a base size and a ratio to get a harmonious set of font sizes, previewed with your own text, and copy them as CSS variables or a Tailwind theme.

Scale

px
  • 5xl
    61.0px · 3.8147rem    Design is how it works
  • 4xl
    48.8px · 3.0518rem    Design is how it works
  • 3xl
    39.1px · 2.4414rem    Design is how it works
  • 2xl
    31.3px · 1.9531rem    Design is how it works
  • xl
    25.0px · 1.5625rem    Design is how it works
  • lg
    20.0px · 1.25rem    Design is how it works
  • base
    16.0px · 1rem    Design is how it works
  • sm
    12.8px · 0.8rem    Design is how it works
  • xs
    10.2px · 0.64rem    Design is how it works
:root {
  --text-5xl: 3.8147rem; /* 61.04px */
  --text-4xl: 3.0518rem; /* 48.83px */
  --text-3xl: 2.4414rem; /* 39.06px */
  --text-2xl: 1.9531rem; /* 31.25px */
  --text-xl: 1.5625rem; /* 25.00px */
  --text-lg: 1.25rem; /* 20.00px */
  --text-base: 1rem; /* 16.00px */
  --text-sm: 0.8rem; /* 12.80px */
  --text-xs: 0.64rem; /* 10.24px */
}

How to use the type scale calculator

  1. Set the base size, usually your body text (16px is the browser default).
  2. Choose a ratio. Small ratios suit dense interfaces; large ratios suit editorial pages.
  3. Set how many steps you need above and below the base.
  4. Copy the sizes as CSS variables or a Tailwind v4 @theme block.

What a modular scale is

Each size is the previous one multiplied by the same ratio: with a 16px base and 1.25, the steps are 16, 20, 25, 31.25, 39.06 and so on. Because every size relates to the others in the same way, headings and body text look like a family rather than a collection.

Choosing a ratio

  • 1.125–1.2: apps and dashboards where many levels sit close together.
  • 1.25–1.333: most websites and documentation.
  • 1.5–1.618: editorial and marketing pages with big headlines.

To make the larger sizes shrink on phones, turn any of them into a fluid value with the clamp() generator.

Questions

Why use rem instead of px?

rem scales with the reader's browser font size setting, which respects people who enlarge text. 1rem is 16px by default.

Which ratio is best?

There is no single best one. 1.25 (major third) is a safe default; use smaller ratios for dense interfaces.