Size and Scale Fluid Typography with CSS Clamp
Responsive web design is now a prominent aspect of modern web design and development. For instance, global mobile web usage surpassed that of desktop in 2016 and Google switched to a mobile-first website indexing process in 2019. With this in mind, creating a website that provides users with an optimised experience for all devices is more desirable than ever before.
One of the traditional ways that websites are developed responsively is by using a CSS feature called media queries. Essentially, this allows CSS to be applied to page elements within a specific breakpoint and be altered again as the screen size increases or decreases.
As good as the standard media query approach is, technology evolves and new and improved methods emerge. For example, more recent changes to CSS allow us to use a function called “clamp”. In a nutshell, fonts can be styled with one line of code and it scales as fluid typography.
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.
The rest of this article is available on The Digital Den.
Image credit: Tingey Injury Law Firm (Pexels), CSS Tricks
