What is a CSS Clamp?

CSS clamp is a dynamic way of sizing any element without the use of media queries. Today’s focus will be on using clamps with fonts—note that they do work on anything that uses units like px, em, %, vw, etc, but typography does seem to be the most popular use. 

Clamps are relatively new—introduced in 2020—and are now supported by all modern browsers. When learning new CSS it is always a good idea to check out caniuse.com 

Note that clamps are best used on large fonts that have a large difference between sizes from desktop to mobile. It’s not recommended for use on body copy or smaller page titles.  

How it Works

Clamps are powerful because they allow you to set three values at once. They follow this structure:

font-size: clamp(min-value, preferred-value, max-value);

One very important thing you need for this to work is the preferred value needs to be a scalable amount. In most cases you’ll most likely want to use %, vh, or vw (vw is the most common from what I’ve seen). You can also use equations within a clamp without using the calc() function. 

Note that you should make your maximum less than or equal to 2.5x the size of the minimum. This helps with accessibility. With maximums above 2.5x, the font will have trouble scaling properly when a user zooms and will be more likely to fail accessibility tests. It is also recommended to make your preferred value an equation with 1rem or 1em so if someone changes the font size of their device it will scale relative to their set value and not only the screen size (e.g. 1rem + 5vw is better than just 5vw)

Accessibility Explanation

Example:

The following h1 has a class names “example-clamp.” Let’s make the target size about 60px. Don’t allow it to go below ~30px or above ~70px. 

Tip: Try 70/16 to get your em value. To figure out the preferred value, size your screen around tablet. 

Test Clamp!

This is an H3 sized in Flatsome at 1.2 rem.

This is an H3 not resized in Flatsome.

Let’s look at the difference between rem and em. Think of em as “element.” Rem means root element which is going to reference the size of the html—this is usually 16px. Em references the element itself.

If we make our h3 2rem this is going to reference the html set size, not the h3 size. This should make both our titles 2*16px = 32px.

If we use 2em instead, we now get 2 different values. The top value has a new base that isn’t 16 because of the 1.2rem set in the builder making our new base 1.2*16 = 19.4px.

2em is going to use that in the calculation instead of 16px so the final value becomes 19.4 * 2 = 38.4. The non-resized one still has a base of 16px which will keep it at 32px at 2em.

Why do we need to know this? When using clamps, there are going to be times where you want the font to stay the same no matter how you change the flatsome value (rem) and there are other times where you will want the clamp to scale with the font value set in flatsome (em). Example: an h1 I might want to adjust and scale with whatever value I set in Flatsome, but a display class I might want to be the exact same no matter what I put it on. 

Steps for setting clamps:

  1. Set your screen somewhere around a laptop or tablet size.
  2. Put in some placeholder values for the max and min (make these extra large and small so they don’t take effect yet)
  3. Play with the vw on the tablet / laptop size until it’s fitting well.
  4. Expand the screen until the text is too large. Where is the point right before it’s growing too big? Look up the pixel value and change it into Ems by dividing by 16. Set as max.
  5. Look at a mobile view and either do the same method as the max (find a point where the text gets to small and set the value above that) or directly enter some pixel values and play with them until it looks about the right size. Change the pixel value into Ems by dividing by 16

Improving the world
One Micro-Interaction At A Time

Let’s make a title similar to the one on the Build then Bless site. For this title we face a little bit of a dilemma. For SEO best practices, we want the whole title to show up as one <h1> tag. However, visually we want “Improving the World” to be large and emphasized. The H1 has a class called “micro-title” and the “Improving the World” portion has a span tag around it with the class “display-5.” Use clamps to resize the title and make it scalable for different screen sizes. 

01

First Screen.

Let’s recreate this screenshot—it doesn’t need to be exact, but focus on the overall scale (side note — I did not center mine). The white “01” text has a display class called “display-6” and the title text is an h1. Adjust the h1 size and the display size to look similar to the screenshot. Position the “01” to overlap the title.

Try this in both rem units and em units and notice how they act differently. Which situations would each word better for? 

Hint: For my solution, I used negative margin with ems as the units. Since our text size changes, ems are useful since it will scale relative to the element’s size. 


.example-clamp{
	font-size:clamp(1.875rem, 1rem + 2.2vw, 4.375rem)
}

.micro-title{
	font-size: clamp(1.875em, 1em + 1.5vw, 2.5em);
}

.display-5{
	font-size: clamp(2.5rem, 1rem + 8.5vw, 6.25rem);
}

h1{
	font-size: clamp(2.4rem, 1rem + 5vw, 3.5rem);
}

.display-6{
	font-size: clamp(8rem, 1rem + 10vw, 15rem);
	line-height: 1.1;
	margin-bottom: -0.4em !important;
	z-index: -1;
}


/* em version */

h1{
	font-size: clamp(2.4em, 1em + 5vw, 3.5em); /* no change because rem = em = 16px */
}

.display-6{
	font-size: clamp(2em, 0.25em + 10vw, 3.75em); /* does change because rem = 16px and em = 4em = 64px */
}