About the Type Scale Calculator
This type scale calculator builds a modular scale: a set of font sizes where each step is the previous one multiplied by a fixed ratio. Enter your body text size, pick a ratio such as the major third (1.25) or perfect fourth (1.333), and choose how many steps you need above and below the base. You get every size in pixels and rem, a suggested heading mapping and CSS custom properties.
It is for designers setting up a design system, front-end developers who want consistent headings without guessing, and anyone choosing sizes for a blog, app or slide template. A modular scale makes sizes feel related, because the same proportion repeats from small print to the largest headline.
Smaller ratios (1.067–1.2) give subtle steps that suit dense interfaces and mobile; larger ratios (1.333–1.618) create dramatic contrast for marketing pages and editorial layouts. Sizes are not rounded so you can decide how to round them in your own system.
With the default inputs, the largest size (top step) is 48.83 px. Change any value above to recalculate instantly.
How to use the type scale calculator
- 1Enter your body text size as the base, usually 16px.
- 2Pick a ratio — 1.2–1.25 for apps and dense UIs, 1.333 or more for editorial pages.
- 3Choose how many steps you need above and below the base.
- 4Review the sizes and the suggested heading mapping in the table.
- 5Copy the CSS custom properties into your stylesheet or design tokens.
Formula and method
A modular scale multiplies the base size by the ratio once for every step up and divides by it for every step down, so step n equals base × ratioⁿ (n can be negative). Because every size shares the same proportion, adjacent sizes always contrast by the same amount, which is what makes a scale feel harmonious.
The classic ratio names come from musical intervals (a perfect fourth is 4:3 ≈ 1.333, a perfect fifth 3:2 = 1.5). Rem values divide the pixel size by the root font size, 16px by default, so the scale respects the visitor’s browser text-size setting. The heading mapping assigns the top step to h1 and works down one step per heading level.
- base
- Base (body) font size in px
- ratio
- Scale multiplier between adjacent steps
- n
- Step number (positive above base, negative below)
Worked examples
16px base, major third (1.25), 5 steps up
Each step multiplies by 1.25: 20, 25, 31.25, 39.06 and finally 16 × 1.25⁵ = 48.83px (3.052rem) for h1. Two steps down gives 16 ÷ 1.25² = 10.24px.
18px base, perfect fourth (1.333), 4 steps up, 1 down
With a larger ratio the scale climbs quickly: 23.99, 31.98, 42.63 and 18 × 1.333⁴ = 56.83px at the top. One step down is 18 ÷ 1.333 ≈ 13.5px for small text.
Custom 1.15 ratio for a dense dashboard
A gentle custom ratio of 1.15 over six steps tops out at 16 × 1.15⁶ ≈ 37.01px, keeping headings compact for data-heavy screens. With no steps below, the smallest size is the 16px base.
Frequently asked questions
What is a modular type scale?+
It is a set of font sizes generated by repeatedly multiplying a base size by the same ratio. The shared proportion makes headings, body and small text look like they belong to one system.
Which type scale ratio should I use?+
Use 1.125–1.25 for apps, dashboards and mobile where space is tight; 1.333 (perfect fourth) is a popular all-rounder; 1.5–1.618 suits bold marketing and editorial pages with few heading levels.
Should I use px or rem for font sizes?+
Rem is generally better for accessibility because it scales with the user’s browser font-size preference. The calculator shows both so you can design in px and ship in rem.
Do I have to use every step?+
No. Scales usually generate more sizes than you need. Pick the steps that fit your headings and UI, and keep them consistent across the product.
How do I make a type scale responsive?+
A common approach is to use a smaller ratio on mobile and a larger one on desktop, or to interpolate each step with CSS clamp() between two scales so sizes grow smoothly with the viewport.