Skip to content
Convertto

Modular Type Scale Generator

Build a modular typographic scale and copy it as CSS custom properties.

A modular scale multiplies each size by a fixed ratio, so every step relates to the last in the same way and the whole set reads as one system rather than eight arbitrary numbers. 1.25 (a major third) is a safe default for interfaces; 1.618 gives dramatic headings but leaves a large gap just above body size. Output in rem rather than px so the scale respects a reader who has changed their browser font size — a px scale silently overrides that preference.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Which ratio should I pick?

For dense interfaces, 1.2 to 1.25 — the steps stay close enough that you can use several without the page feeling shouty. For editorial layouts with few levels, 1.414 or 1.618 give headings real presence. The larger the ratio, the fewer steps you can actually use.

Why rem instead of px?

rem is relative to the root font size, which is what a reader changes when they increase text size in their browser. A px scale ignores that setting entirely, so the page stays small for someone who has explicitly asked otherwise.

Should line height scale too?

Inversely. Large text needs proportionally tighter leading — around 1.1 for display sizes against 1.5 for body. Applying one line-height to the whole scale leaves headings looking loose and body copy cramped.

How to use the type scale generator

  1. 1Set the base size.
  2. 2Choose the ratio.
  3. 3Set the steps above the base.
  4. 4Choose the unit.
  5. 5The result appears immediately — copy or download it.

Embed this tool

Put the working type scale generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.Gradient Text GeneratorFill text with a gradient, a metallic sheen or a chrome effect using background-clip.CSS Text Shadow GeneratorDesign text shadows, outlines and glow effects with a live preview.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.

Last updated

More css generators