How can I use clamp() to make font sizes scale smoothly with viewport width?
Asked on Sep 18, 2025
Answer
The `clamp()` function in CSS allows you to set a value that scales between a defined minimum and maximum, which is particularly useful for responsive font sizes. Here's how you can use `clamp()` to make font sizes scale smoothly with the viewport width.
<!-- BEGIN COPY / PASTE -->
.responsive-text {
font-size: clamp(1rem, 2vw + 1rem, 3rem);
}
<!-- END COPY / PASTE -->Additional Comment:
- The `clamp()` function takes three arguments: a minimum value, a preferred value (often using a viewport unit), and a maximum value.
- In the example, `1rem` is the minimum font size, `2vw + 1rem` is the preferred size that scales with the viewport width, and `3rem` is the maximum size.
- This approach ensures that the font size remains within a reasonable range while adapting to different screen sizes.
- Using `clamp()` helps maintain readability across devices without media queries.
Recommended Links: