Easy Fluid Typography

💡

This post updates my earlier article, Easy Responsive Typography

This tutorial shows you how to implement fluid typography easily on your website and provides an interactive calculator to determine the typography scale that works best for you!

What is Fluid Typography?

Fluid typography is text that scales in size in proportion to the user's viewport. Although it might be counterintuitive, font size should decrease as the screen becomes smaller and increase as it becomes larger.

Fluid Typography ≠ Responsive Typography

While fluid and responsive typography achieve the same ends—increasing and decreasing font size in proportion to screen size—their implementation is different. Responsive typography works by changing font size via media queries.

html {
    font-size: 1rem;
}

@media (min-width: 640px) {
    html {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 1.25rem
    }
}

Example of responsive typography

But responsive typography is limited by not being fluid; i.e., the same font size will apply for a large swath of viewports. As the example shows, the font size will not change between 640 and 1023px.

Nevertheless, there's nothing wrong with using responsive typography. It has the widest browser support and is the easiest method to implement—at least until now!

The Clamp Champ 👑

With support in all major modern browsers, the CSS function clamp() is the perfect method for easily implementing fluid typography. Like the tool, this function holds a value (or range of values) in place, ensuring they don't exceed your defined upper and lower bounds. It can be applied to any CSS property that accepts a numeric value.

clamp(min, preferred value, max)

The syntax for the clamp function is simple: clamp(min, preferred value, max). The min and max refer to the upper and lower bounds. For example, if you don't want your font size to go below 16px or exceed 20px, you would use these values as your min and max.

That leaves the preferred value: as long as it is in between the min and max, it will be the selected value. This is powerful because the preferred value can be a dynamic or mathematical expression. For example, in clamp(16px, 2vw, 20px), as long as 2vw (2% of the viewport width) is greater than 16px and less than 20px, it will be the CSS property's computed value. Where it is less or greater, the value will default to 16px or 20px, respectively.

Calculator

Better minds than mine have worked out formulae for calculating your preferred value, which determines the rate at which your font size scales. To make the process even easier, I've built a fluid typography calculator that not only calculates the mathematical expression for the preferred value but also allows you to visualize the scale through a simulated viewport. Of course, it also produces CSS you can easily copy and paste into your code.

Here's the fluid typographic scale for the website on which you're reading this article:

html {
    font-size: 1rem;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

Sample fluid typography rule

The calculator has some other benefits like automatically converting from px to rem and vice versa (which is necessary to maximize accessibility), as well as providing a dead-simple fallback for cases where clamp isn't supported. (For a more advanced fallback, see Daniel Yuschick's article, "Fluid Typography is My New Favorite Thing.")

Check out the calculator 🧮