Ask any question about CSS here... and get an instant response.

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.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I use clamp() to make font sizes scale smoothly with viewport width?

Asked on Sep 18, 2025

Answer

The Q&A Network