Today I learned

Clamp CSS function

Today I learned about the clamp css function. A friend, with whom I'm currently working on a project, the aerosol alliance website ↗ told me about it and suggested using it for the project.

I've never heard about it or used it before and was happy to learn something new. The main idea behind using the CSS clamp function is that you don't have to define font-sizes for every project anymore. By using clamp you are handed and easier way to define fluid typography.

The clamp function takes three values: a minimum value, a preferred value and a maximum value. The preferred value is the value that will be used if the viewport size is in between the minimum and maximum value. If the viewport size is smaller than the minimum value, the minimum value will be used. If the viewport size is larger than the maximum value, the maximum value will be used.

The following example shows how to use the clamp function:

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

There is even a generator ↗ available, which we've used recently on the project mentioned above.

I'm really happy to have learned about this function and I'm looking forward to using it in the future.

Read more:

Greetings Marco

Go back to other today-i-learned posts