Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use clamp() when a CSS value should grow or shrink smoothly between chosen limits; keep media queries for conditional styling and layout changes. For example, font-size: clamp(1rem, 2.5vw, 2rem); lets the preferred size respond to viewport width while the rem values set its lower and upper bounds.
What does clamp() do?
The CSS clamp() function takes three comma-separated values: a minimum, a preferred value, and a maximum. The preferred value applies while its computed result falls between the bounds. If it falls below the minimum, the minimum is used; if it exceeds the maximum, the maximum is used. MDN describes it as a function that “clamps a value within a range of values between a defined minimum bound and a maximum allowed value.” MDN’s clamp() reference documents the function and its syntax.
In clamp(1rem, 2.5vw, 2rem), 1rem is the lower bound, 2.5vw is the preferred value, and 2rem is the upper bound. Because vw responds to viewport width, the preferred value can change continuously as the viewport changes. At narrower widths the minimum may take over; across a middle range the preferred value may apply; at wider widths the maximum may take over.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How can clamp() replace breakpoint rules?
When a value needs to scale gradually, clamp() can replace a series of media-query declarations that otherwise step that value up or down at separate viewport widths. Instead of defining several font sizes at several breakpoints, set the intended lower and upper sizes and choose a preferred expression that moves between them.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
There is no universal vw coefficient or viewport range that works for every design. The result depends on the endpoints and the desired rate of change. A value that feels right for one heading or component may not suit another, so choose the expression for the specific design rather than copying a coefficient as a rule.
How should you use clamp() for fluid typography?
Set readable bounds first
Choose the smallest and largest font sizes that make sense for the design, then use them as the first and third arguments. Keep font-size bounds in relative units such as rem, which are tied to the root font size, rather than relying on viewport units for every argument.
Choose a preferred expression
Use a viewport-responsive expression for the middle argument, such as 2.5vw. The browser uses that preferred value only while it remains within the minimum and maximum. The example font-size: clamp(1rem, 2.5vw, 2rem); is a starting point for understanding the syntax, not a universal typography prescription.
Check scaling and zoom
For font sizes, MDN advises using relative units and recommends a relative maximum at least twice the relative minimum to help text scale to 200% when zoomed. In the example, the maximum is twice the minimum. Check the text at the minimum, middle, and maximum viewport widths, and with zoom enabled, to ensure the bounds and the fluid range work for the actual content. MDN’s clamp() reference covers the function; its accessibility guidance is relevant when applying it to text.
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
When should you keep media queries?
clamp() calculates a bounded value; it does not test a condition or switch a set of styles on and off. Media queries apply styles when conditions match, including viewport or device features, media type, orientation, and user preferences. Use them when the design requires conditional styling or a structural change rather than a value that should scale smoothly. See MDN’s CSS media queries guide.
- Use
clamp()for continuous value changes: for example, a font size that grows within chosen limits as the viewport widens. - Use media queries for conditional styles: for example, print styles or styles that respond to a reduced-motion preference.
- Use media queries for structural changes: for example, rearranging a layout when its content no longer fits comfortably.
These tools solve different problems. A page can use clamp() for fluid dimensions and still use media queries where a condition or layout change calls for one.
Quick Recap
Best Value
How do you check a fluid value?
- Choose the endpoints. Decide the smallest and largest values that suit the design and content.
- Write the bounded value. Put the minimum first, the viewport-responsive preferred expression second, and the maximum third, as in
font-size: clamp(1rem, 2.5vw, 2rem);. - Inspect the range. Check the result at narrow, middle, and wide viewport widths, including where the minimum and maximum begin to control.
- Check text zoom. Confirm that text remains usable when zoomed and that the relative font-size bounds follow the scaling guidance.
- Add a media query only if needed. If the layout must change structure or a style should apply only under a condition, express that separately with a media query.
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.
