Size and Scale Fluid Typography with CSS Clamp

What is the Trouble with the Traditional Media Queries?

Before we get to the new solution, let’s take a look at a couple of the issues of the older method that need addressing.

One issue with media queries is that they add extra lines of code to the CSS file. For instance, one heading could have a different font size for each of the five main Bootstrap breakpoints. Then multiply this by how many different headings a website could have. It becomes pretty lengthy in a short space of time, which is harder to read and harder to maintain.

Another area where the existing solution is not perfect is that the specified font sizes for different devices are limited to the number of breakpoints that exist. So, for example, if H1 was 30px on mobile and did not change until the SM (Phablet) breakpoint. This would mean that all mobile users would have the same font size whether they were using an old iPhone 5 or a newer iPhone 13 Pro. In other words, the font size is rigidly set to the breakpoint, not set fluidly to specific device sizes.

What is CSS clamp?

With these issues in mind, let’s see how can we use clamp to alleviate these problems.

CSS clamp uses three functions, two of which are existing min and max functions – in this instance to set a min and max font size. The middle value is set to a dynamic value that will change with the width of the screen, such as viewport width (vw).

A simple CSS declaration could be: “font-size: clamp(2rem, 5vw, 5rem);”.

In this instance, the font size is set to 5vw with a minimum of 2rem and a maximum of 5rem. In other words, the font size defaults to 5% of the screen width but it will not go below 2rem on mobile devices and will not go above 5rem on desktop.

This way, fonts can be styled responsively with a single line of code, with no need for multiple media queries for each breakpoint. It also means that every user will have fonts sized specifically to the size of their device – a tailored, optimised experience for every user.

Implementing the New Clamp Approach

Following on from the basic example, let’s take a look at how clamp could be implemented into your project.

Step One

The initial step that would be recommended when first setting up the typography rules in CSS is to decide on a typographic scale. In other words, it defines the difference in size between H1 to H6. You may be able to do this yourself or have a conversation with a digital designer to establish what this should be. A great resource is the Type Scale Visual Calculator by Jeremy Church.

Step Two

The following steps will look at a specific heading, H1. Please note that you will repeat these steps for each heading style that you have on your project.

The next step is to decide what the maximum font size will be. In other words, on the largest screen size that your app caters for, what is the largest size the font will go to.

Please note that we need this value in REM, so the REM Calculator is useful to convert your pixel value.

Step Three

Related to step two, we now want to define the minimum font size. Similarly, this would be the lowest font size that would be used on the smallest mobile device used to view your website. Again, this would be defined using REM.

Step Four

The final step is to calculate the middle value – essentially, the middle value is the dynamic value that the font size will scale between the min and the max values.

It should be stated that this is arguably the trickiest part of the process. For instance, the people who came up with this solution have entire interpolation diagrams to showcase their findings.

The good news though is that the critical thinking has already been done and there is a clamp calculator on CSS Tricks. It is a case of entering some basic values and you copy the data that it spits out. The inputs are as follows:

1. Minimum viewport width – The smallest screen size you cater for, so an iPhone 5 is 320px.
2. Maximum viewport width – The largest screen size you cater for, so an HD desktop is 1920px.
3. Minimum font size (in rem) e.g. 3.375.
4. Maximum font size (in rem) e.g. 7.59375.
5. 1 rem – Define what 1rem is in pixels e.g. 16px.

Clamp Calculator | CSS Tricks

The final H1 CSS output could be something like: “font-size: clamp(3.375rem, 2.5313rem + 4.2188vw, 7.59375rem);”

The full code example – which details the traditional media query approach and the new clamp method – is detailed below:

What are the Drawbacks of Clamp?

Whilst the new solution is an improvement on the old way of doing things, there are some considerations worth mentioning:

Issue One – The Code is Not Accessible to Junior Developers

Using CSS clamp is not as easy as using simple pixel values and some inexperienced developers may have some trouble with the more complex clamp method. To solve this, perhaps a senior developer would handle this when setting the project up and then handing it over to the junior developer.

Issue Two – The Code is Not IE Compatible

If you are working for a client who requires IE support for a project, then clamp is not supported. You will need to use the old way of using media queries. However, given that in 2021, Bootstrap 5 and WordPress 5.8 have dropped IE support, most modern websites do not need to worry about this anymore.

Issue Three – Calculation Assumes the Base Font Size Does Not Change

The middle value in the calculation uses the base font size as a guide, so any change in the base size would require a second clamp value calculation. If you need to change the base font size at a specific breakpoint, then the second set of clamp values would be required for that breakpoint.