TinySandyFree Online Tools

Fluid Typography Calculator

Enter the smallest and largest font size you want and the viewport widths where each should apply, and get a single CSS clamp() value that grows smoothly in between. The rem-based preferred value keeps the text responsive to the user's browser font size, and a check warns when the range is too steep to survive 200 % zoom.

CSS & Frontend Runs in your browser

Calculate Fluid Font Sizes with clamp()

px
px
px
px
px

How to Use the Fluid Type Calculator

  1. Enter the minimum and maximum font sizes in pixels.
  2. Enter the viewport widths where the minimum and maximum should be reached.
  3. Choose rem or px output and, if needed, a different property name (for example padding or gap).
  4. Copy the CSS and check the table of sizes at common screen widths.

About This Tool

Front-end developers and designers building responsive type scales, headings and spacing without stacks of media queries.

Input: Min/max font and viewport sizes  ·  Output: CSS clamp().

Features and Limitations

Features

  • Correct slope and intercept maths, rounded to four decimals.
  • rem output plus vw keeps text zoomable.
  • Table of computed sizes from 320 px to 1920 px wide.
  • Warns when the maximum is more than 2.5 times the minimum, which can fail WCAG 1.4.4 Resize Text.

Limitations

  • clamp() is fluid between the two viewport widths only; below and above them the size is fixed at the minimum and maximum.
  • The zoom warning is a rule of thumb; test your actual pages at 200 % browser zoom.
  • The live preview uses this page's width, not a simulated device.
  • Results are computed in your browser; nothing you enter is sent to a server.

Example

18 px to 32 px between 360 px and 1280 px viewports gives font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);

Frequently Asked Questions

How is the clamp() value calculated?

The slope is (max size − min size) ÷ (max viewport − min viewport). The preferred value is the intercept (min size − slope × min viewport), converted to rem, plus slope × 100 in vw.

Why not use only vw for font sizes?

Pure vw text does not respond to browser zoom or the user's font-size setting, which fails accessibility requirements. Adding a rem part keeps text resizable.

Can I use clamp() for spacing too?

Yes. Change the property name to margin, padding or gap; the same formula works for any length.

Is clamp() supported?

Yes, in all current browsers since 2020. Older browsers that do not understand it ignore the declaration, so put a fixed font-size before it as a fallback if you need one.

Related Tools

More like this: all CSS & Frontend tools, all Developer & Web tools or the TinySandy home page.