How to use the new CSS Clamp in Kadence Blocks 3.0

Since the highly anticipated launch in February, I’ve seen questions, confusion, and even a little scorn surrounding the use of CSS Clamp in Kadence Blocks 3.0. If you weren’t involved in the beta program, then this new functionality might have come as a bit of a shock, and if you’re not familiar with CSS, perhaps an even bigger shock.

In the recent Kadence Blocks 3.0 launch live stream, Ben and the team outlined their reasons for switching font sizes to use clamp, and they were excellent reasons. However, many Kadence users commenting on the live stream, in the Facebook group, and even in my DMs, either don’t understand clamp, or don’t see it as beneficial.

As someone far smarter than me once said, “People fear what they don’t understand and hate what they can’t conquer.” But I’m here to tell you that CSS Clamp is a blessing, and once you understand how to use it I’m positive you’re going to love it.

I’ve been using clamp on my Divi child themes for quite a while with custom CSS and my customers love it, so it’s great to be able to use this valuable CSS function natively on my future Kadence child themes.

In this post I’m going to explain (minus the jargon) what CSS Clamp is, how it’s implemented in Kadence 3.0, and how to make use of and modify this awesome Kadence Blocks update for foolproof responsive fonts on your future builds. Seriously, once understand how clamp works and how to use it you’ll never go back.

So let’s get to it!

What is CSS Clamp?

Clamp is a CSS function that gives you the ability to control three sizing variables. The official variable terms are min, val, and max. For the purposes of this tutorial, I’m going to refer to them as minimum, preferred, and maximum. Clamp isn’t limited to font sizes either, but again, for the purposes of this tutorial I’ll focus on font sizes.

In essence, clamp is a maths function that calculates the width of the user’s browser, and compares that to the values we set inside our clamp functions. It then renders our font size based on the result of that calculation.

I already use vw for fonts and it works

You may be familiar with the vw (view width) and vh (view height) units. These units already allow you to size content based on the user’s device size, but used in isolation they have limited benefit as far as font size is concerned.

For example, a font size of 3vw might be perfect for H1 headings on desktop, but the same 3vw font size on mobile is going to be illegible, and that’s bad for user experience and accessibility metrics.

Don’t get me wrong, vw and vh units have their place and I use them extensively in my website builds. While some of the Kadence blocks allow vw font size units, the typography settings in the customiser don’t (at the time of writing), which means to utilise vw font sizes globally, and ones that work well across device sizes, we would need to use media queries.

With media queries we can set different vw values for any screen size we choose:

h1 {
  font-size: 3vw;
}

@media all and (max-width: 1024px) {
  h1 {
    font-size: 5vw;
  }
}

@media all and (max-width: 767px) {
  h1 {
    font-size: 10vw;
  }
}

Above we have three declarations for H1 headings. We would need to add to this for H2 – H6 headings, and maybe even include a few more breakpoints for extra large screens or awkward laptop sizes. But that’s a lot of CSS for something we can accomplish with a single declaration per heading.

Why is clamp better than vw?

One word. Boundaries.

Clamp allows us to use all the awesomeness of vw, without the pitfalls. With clamp, we can utilise vw font sizes for scaling text, but define absolute minimum and maximum font sizes, so no matter which device our site is viewed on, the text will adapt gracefully and never look ridiculous.

Is clamp safe to use on production sites?

Absolutely! CSS Clamp itself is not new. I can’t find the date it was officially added to the CSS3 specification, but it’s been around a good few years. It’s supported in all major browsers with over 90% usage coverage, which means you can implement clamp without worrying about adding fallback support.

How does clamp work?

When trying to understand clamp, think literally. Whether the enormous brains that develop the CSS specification had an actual clamp in mind when they came up with this function, I don’t know, but it’s a great way to illustrate clamp’s purpose.

With clamp we have two outer stopping points: the minimum value (min), and the maximum value (max). Between those we have wiggle room, or the preferred value (val).

The preferred value is what allows for fluid text. By fluid, I mean text that adapts to the size of the device a user is viewing on. The stopping points allow us to set minimum and maximum values that are respected by the preferred value. What do I mean by respected? Allow me to illustrate…

Here is a basic clamp function:

