This content originally appeared on Level Up Coding - Medium and was authored by Bill Chen
Introduction
The idea of Fluid Typography has been around for quite some time. It is about scaling the font-size up or down depending on the screen size. In the past we used media queries to set breakpoints and adjust font-size for each different device. While this approach still works, it’s quite time consuming and hard to maintain. Now with the release of the new clamp property, we can achieve the same result with just one line of CSS without setting complex media queries.
The Clamp Property
The clamp takes in three arguments in the following syntax:
font-size: clamp(min value, prefer value, max value);
min value: The minimum font-size
prefer value: The prefer font-size. Usually set in relative units. (i.e. rem, em, vw, etc…)
max value: The maximum font-size
As the screen size changes, browsers will try to apply the prefered font-size value, but if the preferred value has passed the min/max threshold, browsers will apply min/max font-size instead.
Fluid Typography using the Clamp Property was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Bill Chen
Bill Chen | Sciencx (2021-10-11T14:12:40+00:00) Fluid Typography using the Clamp Property. Retrieved from https://www.scien.cx/2021/10/11/fluid-typography-using-the-clamp-property/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.