Recommended Free Tools
Use clamp() to make values such as font size scale smoothly between a minimum and maximum, instead of stepping through several media-query overrides. Keep media queries for conditional styles and layout changes: clamp() adjusts a value, but it does not replace a condition or rearrange a design.
What clamp() does
The CSS function clamp(minimum, preferred, maximum) keeps a value within a range. The browser uses the preferred expression while its computed value falls between the minimum and maximum; below that range, the minimum applies, and above it, the maximum applies. MDN describes clamp() as a way to clamp a value between defined minimum and maximum bounds.
As an Amazon Associate I earn from qualifying purchases.
For example:
font-size: clamp(1rem, 2.5vw, 2rem);Here, 2.5vw is the preferred size: it responds to the viewport width. The rem values set the lower and upper limits relative to the root font size. At a narrow width, the minimum may control; through a middle range, the preferred value may control; at a wide width, the maximum may take over.
When clamp() can replace breakpoint rules
Use clamp() when a value should change continuously as the available space changes, but must stay within sensible bounds. Fluid typography is a common example: one declaration can replace multiple breakpoint rules that assign successively larger font sizes. The same principle can suit other numeric CSS values when gradual scaling is the intended behavior.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose the lower and upper values from the design you need to support, then select a preferred expression that scales between them. There is no universally correct vw coefficient or viewport range; those depend on the chosen bounds and design.
When media queries still belong
A media query applies styles when a specified condition matches. It can respond to viewport or device features, media type, orientation, or user preferences. Use one when styles should switch conditionally—for example, print styling or a reduced-motion preference—or when a layout needs to rearrange at a content-driven width. MDN’s media query guide covers these conditional uses.
| Need | Use | What it does |
|---|---|---|
| Scale a value smoothly within limits | clamp() |
Calculates a bounded value from minimum, preferred, and maximum expressions. |
| Apply styles only when a condition matches | Media query | Tests a condition and applies a block of styles when it matches. |
| Change the structure of a layout | Media query or another suitable layout rule | Switches styles so elements can rearrange, rather than merely changing one value. |
How to choose and check fluid font sizes
- Set the endpoints. Decide the smallest and largest font sizes that fit the design. Keep font-size bounds in relative units such as
rem. - Pick a preferred expression. Start with a viewport-responsive value such as
2.5vw, then adjust it to suit the chosen endpoints. Do not assume one coefficient will fit every design. - Check the full range. Inspect text at the minimum, middle, and maximum viewport widths. A smooth formula can still produce awkward line lengths or wrapping at intermediate sizes.
- Test zoom. MDN advises that the relative maximum be at least twice the relative minimum to help text scale to 200% when zoomed. Treat that as a font-sizing consideration, not a guarantee about every design or browser.
For compatibility information, check the current MDN clamp() reference; browser support can change over time.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Best Value
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
