Fluid Type Calculator
Calculate a CSS clamp() font size from two viewport widths and font sizes.
How to use
- Enter both viewport widths and their corresponding font sizes.
- Keep the wide viewport larger than the narrow one and the maximum size at least as large as the minimum.
- Paste the font-size declaration into the target CSS rule, then check heading wrapping on narrow screens and with browser zoom.
When to use this tool
Choose readable font sizes at a narrow and a wide viewport, then calculate CSS that interpolates continuously between them. This suits headings that should scale without several breakpoint-specific size rules.
Inputs and settings
Result
Example input and actual output
- Narrow viewport (px): 360
- Wide viewport (px): 1200
- Minimum font size (px): 16
- Maximum font size (px): 32
font-size: clamp(16px, calc(9.142857px + 1.904762vw), 32px);
The size stays at 16px below 360px and 32px above 1200px; at 780px it is approximately 24px. The preview is inside this page, but vw is based on the browser viewport rather than the preview box.
Scope and limitations
Interpolates linearly between the endpoints and clamps outside them. This is a pixel-based calculation; test browser zoom in your application.
Next step and alternatives
Button CSS Starter — Prepare a button style to accompany the heading.
Frequently asked questions
Why must the viewport widths differ?
The slope requires a nonzero difference between viewport widths. Equal font sizes are allowed and produce a fixed-size clamp.
Does this calculate rem-based sizes?
This version outputs px and vw, not a rem-based formula tied to the user’s default font size. Test the implementation with browser zoom.
Is vw based on the preview box width?
vw uses the browser viewport width, not the width of the preview box inside this page.
Related tools
Share this tool
Share only the tool name and public URL. Your input and results are not included.