CreateaFreeWebsite

 with HTML and CSS

Clamp Function

The clamp function was added to CSS in 2020 and has become one of the most useful tools for reducing the number of break points and media queries in web development.

If you haven't already done it you should be abandoning the use of pixels in your design and begun using ems, rems and percentages of viewport width and height.

If you want to convert pixels to ems or rems simply divide by 16. Examples below:

 

Using the clamp function we can define 3 sizes for our text elements at the top of the style sheet and eliminate the need to resize them at set break points with media queries.

The code:
clamp(minimum , preferred , maximum)

We set a minimum size, a preferred size and a maximum size. The preferred value must fall somewhere between the minimum and maximum to work properly. The browser will use the preferred value when that condition is met.

IMPORTANT!! Spacing is important in your preferred algorithm.

p {
font-size : clamp(1.125rem , 1.125rem + .25dvw , 1.375rem);
}

Translates to: clamp(18px , 18px + .0025 X viewport width , 22px)

dvw stands for dynamic viewport width. use it in place of vw. It's just more reliable.

For example, translating, 1dvw says take 1% (.01) of the viewport width .

Our minimum is set to 18 pixels and maximum to 22 pixels.

Using the formula 18px + .0025 X viewport width we calculate the font size at different viewing widths.

We start at mobile viewing width and work our way upward in viewport width.

 

Beginners Note

I've stated in earlier tutorials that beginners should start out using pixels for font-size, margins and padding.

I strongly urge that as soon as you understand sizing elements, that you learn the basics of using ems, rems and viewport percentages.

Spend some time with your calculator and create some quick reference guides on paper for sizing fonts or if you're already handy save them in text files.

Do the same for margins, padding and line-height.

I recommend making your calculations at 1920 max and 360 min pixels and then creating algorithms that fall in range.

Create a special list for calculating line-height which should be between 1.2 and 1.5 times the size of your text. We made one for you! Screenshot it and keep it for reference.

How to Calculate Line Height

I prefer the 1.2 spacing so I'll use it to demonstrate.

Let's use 1.25rem or 20px.

1...Multiply 20 times 1.2

2...20 X 1.2 = 24

3...Divide 24 by 16

4...24/16 = 1.5rem

1.5rem is the line-height for 1.25rem using 1.2 spacing.

Now Check the Chart

Testing Your Algorithm

You can use Web Dev Tools to test out your algorithm and see if it stays in range Find Out How!

It might sound like it's all GREEK at this point, but I stress the need for learning to use the clamp function if you're serious about your web development endeavors. Some experienced designers are still using breakpoints and media queries.
START OUT AHEAD!!

I've put examples of all this in our working example pages and in our flexbox templates.

 

Top