typography scale

How to use the typography scale

1. Pick a base font size in pixels or rem — most websites use 16px as the base.
2. Choose a scale ratio: minor third (1.200) for conservative hierarchy, perfect fourth (1.333) for balanced, golden ratio (1.618) for dramatic.
3. The preview column updates live with h1-h6, body, caption, and small sizes at your chosen ratio.
4. Toggle between px, rem, and em units in the output panel.
5. Copy the generated CSS custom properties and paste them into your stylesheet, or export a Tailwind config snippet.

When to use it

A modular typography scale enforces visual consistency across every heading and body element without you having to guess sizes. Use it when starting a new design system, refactoring inconsistent type, or scaling a component library. If you only need 2-3 sizes on a landing page, picking them manually is fine — a scale pays off once you have six or more text roles. Alternative: type-scale.com covers the same workflow but lacks the Tailwind-ready export.

Example

:root {
  --font-size-xs: 0.750rem;
  --font-size-sm: 0.889rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.266rem;
  --font-size-2xl: 1.424rem;
  --font-size-3xl: 1.602rem;
}

Major third scale (1.250), 16px base. Drop-in replacement for the default Tailwind `text-*` utilities.

Frequently asked questions

What's the best ratio for a blog?

Minor third (1.200) or major third (1.250) keep headings close enough in size to read naturally in long-form copy without feeling cramped.

How do I combine this with Tailwind's default scale?

Export the scale as Tailwind config under theme.fontSize. Tailwind's default 1.125-1.250 scale is a major third — many designers override it to perfect fourth for marketing sites.

Does the scale apply to line-height?

No — line-height and font-size are independent. A common pairing is a 1.5 line-height for body copy and 1.2 for headings regardless of the size scale chosen.

Can I use different scales for mobile and desktop?

Yes. Define two sets of custom properties and swap them inside a media query. Mobile often benefits from a tighter ratio (minor third) to keep long words from breaking.

Why is my h1 too large?

Because ratios compound. A perfect fourth (1.333) applied six steps from 16px gives 71px — intentional for hero sections, too big for article headings. Either cap at h3-level or use two scales.

Related tools

• Free CSS Flexbox Playground
• Free CSS Grid Generator
• Free CSS Animation Generator
• Free Font Generator