Two anchors. One fluid rule.
Give your type a little room to grow.
Choose a font size at two viewport widths. Get a bounded CSS clamp() declaration, inspect its exact arithmetic, and check a width between or beyond the anchors.
Set your anchors
Your bounded font-size rule
Increasing size
At your entered sample width
Browser viewport preview
Make space for readable type.
This line uses the generated rule at the actual browser viewport. Changing the sample width above does not resize this preview. Its font metrics, zoom and browser rounding can affect what you see.
Exact model and width checks
- Slope, px per viewport px
- Intercept, CSS px
- vw coefficient
| Viewport px | Font px | Exact font px | Check |
|---|
Increasing, decreasing or constant
Widths stay in narrow-to-wide order. Font sizes can rise, fall or stay equal. Bounds are ordered automatically without silently swapping your anchors.
Know which number is rounded
The anchor model uses exact fractions. The copyable rule rounds non-terminating coefficients to at most 12 decimal places. The guide separates that small export approximation from browser behaviour.
Check your real layout
Viewport units are not container units. A sensible numeric rule can still produce poor wrapping or text-resize behaviour. Test your content, zoom, breakpoints and target browsers.
A rule built from your decisions
Start with two real design choices: for example, a small-screen label at 14 px and a roomy layout at 22 px. Clampcraft connects those anchors with a straight line and limits it to the chosen sizes. Below the narrow width and above the wide width, the result stays at a bound. For a decreasing relationship, those outer values reverse naturally.
With the initial 320/1280 px widths, the exact sample at 800 px is 18 px. That sample is arithmetic; the preview line uses your browser's actual width. These can be different at the same moment.
Copy the declaration into your own stylesheet for the intended selector. This tool neither edits your website nor measures your font. Use the download to keep the exact coefficients and assumptions with your design notes. Read the worked examples and testing checklist before relying on a viewport-based rule.