Typography Scale Generator

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

Base Size: 16pxScale Ratio: 1.333Total Steps: 8Output Format: CSSOutput Size: 193 chars

Presets & Scales

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.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a type scale from a base size and a ratio.
Generating matching custom properties and a Tailwind config.
Comparing two ratios against a live preview of every level.
Replacing ad-hoc heading sizes with a consistent scale.
Producing a scale to review before adopting it.

Frequently Asked Questions

What is a modular scale?: A sequence of sizes generated by repeatedly multiplying a base by a fixed ratio. It gives every step a defined relationship to every other, which is what makes the resulting hierarchy read as deliberate rather than as a set of numbers someone liked.
Which ratio should I choose?: 1.200 or 1.250 for dense interfaces, 1.333 for general web, 1.414 or 1.500 for editorial, 1.618 for display. The larger the ratio, the fewer usable steps: at 1.618 a nine-step scale spans more than 25× the base, which is a poster rather than a page.
Why are the ratios named after musical intervals?: Because they are the same frequency ratios — a perfect fourth is 4:3, a perfect fifth 3:2, a major third 5:4. The analogy is genuine as arithmetic and metaphorical as design, but it is why the vocabulary exists and why the numbers are the ones you keep seeing.
Should the scale be in rem or px?: rem. It is relative to the root font size, so a user who raises their browser default gets the whole scale proportionally larger. A px scale ignores that setting completely, which fails WCAG's requirement that text be resizable to 200%.
Does line height scale with the ratio too?: Not proportionally — it should tighten as size grows. Body text wants around 1.5, and a large display heading around 1.1, because the same multiple that reads comfortably at 16px opens distracting gaps at 48px. Line height is a separate curve, not a constant multiplier.

Common errors and gotchas

Choosing a ratio so large that the smallest and largest sizes are unusable at either end.
Generating more levels than the design needs, which invites inconsistency.
Naming sizes by their pixel value, which makes a change a rename.
Ignoring line height, which the scale must move with or the rhythm breaks.
Applying the type ratio to spacing as well, where a different scale usually reads better.