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.Ĭan 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. 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. It’s the in-between screen sizes where fluidity makes more of a difference.
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. Imagine a breakpoint-based website that shows 14px text on mobile and 22px text on desktop.
Let’s start by getting size-and why it’s not what matters here-out of the way.įirst, the obvious: fluid typography is less about the outcome, and more about doing the same thing in a slightly different way. So, here are my thoughts and findings-some concrete, stemming from visual design and typographic theory, and some of my own (wild?) speculation. 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. Plain and simple, it really is mostly about the technical optimisations it affords. Maybe that’s why discussions on fluid type often just gloss over readability. A thoughtfully implemented fluid type system won’t affect users in any meaningful way-positive or negative. But-compared to a well-executed breakpoint-based design-what exactly is the UX impact of fully fluid type? ( Kevin Pennekamp, 2020)Ī better developer experience is valuable in its own right. Adding fluidity for font-sizes, element sizes, and spacing contributed to achieving this goal. But above all, I wanted to make my CSS more maintainable. I wanted to reduce the CSS footprint of the website. I wanted to reduce the number of media-queries, but maintain responsiveness.
FLUID BLOCKS UNIT OF MEASURMENET CSS CODE
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.Īrticles on fluid type often introduce the topic by explaining how it can remove complexity in styling 1. S m o o t h l y in relation to screen size without any breakpoints. We call type “fluid” when the text on a web page scales