Typography Scale Online

Generate a modular type scale from a base size, ratio and step counts, with a live type preview. Free typography scale online, with no installation or account.

Tool capabilities

Input: Options
Output: CSS · Options

How to use Typography Scale

Generate a modular type scale from a base size, ratio and step counts, with a live type preview.

Change the colors, text or numeric controls above.
Compare the preview as you adjust the controls.
Copy the output or download it to your device.

Typography Scale · Example

Input

{
  "base": 16,
  "ratio": 1.25,
  "below": 2,
  "above": 5,
  "text": "LocalKit"
}

Output

:root {
  --text-minus-2: 10.24px;
  --text-minus-1: 12.8px;
  --text-0: 16px;
  --text-1: 20px;
  --text-2: 25px;
  --text-3: 31.25px;
  --text-4: 39.0625px;
  --text-5: 48.82813px;
}

Generate a modular type scale from a base size, ratio and step counts, with a live type preview.

Usage notes

Inputs and results are processed on this device. Tool content is not sent to a processing server.

Preview text is capped at 72 px. Exported scale values retain their calculated sizes.

Typography Scale