Skip to content
M2TOOLKIT

Popular tools

Menu

Type Scale Generator

Create a harmonious set of font sizes for your design system.

  • Free
  • No sign-up
  • Nothing is sent or stored
px
Output unit
5xl · 61pxThe quick brown fox
4xl · 49pxThe quick brown fox
3xl · 39pxThe quick brown fox
2xl · 31pxThe quick brown fox
xl · 25pxThe quick brown fox
lg · 20pxThe quick brown fox
base · 16pxThe quick brown fox
sm · 13pxThe quick brown fox
xs · 10pxThe quick brown fox

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved.

How to use the Type Scale Generator

  1. Set a base font size and pick a ratio.
  2. Choose how many steps above the base.
  3. Preview the scale and copy the CSS variables.

What does this tool do?

A modular scale multiplies a base size by the same ratio at every step, so headings and body text relate consistently. Small ratios (1.125–1.2) suit dense interfaces; larger ones (1.333–1.618) suit editorial layouts.

Sizes are exported as CSS custom properties in rem, so they respect users' browser font settings.

Why use it?

  • Eight classic ratios.
  • Live preview.
  • CSS variables in rem or px.

Privacy

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the type scale generator.