Open menu

Fluid Type Scale Generator

Create a modular type scale that grows smoothly from phones to large screens. Set the base size and scale ratio for the smallest and largest viewports, choose how many steps you need above and below the base, and get one clamp() value per step. Preview the scale at any viewport width, check that text can still be zoomed to 200%, and export CSS custom properties, SCSS, a Tailwind theme or JSON.

Preset gallery

Preview at 800px viewport width

step 5 · 48.5pxFluid type scales smoothly
step 4 · 39.5pxFluid type scales smoothly
step 3 · 32.17pxFluid type scales smoothly
step 2 · 26.22pxFluid type scales smoothly
step 1 · 21.38pxFluid type scales smoothly
step 0 · 17.43pxFluid type scales smoothly
step -1 · 14.22pxFluid type scales smoothly
step -2 · 11.61pxFluid type scales smoothly

Accessibility checks

  • Pass Every step grows at most 1.46× between viewports, so text can still reach 200% zoom (WCAG 1.4.4).
  • Pass The base step starts at 16px, comfortable for body text.
  • Pass clamp() uses rem for the limits and a rem + vw mix in the middle, so browser text size settings still apply.

Export code

/* Fluid type scale: 16px → 19px base, ×1.2 → ×1.25, between 360px and 1280px viewports */
:root {
  --step-n2: clamp(0.6944rem, 0.6688rem + 0.114vw, 0.76rem);
  --step-n1: clamp(0.8333rem, 0.7877rem + 0.2029vw, 0.95rem);
  --step-0: clamp(1rem, 0.9266rem + 0.3261vw, 1.1875rem);
  --step-1: clamp(1.2rem, 1.0887rem + 0.4946vw, 1.4844rem);
  --step-2: clamp(1.44rem, 1.2774rem + 0.7226vw, 1.8555rem);
  --step-3: clamp(1.728rem, 1.4966rem + 1.0284vw, 2.3193rem);
  --step-4: clamp(2.0736rem, 1.7506rem + 1.4358vw, 2.8992rem);
  --step-5: clamp(2.4883rem, 2.0439rem + 1.975vw, 3.624rem);
}

body { font-size: var(--step-0); }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
small { font-size: var(--step-n1); }
Favourites on this device (0)

No favourites yet.

Sizes & ratios
Viewports
Quick preview widths

How to use the fluid type scale generator

  1. Pick a preset: balanced, gentle, dramatic, editorial, app UI, dashboard, marketing and classic ratios.
  2. Set the base size for small and large screens, typically 16px and 18–20px.
  3. Choose the scale ratios for each end. A small difference keeps the system calm.
  4. Set the viewports where growth starts and stops, and how many steps you need.
  5. Preview at any width with the slider or the quick buttons.
  6. Export CSS variables (with example element rules), SCSS, Tailwind or JSON.

How the values are calculated

For each step, the minimum size is base × ratio^step at the small viewport and the maximum uses the large-screen base and ratio. The middle value is a straight line between them:

--step-0: clamp(1rem, 0.9266rem + 0.3261vw, 1.1875rem);

That grows from 16px at a 360px viewport to 19px at 1280px.

Worked examples

Example 1: a content site

Load Editorial and map step 0 to body text, step 1 to lead paragraphs and steps 3–5 to h3–h1. Headings shrink gracefully on phones without separate media queries.

Example 2: a product interface

Load App UI: a base of 15–16px with a tight 1.125–1.2 ratio. Interfaces need many similar sizes close together; large jumps waste space.

Example 3: a bold landing page

Load Landing with six steps above the base for big hero headlines. Check the zoom result: if a step grows more than 2.5×, lower the large-screen ratio.

Common mistakes

  • Pure vw font sizes. font-size: 4vw ignores user settings and breaks zoom; always mix in rem as clamp() does here.
  • Too many steps. Six to eight sizes cover most designs.
  • Unreadably small minimums. Keep body text at 16px or more on phones.

Testing the scale

Set a real page with the scale: headings, body text, captions and buttons. Check it at the smallest and largest viewport widths, then zoom to 200% and confirm headings still fit without awkward breaks. Finally, compare the scale with your line lengths: body text reads best at roughly 45 to 75 characters per line.

Frequently asked questions

How does clamp() make type fluid?

clamp(min, preferred, max) keeps a value between a minimum and a maximum. The preferred value mixes rem and vw, so the size grows with the viewport between your two breakpoints and stops growing outside them. No media queries are needed.

What is a modular scale?

Each size is the previous one multiplied by a ratio, such as 1.25 (a major third). Using a smaller ratio on phones and a larger one on desktops gives compact headings on small screens and more drama on large ones.

Can fluid type break zooming?

It can. WCAG 1.4.4 requires text to resize to 200%. Because part of a fluid size depends on the viewport width, extreme scales may not grow enough when people zoom. Keeping each step's maximum within 2.5× its minimum avoids the problem, and the checker enforces that.

Why are the values in rem?

rem follows the visitor's browser text size setting, so people who need larger text get it. The vw part only adds growth on top.

How many sizes does a type scale need?

Usually five to seven: small text, body, and three to five heading levels. More steps rarely look different enough to be worth it.

Sources