Advertisement:
Read Later
In this tutorial, I will show you how to enable fluid typography in CSS in one line code without the use of media queries but with the help of this new function - clamp.
Syntax(1):
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
The clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value.
The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.
The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.
The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.
📄 clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX))
-------------- CSS --------------
font-size: clamp(1.5rem, 2.5vw, 4rem);
-------------- HTML --------------
<p style="color:#002699;font-weight:bold;font-size: clamp(1.5rem, 2.5vw, 4rem);">The font-size of this text varies depending on the base font of the page, and the size of the viewport.</p>
Result:
The font-size of this text varies depending on the base font of the page, and the size of the viewport.
(1) https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()