Typography Scale Generator

What is Typography Scale Generator?

The Typography Scale Generator is a free in-browser tool that turns a single base size and a modular ratio into a full, mathematically consistent type scale covering body text and the headings h1 through h6. A modular scale multiplies (and divides) the base size by a fixed ratio at each step, so larger headings grow in even, proportional jumps that feel deliberate rather than arbitrary. Designers and front-end developers use it to set up a design system's type tokens, keep heading sizes consistent across a site, and translate a chosen ratio into ready-to-paste CSS. Pick the ratio from the dropdown, set the base size and the unit (px or rem), then copy the scale as CSS custom properties, Sass variables, or a plain rem list.

How to use Typography Scale Generator

1. Choose a modular ratio from the dropdown, for example Minor Third (1.2), Perfect Fourth (1.333), or Golden Ratio (1.618).
2. Set the base size in the Base size field; this becomes the body text size and the anchor of the scale.
3. Use the unit segmented control to switch the output between px and rem (rem assumes a 16px root).
4. Read the live preview to see body and h1-h6 rendered at their computed sizes.
5. Switch the output format between CSS variables, Sass, and rem, then copy the generated code with the copy button.

Examples

ratio 1.333, base 16px

body 16px, h6 21.328px, h5 28.43px, h4 37.897px, h3 50.517px, h2 67.34px, h1 89.764px

ratio 1.618, base 16px, CSS variables

:root {
  --font-size-body: 16px;
  --font-size-h1: 287.072px;
}

ratio 1.2, base 16px, rem

body: 1rem; h1: 2.986rem

Frequently asked questions

What is a modular scale?

A modular scale starts from a base size and multiplies it by a fixed ratio for each larger step (and divides for smaller steps). Here, body uses the base size, h6 is base x ratio, h5 is base x ratio squared, and so on up to h1, which keeps every heading proportional to the next.

Which ratios are available?

The dropdown offers common typographic ratios including Minor Second (1.067), Major Second (1.125), Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.5), and the Golden Ratio (1.618).

What is the difference between the px and rem units?

px outputs absolute pixel sizes, while rem outputs sizes relative to the root element, assuming the common 16px default. rem scales with the user's browser font-size setting, which is often preferred for accessibility.

What do the three output formats give me?

CSS variables produce a :root block with --font-size-* custom properties, Sass produces $font-size-* variables, and rem produces a compact list you can drop into any stylesheet or reference manually.

Is any of my data sent to a server?

No. The whole scale is computed locally in your browser with simple arithmetic. No font size, ratio, or unit is ever uploaded, so the tool works offline and keeps your settings private.