Skip to content
littlekit.app
All tools

Typography scale

Preview a modular type scale with your own text, ratio and font style.

0116px

Good design feels effortless.

0220px

Good design feels effortless.

0325px

Good design feels effortless.

0431.25px

Good design feels effortless.

0539.063px

Good design feels effortless.

0648.828px

Good design feels effortless.

Number of steps
Generated CSS
:root {
  --text-1: 16px;
  --text-2: 20px;
  --text-3: 25px;
  --text-4: 31.25px;
  --text-5: 39.063px;
  --text-6: 48.828px;
}
Processed on your device

How it works & useful details

How to use this tool

Choose a ratio and base size, then try your own text in the live specimen. Export reusable CSS size variables.

Supported values and limitations

Each step is base × ratio to the step power, rounded to three decimal places, with a maximum generated step of 200px. Uses installed system font stacks with no external font requests. The output contains sizes; choose your project’s actual font family separately.