Today I learned

Clamp CSS function

Edit this Post Opens in new tab

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

I'd never heard about or used it before, and was happy to learn something new. The main idea behind using the CSS clamp function is that you no longer have to define font sizes for every project.

Instead, using clamp gives you an 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 values.

The minimum value will be used, if the viewport size is smaller than the minimum value. Same logic is applied for the the maximum value.

The following example shows how to use the clamp function:

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

There is even a generator Opens in new tab 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:

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco