Skip to content
Calculator Tools
CSS & Design Calculators

Type Scale Calculator

Build a modular type scale from a base size and ratio, in px and rem.

Enter values

Results update as you type.

Result

Scale ratio

1.25 ×

A single ratio applied consistently is what makes a type system feel deliberate rather than arbitrary.

Base size
16 px
Largest size
48.83 px
Smallest size
10.24 px
Largest in rem
3.0518rem
Range
10.2px to 48.8px

Type scale

RolePixelsREMStep
h148.83px3.0518rem5
h239.06px2.4414rem4
h331.25px1.9531rem3
h425px1.5625rem2
h520px1.25rem1
Base16px1rem0
Small12.8px0.8rem-1
Caption10.24px0.64rem-2

About the Type Scale Calculator

Build a modular type scale from a base size and ratio, in px and rem.

Also known as: modular scale calculator, font size scale, typography scale, heading size calculator.

How to use this calculator

  1. Enter base font size, scale ratio, steps above the base, root font size and the other fields.
  2. The result updates instantly as you type — press Calculate (or Enter) at any time.
  3. Review the breakdown shown under the main result.
  4. Use Copy result or Share to save the answer or send a link with your inputs.

Formula

size = base × ratio^step

Worked example

Using the values pre-filled in the calculator above:

  • Base font size = 16 px
  • Scale ratio: Major third (1.25)
  • Steps above the base = 5
  • Root font size = 16 px

the calculator returns:

  • Scale ratio: 1.25 ×
  • Base size: 16 px
  • Largest size: 48.83 px
  • Smallest size: 10.24 px