Responsive Font Sizes with CSS Clamp

Using the CSS clamp function, you can create responsive font sizes that adapt to the viewport size. The clamp function takes three values: the minimum value, the preferred value, and the maximum value.

What is the CSS clamp function?

The CSS clamp function provides a convenient way to set responsive values. For example, to set a responsive font size that scales between a minimum and maximum value based on the viewport width:

font-size: clamp(1rem, 2vw + 1rem, 2.5rem);

Usage Examples

Basic Example

font-size: clamp(1rem, 2vw + 1rem, 2.5rem);

Real-World Example

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

Browser Support

The clamp function is supported by most modern browsers:

• Google Chrome: 79+
• Mozilla Firefox: 75+
• Safari: 13.1+
• Microsoft Edge: 79+

Conclusion

Using the CSS clamp function, you can create dynamic, responsive designs with minimal effort. Experiment with different values to see how they affect your design!