clamp(24px, 3vw, 60px)

24px is our minimum value, 3vw is our preferred value, and 60px is our maximum value.

Inside a CSS declaration, it might look like this:

h1 {
  font-size: clamp(24px, 3vw, 60px);
}

What we’re saying here is, ‘Make my H1 heading font size 3vw, but never let it get smaller than 24px, or larger than 60px.’
You see how the preferred value (the one in the middle) gives us wiggle room? Our H1 headings will scale based on the user’s device, but will never get so small they’re illegible, and never so large they look silly on super-sized screens, all without the use of media queries.

You’re not limited to pixels either. You can use any length unit you like: px, em, rem, vw, vh etc.

Let’s look at a CSS comparison for clamp versus vw with media queries:

h1 {
  font-size: 3vw;
}

h2 {
  font-size: 2.8vw;
}

h3 {
  font-size: 2.6vw;
}

h4 {
  font-size: 2.4vw;
}

h5 {
  font-size: 2.2vw;
}

h6 {
  font-size: 2vw;
}

@media all and (max-width: 1024px) {
  h1 {
    font-size: 6vw;
  }

  h2 {
    font-size: 5.6vw;
  }

  h3 {
    font-size: 5.2vw;
  }

  h4 {
    font-size: 4.8vw;
  }

  h5 {
    font-size: 4.4vw;
  }

  h6 {
    font-size: 4vw;
  }
}

@media all and (max-width: 767px) {
  h1 {
    font-size: 10vw;
  }

  h2 {
    font-size: 9.5vw;
  }

  h3 {
    font-size: 9vw;
  }

  h4 {
    font-size: 8.5vw;
  }

  h5 {
    font-size: 8vw;
  }

  h6 {
    font-size: 7.5vw;
  }
}

h1 {
  font-size: clamp(30px, 3vw, 60px);
}

h2 {
  font-size: clamp(28px, 2.8vw, 54px);
}

h3 {
  font-size: clamp(26px, 2.6vw, 48px);
}

h4 {
  font-size: clamp(24px, 2.4vw, 42px);
}

h5 {
  font-size: clamp(22px, 2.2vw, 36px);
}

h6 {
  font-size: clamp(20px, 2vw, 30px);
}

Have I made my point yet? 😀

How Kadence have implemented clamp

In Kadence Blocks 3.0, you will find a new and improved font size interface in every block that allows you to adjust font sizes, and one for each text element that block utilises.

We have six predefined clamp sizes, and a settings option that lets us override the values for CSS clamp in Kadence and set an absolute font size instead.

The thing I love most about Kadence is its use of CSS Variables (also referred to as custom properties). If you don’t know what variables are, you can check out this detailed article.

In essence, variables let you define a CSS property’s value once, and refer to that value throughout your CSS instead of repeatedly defining the same value on multiple elements. This is how the global color palette works in Kadence. You define your colours inside the theme customiser, and Kadence applies a CSS variable to those colours, so if you change a colour, that change is reflected everywhere you’ve used that colour, without the need to edit each individual block.

If you’ve used any of the custom designed blocks from my blocks library, you’ll notice I often use variables in the CSS to make it simple for you to change values without having to hunt through the code to find what you need to modify. If you haven’t tried my blocks yet what are you waiting for? Click here for access to my free library.

What are the default clamp values?

The Kadence default clamp values are set within CSS variables like so…

:root {
  --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
  --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
  --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
  --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
  --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
  --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);
}

How does this relate to the font size settings inside blocks? Simple…

SM = –global-kb-font-size-sm
MD = –global-kb-font-size-md
LG = –global-kb-font-size-lg
XL = –global-kb-font-size-xl
2XL = –global-kb-font-size-xxl
3XL = –global-kb-font-size-xxxl

You’ll see in the CSS above the values are a little more complex than I’ve so far explained. This is because we can also use calculations within clamp values.

This value for example, clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem), tells the browser to make the preferred font size 0.73rem + (plus) 0.217vw.

We can get even more specific using min(), max(), and calc() functions for our values, but I want to keep this tutorial accessible to all so I won’t confuse things further. If you’re interested in learning more about using calculations inside clamp, you can refer to this article.

How to use CSS clamp in Kadence

