Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I use the CSS clamp() function for responsive font sizes?
Asked on Feb 17, 2026
Answer
The CSS `clamp()` function is a powerful tool for setting responsive font sizes that adapt to different screen sizes while maintaining a minimum and maximum size. It takes three values: a minimum size, a preferred size, and a maximum size.
<!-- BEGIN COPY / PASTE -->
.responsive-text {
font-size: clamp(1rem, 2.5vw, 2rem);
}
<!-- END COPY / PASTE -->Additional Comment:
- The `clamp()` function ensures the font size never goes below the minimum (1rem) or above the maximum (2rem).
- The preferred size (2.5vw) is calculated based on the viewport width, making the font size responsive.
- This approach is useful for maintaining readability across different devices without media queries.
Recommended Links:
