How To use Clamp() in Avada
Last Update: September 24, 2025
Clamp is a method of using CSS to apply fluid typography to a website. It allows text to scale seamlessly between a minimum and maximum size based on the viewport width. While there are already repsonsive options in Avada for dealing with typography, Clamp is another method, and take a different approach. Read on to find out more about how you can implement Clamp values in Avada, and watch the video for a visual overview.
The clamp function requires three values: a minimum bound, a preferred value, and a maximum bound. The preferred value, often using viewport units or percentages, dictates the fluid scaling between the minimum and maximum. This versatile function also supports fixed values, mathematical expressions, and values from the `attribute` function.
With clamp, you’re essentially telling the browser: Make this font no larger than the maximum size I specify and no smaller than the minimum size. And between those sizes, adjust the font size smoothly based on the viewport width.
Avada’s typography fields accept Clamp values, so let’s take a quick look at where and how to apply clamp to your typography in Avada.
You can use Clamp values ona single title, in the H1-H6 Heading values, or even in a Global Typography set. The choice is yours.
Calculating Your Clamp Values
The basic syntax for clamp looks like this: property: clamp(minimum, preferred, maximum)
You can use rems, vw and px values in your clamp formulas. A simple clamp formula might look like this:
This tells the browser that for the font that this is aplied to, the minimum font size should be 42px, the maximum should be 62, and the preferred value should be 3.5 % of the viewport width.
You can also use a Clamp calculator for more precise formulas, inlcuding when you want to specify at what viewport size the minimum and maximum values shoud occur. There are several Clamp Calculators available on Google.
As you can see in th example below, this is generating a formula for a font size between 42 and 62 pixels with the minimum size displaying at 600px or less, and the maximum size displaying at 1440px.
Applying Your Clamp Values
You can apply clamp values virtually anywhere on your site. For font values for example, it might be on a single H1 Title, or it might be the H1 Heading Typography option in the global options. You can even add clamp formulas to a Global Typography set.