In a perfect world, there would be an area within the customiser to set our own clamp values, but this was a blocks update, not a theme update. Whether or not that theme functionality is coming in future releases, I don’t know, but changing the values is simple with a little CSS.

How to define your own clamp values

All we have to do is override what’s already defined.

Here are the default values again…

:root {
  --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
  --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
  --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
  --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
  --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
  --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);
}

To override these we simply copy/paste the CSS and change to our liking…

:root {
  --global-kb-font-size-sm: clamp(20px, 2vw, 30px);
  --global-kb-font-size-md: clamp(22px, 2.2vw, 36px);
  --global-kb-font-size-lg: clamp(24px, 2.4vw, 42px);
  --global-kb-font-size-xl: clamp(26px, 2.6vw, 48px);
  --global-kb-font-size-xxl: clamp(28px, 2.8vw, 54px);
  --global-kb-font-size-xxxl: clamp(30px, 3vw, 60px);
}

As I said before, you’re not limited to pixels, so if you’d prefer to use ems or rems for your minimum and maximum values, go wild. I’m not the pixel police.

That said, I do recommend sticking to vw units for the preferred values unless you intend to use a calculation like the ones you see in the Kadence default values. Even then, at least one side of that calculation should be a vw unit, as this is what allows for fluid scaling.

How to apply clamp globally to font sizes

Now we’ve got all of the intricacies of clamp out of the way, you might be wondering how to apply clamp to your content. Again, as this was a blocks update and not a theme update, we can’t currently do this via the customiser. That means we either need to define sizing (sm, md, lg, xl etc.) inside the settings of every block, or add a little CSS so we never have to touch those settings unless we want to adjust sizing in a specific case.

If you’re happy with the values Kadence have set, all you need is the following:

h1 {
  font-size: var(--global-kb-font-size-xxxl);
}

h2 {
  font-size: var(--global-kb-font-size-xxl);
}

h3 {
  font-size: var(--global-kb-font-size-xl);
}

h4 {
  font-size: var(--global-kb-font-size-lg);
}

h5 {
  font-size: var(--global-kb-font-size-md);
}

h6 {
  font-size: var(--global-kb-font-size-sm);
}

This assumes you want to apply the six default clamp values to the six heading sizes.

If you want to adjust the default clamp values, you’ll need to first redefine those values, and then apply them to your headings…

/*Redefine clamp values*/

:root {
  --global-kb-font-size-sm: clamp(20px, 2vw, 30px);
  --global-kb-font-size-md: clamp(22px, 2.2vw, 36px);
  --global-kb-font-size-lg: clamp(24px, 2.4vw, 42px);
  --global-kb-font-size-xl: clamp(26px, 2.6vw, 48px);
  --global-kb-font-size-xxl: clamp(28px, 2.8vw, 54px);
  --global-kb-font-size-xxxl: clamp(30px, 3vw, 60px);
}

/*Apply clamp values to headings*/

h1 {
  font-size: var(--global-kb-font-size-xxxl);
}

h2 {
  font-size: var(--global-kb-font-size-xxl);
}

h3 {
  font-size: var(--global-kb-font-size-xl);
}

h4 {
  font-size: var(--global-kb-font-size-lg);
}

h5 {
  font-size: var(--global-kb-font-size-md);
}

h6 {
  font-size: var(--global-kb-font-size-sm);
}

Where should I add my clamp CSS?

If you’re using a child theme, I always advise to add it to your stylesheet. Having all your CSS in one place just makes everything easier to manage. The one exception to this rule is if you’re developing Kadence child themes to sell. Your customers may want to change the fonts you use in your theme and as we know, not all fonts are created equal, and some may render much larger or smaller than your demo. Therefore, you might want to consider moving your clamp values to the additional CSS box in the customiser so the user can adjust easily without having to delve into your stylesheet.

If you’re not using a child theme, copy/paste the CSS above into the additional CSS field in the customiser or a code snippets plugin and modify as you see fit.

And that’s it. Not as confusing as you imagined, is it?

I hope this post has given you the confidence to embrace CSS Clamp in Kadence Blocks 3.0. It really is a fantastic development and once you understand how it works, the benefits are undeniable.

Michelle x