elefcode

Type Scale Generator

Pick a base size and ratio for a harmonious set of font sizes — fixed or fluid with clamp() — and export CSS variables, Tailwind, SCSS or design tokens.

Large screens
Fluid
Steps & output
Preview
5 · 4xl
54.9pxThe quick brown fox jumps over the lazy dog
4 · 3xl
44.0pxThe quick brown fox jumps over the lazy dog
3 · 2xl
35.2pxThe quick brown fox jumps over the lazy dog
2 · xl
28.1pxThe quick brown fox jumps over the lazy dog
1 · lg
22.5pxThe quick brown fox jumps over the lazy dog
0 · base
18.0pxThe quick brown fox jumps over the lazy dog
-1 · sm
14.4pxThe quick brown fox jumps over the lazy dog
-2 · xs
11.5pxThe quick brown fox jumps over the lazy dog
/* Fluid type scale: 16px @ 360px (×1.2) → 18px @ 1280px (×1.25) */
:root {
  --step-5: clamp(2.4883rem, 2.1186rem + 1.6433vw, 3.4332rem);
  --step-4: clamp(2.0736rem, 1.8103rem + 1.1704vw, 2.7466rem);
  --step-3: clamp(1.728rem, 1.5444rem + 0.8161vw, 2.1973rem);
  --step-2: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem);
  --step-1: clamp(1.2rem, 1.1193rem + 0.3587vw, 1.4063rem);
  --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --step--1: clamp(0.8333rem, 0.8072rem + 0.1159vw, 0.9rem);
  --step--2: clamp(0.6944rem, 0.6844rem + 0.0444vw, 0.72rem);
}

Use with font-size: var(--step-0) for body text, --step-3 for headings and so on.

Advertisement

Guide

About the Type Scale Generator

A type scale is a set of font sizes where each step is the previous one multiplied by a fixed ratio. Using only those sizes gives headings, body text and captions a consistent rhythm instead of a collection of arbitrary pixel values.

In fluid mode the scale also adapts to the screen: a gentler ratio on phones, a bolder one on desktops, with every size growing smoothly in between thanks to CSS clamp().

Choosing a ratio

Small ratios (1.125–1.2) keep sizes close together and suit dense interfaces and dashboards. Larger ratios (1.333–1.618) create dramatic headings for marketing pages and editorial layouts. Fluid mode lets you use a small ratio on phones, where big headings do not fit, and a larger one on wide screens.

How the clamp() values work

Each step is clamp(min, preferred, max). The preferred value is a straight line — a rem amount plus a vw amount — that hits the small size at the small viewport and the large size at the large one. Using rem in the formula keeps text zoomable, which matters for accessibility.

How to use it

  1. 1Set the base size and ratio for large screens.
  2. 2Turn on fluid mode and set the small-screen values.
  3. 3Drag the viewport slider to check every size.
  4. 4Copy the CSS variables or Tailwind theme into your project.

Frequently asked questions

What base font size should I use?

16–18px is typical for body text on screens. Larger bases (18–20px) read better for long articles; 14–16px suits dense app interfaces.

Is fluid typography accessible?

Yes, when the formula mixes rem and vw, as these values do. Text still scales when users zoom or set a larger default font size. Avoid vw-only font sizes.

How do I use the scale with Tailwind?

Paste the @theme block into your main CSS file (Tailwind v4). It replaces text-xs through text-9xl with your values, centred on text-base.

Why is the output in rem?

rem follows the user’s browser font-size setting, so people who need bigger text get it. The generator converts using the root size you set, usually 16px.

Where is the plain px ↔ rem clamp() calculator?

For a single fluid value, use the Fluid clamp() tab in the CSS Unit Converter.

Related tools

CSS Unit ConverterTailwind Shade GeneratorColor Palette GeneratorCSS Button Generator