How does clamp() work for font sizes?

clamp(min, preferred, max) uses the preferred value but never goes below the minimum or above the maximum. For fluid type, the preferred value is a rem amount plus a vw amount, so the size rises in a straight line from the smallest viewport to the largest and then stops.

Which type scale ratio should I use?

For most websites, a minor third (1.2) on mobile and a major third (1.25) or perfect fourth (1.333) on desktop. Product interfaces with dense screens suit 1.125 to 1.2. Editorial and marketing pages with big hero headlines can go to 1.333 to 1.5 on desktop.

Is fluid typography accessible?

Yes, if you combine rem with vw, which this generator does, so text still responds to browser zoom and the user's font-size setting. As a rule of thumb, keep each size's maximum at no more than 2.5 times its minimum so 200% zoom still enlarges it enough for WCAG 1.4.4. The tool flags any step that breaks this.

How do I use the scale in Tailwind CSS v4?

Copy the Tailwind v4 tab and paste the @theme block into your main CSS file after @import "tailwindcss". Each --text-* variable becomes a utility, so --text-xl is used as text-xl. Tailwind's default line heights for the named sizes still apply unless you override them.

What viewport range should I choose?

Start the range at your smallest supported phone width (320 to 375px) and end it where your content column stops growing, usually 1200 to 1440px. Beyond the maximum, sizes stay fixed, which is what you want on very wide monitors.

Fluid type scale generator

Generate a modular type scale that grows smoothly from phone to desktop. Set two viewports, two base sizes and two ratios, preview every step at any width, and copy clean clamp() values for CSS or Tailwind v4.

Free, no signup
Runs in your browser
Nothing is uploaded

Viewport range & base size

The scale is exact at both ends and fluid in between.

Smallest

Largest

Widthpx

Basepx

Ratio

Scale

How many sizes, and what to call them.

Steps above base

Steps below base

Token names

Root size

1rem =px

Preview text

Typeface

Sample text

Live preview

Drag the viewport to see every step resolve, exactly as clamp() would.

Simulated viewport820px

360px1280px

4xl50.4px
Design that ships
3xl41.0px
Design that ships
2xl33.4px
Design that ships
xl27.1px
Design that ships
lg22.1px
Design that ships
base18.0px
Design that ships
sm14.7px
Design that ships
xs12.0px
Design that ships

Code

8 sizes · 360px → 1280px

CSS

/* Fluid type scale: 16px → 20px base, ratio 1.2 → 1.25, viewport 360px → 1280px */
:root {
  --text-4xl: clamp(2.4883rem, 1.9693rem + 2.3067vw, 3.8147rem);
  --text-3xl: clamp(2.0736rem, 1.6908rem + 1.7011vw, 3.0518rem);
  --text-2xl: clamp(1.728rem, 1.4488rem + 1.2407vw, 2.4414rem);
  --text-xl: clamp(1.44rem, 1.2392rem + 0.8924vw, 1.9531rem);
  --text-lg: clamp(1.2rem, 1.0582rem + 0.6304vw, 1.5625rem);
  --text-base: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);
  --text-sm: clamp(0.8333rem, 0.7681rem + 0.2899vw, 1rem);
  --text-xs: clamp(0.6944rem, 0.6531rem + 0.1836vw, 0.8rem);
}

How it works

How to use the fluid type scale generator

Set the range

Enter your smallest and largest viewport widths and the body text size you want at each end, such as 16px on a phone and 20px on a laptop.

Pick two ratios

Choose a tighter ratio for small screens and a bolder one for large screens. Headings grow faster than body text, so the hierarchy opens up as space allows.

Preview every step

Drag the simulated viewport and watch each size resolve exactly as the browser's clamp() would, in your choice of typeface and sample text.

Copy the tokens

Copy CSS custom properties, a Tailwind v4 @theme block or the full table. The settings live in the URL, so Share sends the exact scale.

What a fluid type scale is

A modular scale is a set of font sizes where each step is the one below it multiplied by a fixed ratio. With a 16px base and a ratio of 1.25 you get 16, 20, 25, 31.25 and so on. The ratio is what makes headings feel related to body text instead of picked at random.

A fluid scale goes one step further: you define the scale twice, once for a small screen and once for a large one, and every size slides between the two as the viewport changes. No breakpoints, no sudden jumps, and you can use a gentler ratio on phones, where a 60px headline would eat the whole screen, and a bolder one on desktop. This approach was popularised by Utopia, and it is how I set type on every site I build.

The formula behind each clamp()

Each step is calculated at both ends, then joined with a straight line:

Size at each end: base × ratio^step
Slope: (maxPx − minPx) ÷ (maxViewport − minViewport)
Intercept: minPx − slope × minViewport
Output: clamp(minRem, interceptRem + slope × 100vw, maxRem)

Worked example: body text of 16px at 360px wide, rising to 20px at 1280px. The slope is 4 ÷ 920 = 0.004348, which is 0.4348vw. The intercept is 16 − 0.004348 × 360 = 14.435px, or 0.9022rem. So the base step is clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem). At 820px wide that resolves to exactly 18px, halfway between the two ends.

Choosing your ratios

Ratio	Name	Good for
1.067–1.125	Minor / major second	Dense dashboards and apps, or the mobile end of a product UI
1.2	Minor third	The safest mobile ratio for most websites
1.25	Major third	Balanced desktop scale for SaaS and service sites
1.333	Perfect fourth	Marketing pages with confident headlines
1.414–1.618	Augmented fourth to golden	Editorial layouts and posters; too dramatic for most UIs

A useful pattern is a smaller ratio at the small end and a larger one at the large end, such as 1.2 to 1.25. Body text barely changes while the biggest headings grow a lot, which keeps hierarchy readable on a phone and dramatic on a laptop. If you are choosing typefaces as well, try the pairings in the font pairing previewer and bring the sizes back here.

Accessibility: why rem plus vw matters

Sizing text in pure vwbreaks browser zoom: zooming changes the viewport in CSS pixels, so the text can stay the same size. Mixing a rem term into the preferred value keeps text tied to the user's font-size setting and zoom. There is still a ceiling. If a size's maximum is more than about 2.5 times its minimum, zooming to 200% may not double it, which risks failing WCAG 1.4.4 (resize text). The generator marks any step that crosses that line. Read more about the basics in my typography glossary entry.

Common mistakes

Too many steps. Most sites need five or six sizes: small print, body, a lead size and three heading levels. Extra steps end up unused or used inconsistently.
A tiny viewport range. Squeezing the whole change into a few hundred pixels makes the vw slope steep, so text jumps noticeably while a window is resized.
Forgetting line height. Big headings need tighter leading (around 1.1) than body text (1.5 or more). Use unitless line heights so they scale with the font.
Hard-coding sizes elsewhere. Put the scale in design tokens and use only those, or the system drifts within a month.

Want the whole responsive system handled, from type and spacing to breakpoints? That is part of every website design project I take on. The screen sizes reference is handy for picking your viewport range.

Common questions