Free · CSS + Tailwind · Zero deps

A typography scale that ships as code.

Pick a base size, pick a ratio, copy the snippet. Live h1-to-caption preview, with CSS custom properties and Tailwind v4 @theme output ready to paste.

h1Ship something you're proud of61.04px · 3.81rem
h2Ship something you're proud of48.83px · 3.05rem
h3Ship something you're proud of39.06px · 2.44rem
h4Headlines and subheads31.25px · 1.95rem
h5Headlines and subheads25px · 1.56rem
h6Headlines and subheads20px · 1.25rem
bodyBody paragraph text. Most of what users read sits at this size — readable by default.16px · 1rem
captionCaption and metadata12.8px · 0.8rem

Base size

px — body

Ratio

Custom

1.250

CSS custom properties

:root {
  --text-h1: 3.81rem; /* 61.04px */
  --text-h2: 3.05rem; /* 48.83px */
  --text-h3: 2.44rem; /* 39.06px */
  --text-h4: 1.95rem; /* 31.25px */
  --text-h5: 1.56rem; /* 25px */
  --text-h6: 1.25rem; /* 20px */
  --text-body: 1rem; /* 16px */
  --text-caption: 0.8rem; /* 12.8px */
}

Tailwind v4 @theme

@theme {
  --text-h1: 3.81rem;
  --text-h2: 3.05rem;
  --text-h3: 2.44rem;
  --text-h4: 1.95rem;
  --text-h5: 1.56rem;
  --text-h6: 1.25rem;
  --text-body: 1rem;
  --text-caption: 0.8rem;
}
— How it works

Four steps

  1. 1

    Pick your base size

    16px is the web default. Anything 14–20 is reasonable.

  2. 2

    Pick a ratio

    Eight classic scales from 1.067 to the golden ratio, or free-dial via the slider.

  3. 3

    Preview the ladder

    Every rung from caption to h1 rendered live at the computed size.

  4. 4

    Copy the snippet

    CSS custom properties or a Tailwind v4 @theme block — paste straight into your codebase.

— Questions

Frequently asked

Which ratio should I pick?+

Perfect fourth (1.333) is the classic web default — generous hierarchy without being editorial. Major third (1.25) is tighter and works well for data-dense SaaS. Golden ratio (1.618) is dramatic and suits landing pages that lean on display type.

Why rems and not just pixels?+

Rems scale with the user's browser font-size setting — critical for accessibility. If someone bumps their browser font to 20px, your whole scale bumps proportionally. Pixel-only scales ignore that preference.

What is a Tailwind v4 @theme block?+

Tailwind v4 defines design tokens as CSS custom properties inside an @theme block. Utilities like text-h1 consume them automatically. The snippet this tool outputs drops into your global stylesheet and unlocks text-<name> utilities across your project.

Can I tweak the per-rung line-height?+

The preview ships with sensible defaults (1.55 for body, tightening to 1.15 at h1). Override them in your CSS after pasting — they're not baked into the snippet for exactly that reason.

— More free tools

Keep building

Shade generator

Generate a full 50→950 Tailwind palette from any base color, along the Tailwind lightness curve.

Contrast checker

Pick foreground and background from the Tailwind palette and check WCAG AA / AAA.

— Shipping to the App Store?

Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.

Explore lokal