
Today I learned about the **clamp css function**. A friend with whom I'm
currently working on a project,
[the aerosol alliance website](https://aerosolalliance.com) 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:

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

There is even a [generator](https://clamp.font-size.app/) 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:

- [MDN Web Docs: clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)


Today I learned about the clamp CSS function which enables fluid typography based on the viewport size without the need for media queries

Today I learned

Clamp CSS function