What the Fluid Typography Calculator does
This fluid typography calculator builds a whole type scale that changes smoothly with the screen: you set a base size and a scale ratio for a small screen and for a large one, and it generates a clamp() font size for every step as CSS custom properties such as --step-0 and --step-3, with a live specimen and a zoom check for each step.
Using a smaller ratio on phones and a larger one on desktops keeps headings from overwhelming a narrow screen while giving wide layouts real contrast between levels. The calculation runs entirely in your browser.
How to use it
- Set the small-screen viewport width, base font size and ratio - for example 360px, 16px and 1.2 (minor third).
- Set the large-screen viewport width, base size and ratio - for example 1280px, 18px and 1.25 (major third).
- Choose how many steps to generate below the base (for captions and small print) and above it (for headings).
- Drag the preview slider to see every step at any viewport width, and check the zoom column: a step marked at risk grows too much between the two screens.
- Copy the custom properties into your stylesheet and use them, for example
h1 { font-size: var(--step-5); }.
Reading the results
Each step n is base x ratio to the power n, calculated separately at both ends, then joined by a straight line between the two viewport widths. Step 0 is the body text size.
Because the two ratios differ, larger steps grow faster than smaller ones: body text might change by 2px across the range while the top heading changes by 15px.
A step fails the zoom check when its large size is more than 2.5 times its small size, because browser zoom shrinks the vw part of the size and some window widths can then never reach the 200% that WCAG 1.4.4 asks for.
Worked example: the article scale, step 2
Small screen: 16 x 1.2 squared = 16 x 1.44 = 23.04px at 360px. Large screen: 18 x 1.25 squared = 18 x 1.5625 = 28.125px at 1280px.
Slope = (28.125 - 23.04) / (1280 - 360) = 5.085 / 920 = 0.0055272, or 0.5527vw. Intercept = 23.04 - 360 x 0.0055272 = 21.05px = 1.3156rem.
So --step-2: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem);. Its growth is 28.125 / 23.04 = 1.22 times, far below the 2.5 times limit, so it passes the zoom check. The largest step in this example, step 5, grows from 39.81px to 54.93px - also comfortably within the limit.
Formulas and scoring rules
- Step size at each end
size(n) = base x ratio ^ nComputed at the small and the large viewport with their own base and ratio.- Fluid value per step
clamp(small, intercept + slope x 100vw, large), slope = (large - small) / (maxVw - minVw), intercept = small - slope x minVwWritten in rem using the root font size; 4 decimal places.- Zoom rule of thumb
large size <= 2.5 x small sizeThe calculator also tests each step numerically for windows 320-3,840 px and zoom up to 500%.
Choosing the two ratios
Named ratios come from musical intervals and are simply convenient numbers. Minor second (1.067) and major second (1.125) give quiet, dense scales for apps and dashboards. Minor third (1.2) and major third (1.25) suit articles. Perfect fourth (1.333) and above make dramatic marketing headings, which usually need the smaller ratio on phones to fit.
There is no correct pair. Look at the specimen at 360px with your longest real heading: if it wraps to four lines, the small-screen ratio is too big.
Limitations: what the result does not prove
- Sizes are rounded to four decimal places of a rem; the rendered difference is far below a pixel.
- Line height, letter spacing and font choice matter as much as size. This tool sets sizes only.
- vw is measured against the viewport, so a heading in a narrow sidebar scales with the whole window, not the sidebar. Container query units can do the latter but need extra setup.
- The zoom check models page zoom in modern browsers. It does not replace testing with real zoom and larger default font sizes.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Values and Units Module Level 4 (clamp, min, max) - checked 19 Sep 2026
- WCAG 2.2 - Resize text (1.4.4) - checked 19 Sep 2026
- W3C - CSS Values and Units Level 4: clamp()
- MDN - Using CSS custom properties
Frequently asked questions
What is a fluid type scale?
It is a set of font sizes related by a ratio, where each size moves smoothly between a small-screen and a large-screen value instead of jumping at breakpoints. Each step is a clamp() expression, so there is one declaration per size and no media queries.
Why use a different ratio on small and large screens?
A ratio that gives pleasing contrast on a wide desktop makes top-level headings enormous on a phone. A smaller ratio on narrow screens keeps headings readable and avoids awkward line breaks, while the larger ratio restores hierarchy when there is room.
How do I use the generated custom properties?
Paste the :root block into your stylesheet, then refer to the steps wherever you set sizes, such as body { font-size: var(--step-0); } and h1 { font-size: var(--step-5); }. Changing the scale later only means replacing that one block.
Why is a step marked at risk for zoom?
Its large-screen size is more than about 2.5 times its small-screen size. Because browser zoom reduces the viewport in CSS pixels, the vw part stops helping, and in some window sizes the text cannot be enlarged to 200%. Reduce the large ratio or raise the small base.
Which viewport widths should I choose?
Use the narrowest width you design for, commonly 320 to 375px, and the width at which your content column stops growing, often 1200 to 1440px. Outside that range the sizes stay fixed, which is usually what you want.
Is fluid typography better than breakpoints?
It removes the sudden jumps between breakpoints and needs far less CSS, but it is not automatically better. Some designs deliberately change hierarchy at specific widths. Fluid sizes and a few breakpoint adjustments can be combined.
Last reviewed by the A2Z.Tools team against the sources listed above.
