Creating Fluid Typography with the CSS clamp() Function

In this article, we’ll dig into how to use the CSS clamp() function to scale the size of text across a range of device sizes. The landscape of web development and design is ever evolving. In recent years we’ve seen the introduction of powerful CSS APIs like Grid and container queries. To add to that mix, there have been some major efforts in pushing forward a paradigm shift in how we control the sizing of typography across our ever-changing device landscape. This article will talk about a term known as “fluid typography”. It’s a new technique that leans heavily on the use of a new CSS function called clamp(). The foundational concepts of fluid typography can be difficult to really get to grips with, so it’s my hope that this deep dive will both explain the core concepts and also leave you excited about implementing fluid typography in your next project.

Understanding the Need for Fluid Typography
Up until recently, adapting font size to fit device width was a relatively manual task involving the use of CSS media queries. Depending on your device support, this could mean one or two media queries or even as many as ten. The static nature of media queries forces us to declare a font size over or below a certain device width. While this font size may actually work fine at the given breakpoint, often frontend engineers are forced to add extra breakpoints to account for smaller font sizes at varying edge cases. This leads to bloat, inefficiency and frustration, as more media queries are introduced in order to satisfy these demands. The above scenario is further complicated by the universe of devices that exist at different widths, pixel ratios and screen sizes. What we need as frontend engineers and designers is functionality that can help us adapt font size to a given device based on a set of dynamic and well thought out values. This means we could move away from the restrictive nature of media queries, write less code, become more efficient and have more confidence in how our site looks across devices.

Why Fluid Typography Matters
So, why would I want to go through all the effort of refactoring my code in order to leverage the benefits of fluid typography? There are a few reasons:
Reduce CSS bloat. Using fluid typography requires one definition in order to cater for a multitude of device ranges. We can move away from multiple CSS media query declarations and reduce the amount of CSS sent over the wire.
Improve user experience. As fonts adapt to screen size, we can ensure that more edge cases are catered for across the device landscape, generating better and more consistent user experiences for users.
Support more devices. Media queries only support static breakpoints, which is helpful but not an exact science. With calc(), frontend engineers can make more dynamic decisions about how typography renders.
Improve efficiency. Implementing fluid typography means we can achieve improved and simplified CSS declarations without the need to for manually testing every device.

Now that we understand what fluid typography is, and why it matters, let’s look at how to implement it in our projects.

The Power of clamp()
clamp() is a well-supported CSS function that was introduced as part of the CSS Module 4 specification. CSS functions are not new to CSS; we’ve been using some for many years, such as rgb(). As with all functions, clamp() takes a number of inputs and yields an output. clamp() takes three inputs: A minimum value. This is the floor of the range. The preferred value can’t be lower than this minimum value. A preferred value. This value is used as long as the number generated is not lower or higher than the expressed minimum and maximum values. A maximum value. This is the ceiling of the range. The preferred value can’t be higher than this maximum value. Let’s first look at an example of using clamp() to set the width of an element: `width: clamp(350px, 50%, 600px)`

In the example above, we’re setting the width of a given element to be no more than 600px, no less than 350px, and ideally 50%. Take a look at the CodePen demo below and resize the browser horizontally. You’ll notice that, no matter how wide the container gets or how wide your screen is, the grey

element never gets wider than 600px. Likewise, no matter how small you make the browser, the

element will never go below a width of 350px. This is the beauty of using clamp(). Can you see how this starts to relate to typography? We have far more control over the behavior of the

element. It’s good to note that, at this point, we haven’t used a single media query to achieve this, nor are we using particularly dynamic values. If we did have to rewrite the CodePen demo’s CSS with a media query, we’d likely be looking at something like this: `article { width: 350px; } @media only screen and (min-width: 480px) { width: 50%; } @media only screen and (min-width: 960px) { width: 600px; }` Around ten lines of code, compared to one CSS function. I’d say that is a major optimization. It’s important to understand, again, how clamp() is working here: it’s looking at the preferred value first and calculating if that expression is in fact between the minimum and maximum values. In other words: if 50% calculates to a value that’s less than 350px, then 350px will be used. if 50% calculates to a value that’s greater than 600px, then 600px will be used. if 50% calculates to a value between the minimum and maximum values, then the preferred value is used. In all honesty, using a static value as the preferred value is not helpful. This value needs to be a dynamic expression in order to work and determine a linear relationship between the minimum and maximum values. CSS has many units of measurements that will yield a static value from a dynamic expression, so I would advise you to use em, rem, vw, percentage, or even combination of these units of measurement with the use of calc() to dynamically calculate the preferred value when using clamp() in your code.

Now that we understand how clamp() works, let’s see how we can apply it to fluid typography.

Implementing Fluid Typography with clamp()
Let’s get into the nitty gritty now about setting up fluid typography for a project. We’re going to start with a contrived stylesheet:
“`
* { box-sizing: border-box; }
body { font-family: system-ui; font-size: 16px; }
h1 { font-size: clamp() }
h2 { font-size: clamp() }
h3 { font-size: clamp() }
h4 { font-size: clamp() }
h5 { font-size: clamp() }
h6 { font-size: clamp() }
“`

Our goal here is to create universal typography styles that respond gracefully to breakpoints in a linear way (scaling down in a consistent manner). To do that, we need to employ some math and we need to consider a few complications. I’m going to do my best to explain everything as plainly as I can. As I mentioned before, we know that clamp() takes three inputs: minimum, preferred, and maximum. It’s easier to determine the minimum and maximum font sizes first. This provides us some guard rails and sets a range for the preferred value to be calculated. Let’s say I’m working with a designer to create an 8px font scale. This means that my fonts can go up increments of 8px, which provides for natural consistency:
8px: 0.5rem;
16px: 1rem;
24px: 1.5rem;
32px: 2rem;
40px: 2.5rem;
48px: 3rem;
56px: 3.5rem;
64px: 4rem;

I’ve used px values above to ground the idea of the scale, as it’s more intuitive, but we’ll be using rem going forward, as it’s a relative unit of measurement and can scale/zoom for accessibility reasons. Next, we’ll need to make some assumptions based on supported minimum and maximum screen sizes.

Determining min and max screens
Before we move any further, I want to address the issue of choosing minimum and maximum values. Part of calculating the preferred value will depend on what range of screen sizes we’re actually dealing with, but it also has an effect on our minimum and maximum values. Let’s say, for example, that our website supports all the way back to iPhone 5. That device…

Source link