Why should type be fluid, anyway?
By: Elise Hein
Tags: Design, Typography, Responsive Design, UX, UI

We call type “fluid” when the text on a web page scales in relation to screen size without any breakpoints. If like me, you’ve just had a marathon catch-up with all things web typography in 2021, the most thrilling part about this concept would seem to be the immense gains in code maintainability.

Articles on fluid type often introduce the topic by explaining how it can remove complexity in styling¹. One example:

I wanted to reduce the number of media-queries, but maintain responsiveness. I wanted to reduce the CSS footprint of the website. But above all, I wanted to make my CSS more maintainable. Adding fluidity for font-sizes, element sizes, and spacing contributed to achieving this goal. (Kevin Pennekamp, 2020)

A better developer experience is valuable in its own right. But—compared to a well-executed breakpoint-based design—what exactly is the UX impact of fully fluid type?

Nothing much, is the short answer. A thoughtfully implemented fluid-type system won’t affect users in any meaningful way—positive or negative. Maybe that’s why discussions on fluid type often just gloss over readability. Plain and simple, it really is mostly about the technical optimisations it affords.

Still, even if subtle, I can’t help but wonder about how fluidity in design impacts people, and how it matches our expectations of using the web. So, here are my thoughts and findings—some concrete, stemming from visual design and typographic theory, and some of my own (wild?) speculation.

Size

Let’s start by getting size—and why it’s not what matters here—out of the way.

First, the obvious: fluid typography is less about the outcome, and more about doing the same thing in a slightly different way. Imagine a breakpoint-based website that shows 14px text on mobile and 22px text on desktop. After you ditch the media queries and scale the text fluidly from 14px to 22px, a lot of people will still go on seeing roughly 14px text on mobile and 22px text on desktop.

It’s the in-between screen sizes where fluidity makes more of a difference. But here, I think everyone can agree that text set at 17.6px on a 540px screen and scaled down to 15.2px on a 414px screen is not fundamentally better than showing 16px text on both. We must remember that screen width is only a convenient proxy to a much richer and unpredictable viewing context, which, at this level of tiny adjustments, will likely undo any efforts to make sizing perfect.

Can we count on context? Can we assume that everyone holds a phone or tablet at the same distance, or that desktop browsers are all hunched over a desk? […] Until computers sense a user’s reading distance and adjust page scale proportionally (sounds like a nightmare, right?) we’ll have to make these sensible generalizations. (Trent Walton, 2012)

Looking at where fluid font sizing can go wrong, the danger is tying it too intimately to the viewport, resulting in text that becomes too small or too big too fast. In 2021, though, this is mostly a non-issue. With the help of new CSS features, smart implementations avoid extreme scaling by only “sprinkling” the calculation with a tiny viewport multiple, and clamping it to a reasonable minimum and maximum—all the while keeping everything accessible!

body {

font-size: clamp(1rem, 0.5rem + 2vw, 1.625rem);

}

Type that scales fluidly from 1rem to 1.625rem (16px to 26px in the default case). Clamped, subtle, and accessible. The technique using clamp is originally from Simplified Fluid Typography; to make it accessible, Nick Gard added relative units in Accessible Fluid Typography.

So—fluid typography, if carefully implemented, won’t harm readability. But it also doesn’t have much of an edge over a handful of well-chosen breakpoints and font sizes.

Display text and line length

I tried and failed to find many specific areas where viewport-relative typography does outperform breakpoint-based sizing in terms of readability. Here are two: setting display text and maintaining consistent line length.

Display text. Large textual elements such as titles or bold visual statements look more striking when they are tied to the viewport size. Richart Rutter puts it nicely when he says that “display text, as defined by its purpose and relative size, is text to be seen first, and read second”.

[…] In other words a picture of text. When it comes to pictures, you are likely to scale all scene-setting imagery — cover photos, hero images, and so on — relative to the viewport. Take the same approach with display text: lock the size and shape of the text to the screen or browser window.

Consistent line length. It’s widely known that there exists an optimal line length (measured in words or characters) for comfortable reading. Line length can be unpredictable at different screen widths for text whose size is static.

Viewport-relative sizing easily addresses both of these concerns². It’s worth pointing out, though, that while it’s probably the obvious solution for setting display text (unless you’re happy with JavaScript), it’s by far not the only alternative for achieving consistent line length. In addition to good old media queries to control text container sizing³, you can also use the ch unit to specify a max-length for a block of text. Ultimately, don't forget that on screens, there is a relatively wide range for line length where reading comfort isn't compromised, and it's not necessarily tied to text size.

When designing a responsive website, start with a comfortable font size and an ideal measure to help determine break points. But when the time comes (as it always does), let the ideal measure go. (Smashing Magazine, 2014)

A note on accessibility

Allowing people to retain control over the font size displayed in their browser is one of the most basic of accessibility requirements. Matej Latin thoroughly compared the pros and cons of different fluid type approaches in The State of Fluid Web Typography, and many of them feature issues of accessibility. As mentioned above, it is possible to make fluid typography accessible by combining viewport units with rem or em (preferably rem )—this ensures text zooming is functional and that the browser's default font size is respected.

Still, Latin’s line of thinking resonates with me:

We shouldn’t be focusing on making our font sizes scale nicely for every screen width. We should make our texts easy and enjoyable to read to each and every one of our users. This means leaving some of the control over web typography in their hands. At this moment, fluid web typography interferes too much with that.

This rings true even for fluid type that ticks the accessibility boxes. It’s especially relevant when laptop/desktop users resize their browser—more on that later.