Fluid typography generator

What fluid typography does

Older websites changed font sizes in jumps: one size for phones, a bigger one past a breakpoint. Fluid typography grows the text smoothly with the screen instead. One line of CSS does it:

font-size: clamp(1rem, 0.833rem + 0.741vw, 1.5rem);

clamp() takes three values: the smallest size, a preferred size that grows with the screen width (the vw part), and the largest size. The browser uses the preferred size but never goes below the smallest or above the largest. This tool works out the middle value for you, so the text is exactly your smallest size on a 360 px phone and your largest on a 1440 px desktop, and grows in a straight line between.

How the middle value is worked out

Take 16 px on a 360 px screen and 24 px on a 1440 px screen.

1. The slope is the growth per pixel of width: (24 − 16) ÷ (1440 − 360) = 0.00741, or 0.741 vw (1 vw is 1% of the screen width).
2. The starting point is where that line would meet a zero-width screen: 16 − 0.00741 × 360 = 13.33 px, or 0.833 rem with a 16 px root.
3. So the preferred size is 0.833rem + 0.741vw, held between 1rem and 1.5rem.

At 768 px wide, for example, that gives 13.33 + 0.00741 × 768 = 19.0 px.

Why rem, not px

Some visitors set their browser’s base font size larger to read comfortably. Sizes in rem follow that setting; sizes in px ignore it. Mixing rem with vw in the preferred value keeps both screen growth and the visitor’s setting working. That’s why the tool writes rem unless you turn on Units.

The zoom check (WCAG 1.4.4)

WCAG 2.2 success criterion 1.4.4 asks that text can be zoomed to 200%. Fluid text can break this: the vw part doesn’t grow when the visitor zooms, so a size that grows a lot with the screen may not double. A practical rule (Maxwell Barvian, Smashing Magazine, 2023): keep the largest size within 2.5× the smallest, and zoom will work at every width. The tool checks every size and suggests a fix.

A type scale, not just one size

A site needs more than one size: body text, small print, several headings. A type scale makes them all from one base size and a ratio: each step is the previous one multiplied by the ratio. Turn on Type scale and pick a ratio for phones (smaller, like 1.2) and one for desktops (bigger, like 1.25), as the Utopia method does. Headings then grow more than body text on big screens. The tool writes all 8 steps as CSS custom properties (--step-0 and so on), or as Tailwind fontSize entries.

Divya’s school website in Kallakurichi

Divya is building a website for a school in Kallakurichi. Most parents open it on phones, but the office staff use a desktop. She sets body text to 16 → 18 px and turns on Type scale with 1.2 on phones and 1.25 on desktops. Her biggest heading, step 5, runs from about 39.8 px on a phone to 54.9 px on a desktop, and it passes the zoom check. She pastes the eight custom properties into her stylesheet and uses font-size: var(--step-0) for paragraphs and var(--step-4) for the page title.

How to use this tool

1. Pick a starting set: Minimal, Standard or Expressive.
2. Set your smallest and largest screen, or tap a device chip.
3. Drag the two handles on each element: the left one is the size on the smallest screen, the right one on the largest. Open an element for exact numbers, or for its own line height and letter spacing.
4. Turn on Harmonious scaling to set Heading 1 only; Headings 2 to 6 follow it by one ratio.
5. Drag the screen width ruler to watch every size grow, then copy the CSS, custom properties, builder values (one value at a time, for Divi, Elementor and other page builders) or Tailwind config.