Home Tools Product designType scale generator

Type scale generator with fluid clamp()

Choose a base size and a ratio — from a subtle minor second to the golden ratio — for the smallest and the largest screen. The generator calculates every step, writes a CSS clamp() that grows smoothly between the two viewports, previews the scale at any width, flags sizes that can break browser zoom, and exports CSS custom properties, Tailwind config, SCSS or design tokens.

● Free, no sign-upUpdated: September 16, 2026

Fluid: scale between two viewports

Min viewport

Max viewport

Base size at min

Base size at max

Ratio at min viewport

Ratio at max viewport

Steps below base

Steps above base

Step names

Variable prefixOptional, e.g. fs → --fs-step-0

1rem equals

Export format

—

Preview width

Font size for every step at the minimum and maximum viewport, with the CSS value
Step	Min, px	Max, px	CSS value

Formula. size = base · ratio^step at each viewport; slope = (max − min) / (vw_max − vw_min); font-size: clamp(min, (min − slope · vw_min) / 16 rem + slope · 100 vw, max).

Everything is calculated in your browser — nothing you enter is sent anywhere.

How to use it

Set the viewportsThe min viewport is the narrowest screen you design for (360px is a common phone width), the max is where the layout stops growing. Uncheck "Fluid" for a single static scale.
Choose base size and ratioBody text is usually 16–18px. Smaller ratios suit dense interfaces; larger ones give dramatic headings. A smaller ratio on phones and a larger one on desktop keeps headings from overflowing.
Check the preview and tableDrag the width slider to see every step at any viewport. The table lists the size at both ends and the clamp() value; zoom warnings appear above the preview.
ExportPick CSS variables, Tailwind v3 or v4, SCSS or design tokens, set a prefix and step names, and copy the code.

What a modular type scale is

A modular scale is a set of font sizes in which each size is the previous one multiplied by the same ratio. Instead of picking 14, 18, 22 and 31 by eye, you choose a base and a ratio, and every heading, caption and label gets a size that relates to the others. The idea comes from music, where intervals between notes are frequency ratios, and was popularized for the web by Tim Brown's article "More Meaningful Typography" (A List Apart, 2011).

size(step) = base × ratio ^ step base 16px, ratio 1.25 (major third): step −1 = 12.8px step 0 = 16px step 1 = 20px step 2 = 25px step 3 = 31.25px step 4 = 39.06px

Negative steps give captions and small print; positive steps give headings. Common ratios and where they fit:

1.067 minor second, 1.125 major second — very tight; dashboards, data-heavy apps, small screens.
1.2 minor third, 1.25 major third — the most common choice for product interfaces and documentation.
1.333 perfect fourth, 1.414 augmented fourth — clear hierarchy for marketing pages and blogs.
1.5 perfect fifth, 1.6 minor sixth, 1.618 golden ratio — dramatic; use few steps, or headings become huge by step 4.

Round sizes are not required. Browsers render fractional pixel sizes, and consistency between steps matters more than whole numbers.

Fluid typography with CSS clamp()

A single scale rarely fits both a 360px phone and a 1440px desktop: headings that look right on desktop overflow on mobile. The old answer was a set of media queries that jump between sizes. Fluid type instead grows each size linearly with the viewport width between two points and holds it fixed outside them, which CSS expresses in one declaration:

slope = (size_max − size_min) / (viewport_max − viewport_min) intercept = size_min − slope × viewport_min font-size: clamp(size_min, intercept + slope × 100vw, size_max) step 0: 16px at 320px → 18px at 1240px slope = 2 / 920 = 0.002174 → 0.2174vw intercept = 16 − 0.002174 × 320 = 15.304px = 0.9565rem font-size: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem)

This generator lets you set both the base size and the ratio separately for each end, the approach used by Utopia (utopia.fyi). A smaller ratio on phones and a larger one on desktop keeps body text nearly constant while headings gain presence on large screens. All values are written in rem, so the scale follows the user's default font size.

Fluid type and accessibility

WCAG success criterion 1.4.4 requires that text can be resized to 200 % without loss of content. Zooming in the browser enlarges rem values but not vw values, so a size that depends heavily on the viewport may not double when the user zooms. Two rules keep fluid type safe:

Always mix rem into the preferred value — never write a pure 5vw. The generator always outputs rem + vw.
Keep the maximum within 2.5× the minimum. As Maxwell Barvian showed (Smashing Magazine, 2023), when the largest size of a clamp() is no more than 2.5 times the smallest, text can always reach 200 % zoom. Steps that break this rule are flagged above the preview.

How to choose settings for a product interface

Start from body text. 16px is the browser default and a good minimum for reading; long-form content often uses 17–18px on desktop. Interface labels and table cells can use step −1.
Limit the number of steps. Most products need 2 steps below the base and 4–5 above it. More sizes make hierarchy harder to read, not easier.
Tighten line height as size grows. About 1.5 for body text and 1.1–1.2 for large headings; the Tailwind export includes a suggested line height per step.
Use smaller ratios on small screens. A 1.2 ratio on phones and 1.25–1.333 on desktop is a safe pair for product UI.
Short UI texts need readable sizes too. Tooltips, onboarding hints and checklist items are often set in 12–13px to fit a small bubble. Keep them at step −1 or larger and shorten the text instead — see the tooltip reading time calculator.
Check contrast at the smallest size. Thin weights and small sizes need more contrast; test the pairs in the color contrast checker.

Sources

Brown T. More Meaningful Typography. A List Apart, 2011 — modular scales for the web.
Bringhurst R. The Elements of Typographic Style. Hartley & Marks — the classic typographic scale and musical intervals.
Utopia (utopia.fyi), J. Gilyead and T. Hill — fluid type scales with separate ratios per viewport.
Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — the 2.5× rule for 200 % zoom.
W3C. WCAG 2.2, success criterion 1.4.4 Resize Text.
W3C. CSS Values and Units Module Level 4 — clamp(), rem and vw.

FAQ

What is the best ratio for a type scale?

There is no single best one. For product interfaces and documentation 1.2 (minor third) or 1.25 (major third) are the most common; marketing pages often use 1.333 or 1.414. With 1.5 and above, keep the number of steps small, because sizes grow very fast.

How do I calculate a fluid font size with clamp()?

Find the slope: (max size − min size) / (max viewport − min viewport). The intercept is min size − slope × min viewport. Then write clamp(min size, intercept in rem + slope × 100 vw, max size). For 16px at 320px to 18px at 1240px that gives clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem).

Is fluid typography accessible?

It can be, if the preferred value mixes rem and vw and the maximum size is no more than 2.5 times the minimum. Then browser zoom can still enlarge text to 200 %, as WCAG 1.4.4 requires. Pure vw font sizes do not respond to zoom and should be avoided.

Should I use px or rem for font sizes?

Use rem. It follows the user’s default font size setting, while px ignores it. This generator shows sizes in px for readability but writes every CSS value in rem, assuming 1rem = 16px unless you change it.

How many font sizes does a design system need?

Usually 6–8: two below body text for captions and labels, the body size, and 3–5 heading sizes. More steps make hierarchy harder to perceive and are rarely used consistently.

How do I add the scale to Tailwind CSS?

For Tailwind v3, paste the export into theme.extend.fontSize in tailwind.config.js and use classes like text-step-2 or text-xl. For Tailwind v4, paste the @theme block into your CSS; each --text-* variable becomes a text-* utility.