./prontouso.com

DESIGN UTILITIES

Typographic Scale Calculator

Pick a base size and a ratio to generate a full scale of font sizes, shown in pixels and rem.

Tool statusRuns in your browser
Preview

Inputs

Each step multiplies (or divides) the base size by the chosen ratio.

Results

Steppxrem
-210.240.64Ag
-112.80.8Ag
0161Ag
1201.25Ag
2251.563Ag
331.251.953Ag
439.062.441Ag
548.833.052Ag

How it works

  1. Enter your input

    Fill in the values, paste your text, or upload the file this tool works with.

  2. See results instantly

    Most tools update live as you type; a few use a single button. Either way, the result appears right on this page.

  3. Use your results

    Copy, download, or share what the tool produces — you're always in control of the output.

Privacy and processing — Runs locally in your browser. This tool does not upload your input.

What is Typographic Scale Calculator?

Pick a base size and a ratio to generate a full scale of font sizes, in both pixels and rem.

UNDERSTAND THE TOOL

How to build a typographic scale

How it's calculated

Each step multiplies (for steps up) or divides (for steps down) the base size by the ratio once per step — the same geometric progression used by modular type scales in design tools.

Choosing a ratio

  • Smaller ratios (1.067-1.2) suit dense interfaces with many text sizes.
  • Larger ratios (1.333-1.618) suit headline-heavy, editorial layouts.

Worked example

A 16px base with a 1.25 (Major Third) ratio produces 20px, 25px, 31.25px, and so on going up, and 12.8px, 10.24px going down.

Scale formula

Step size
base_px * ratio^step
rem value
px / root_px

Base 16, ratio 1.25, step 2

Step 2 is 25 px, or 1.563 rem with a 16 px root.

Calculation notes

All calculation runs in your browser; nothing you enter is sent anywhere.

Frequently Asked Questions

What root size should I use for rem?

Use your page's actual root font size — 16px is the browser default and the most common choice.

Can I use a custom ratio?

The ratio is chosen from a fixed list of well-known named ratios, from Minor Second to Golden Ratio, rather than freeform entry.

Do I have to use every step the scale generates?

No — most designs only use a handful of the generated sizes (for body text, a few heading levels, and captions), not every single step.

Why must the ratio be greater than 1?

A modular scale needs each step above the base to grow. Ratios of 1 or less would flatten or invert the scale.

Related Tools