Create account
Interfaces and CSSRuns in your browser

Typography Scale Generator

Configure a modular scale for an interface and copy CSS variables without font analysis or external libraries.

  • Base px + ratio
  • px and rem output
  • CSS variables
Online tool

Try the tool

Add your data, choose the settings, and get the result.

Input

Result

--font-size-minus-2: 10.24px;
--font-size-minus-1: 12.8px;
--font-size-0: 16px;
--font-size-1: 20px;
--font-size-2: 25px;
--font-size-3: 31.25px;
--font-size-4: 39.063px;
--font-size-5: 48.828px;
  • -2: 10.24px / 0.64rem
  • -1: 12.8px / 0.8rem
  • 0: 16px / 1rem
  • 1: 20px / 1.25rem
  • 2: 25px / 1.5625rem
  • 3: 31.25px / 1.9531rem
  • 4: 39.063px / 2.4414rem
  • 5: 48.828px / 3.0518rem

Your data stays here

Text and selected files are processed in the current browser and are not sent to a server to produce the result.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Enter the base text size in px.

  2. 2

    Set the ratio and step range.

  3. 3

    Copy the CSS custom properties.

02

What the tool can do

  • Steps from smaller text values to larger heading values.
  • Calculates px and rem relative to the selected base.
  • Generates custom properties for a token layer.
03

Common use cases

  • Preparing font-size tokens for a UI kit.
  • Comparing a ratio before redesigning a typography scale.
  • Quickly generating px/rem values for documentation.
04

How it works inside

Each step is calculated as base multiplied by ratio to the step power.

The range is bounded so output remains readable and predictable.

05

Questions and answers

How do I choose a ratio?

Start with 1.2–1.333 for interfaces and review the result in the actual layout.

Why no line-height?

Line-height depends on the font, line length, and component; this tool generates font-size tokens only.