This is a response to Miriam Suzanne’s excellent post on Reimagining fluid typography. She poses lots of really interesting questions, some of which I disagree with, but most of all they got me thinking… and writing. So this is not a tear-down – hopefully it doesn’t come across that way. I’ve written this with love and respect and in the spirit of furthering the discussion. As it happens, Miriam and I will be having an actual discussion – live and in public – you can watch it on YouTube tomorrow. I’m really looking forward to it.

Fluid typography, as we currently define it, incorporates viewport units into our font sizing, generally with a clamp() function to integrate both rem and vi inputs in a responsive algorithm with lower and upper boundaries. For example, here’s an output from Utopia’s type scale calculator:

:root {
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
}

Which you can use like this:

p {
    font-size: var(--step-0);
}

Miriam says that the numbers in this output from Utopia are ‘a bit magical’. She doesn’t mean this as a compliment. Normally ‘magic’ numbers imply something fragile, like a font-specific nudge using fractions of a pixel to make baselines align, which can break under any number of circumstances. I’d say the numbers output by Utopia are not magic in this sense. Whilst they might require 4 decimal places, they are the repeatable solution to an algebraic equation – much more maths than magic.

(I should also point out that Miriam inadvertently implies that Utopia sets a font-size on the root element. It doesn’t. Utopia gives you a fluid type scale as a set of CSS variables. You can use that to set the font size of root if you wanted to, but you probably shouldn’t mess with the root font size directly.)

However I think Utopia works the other way around. Utopia’s type scale calculator ‘thinks’ in rems. The CSS output is in rems, but the tool’s interface enables the designer to think in pixels. As Miriam goes on to say, How can we choose a font size using units that are entirely untethered from the display? What is 1 rem without a conversion?

I think the most important aspect of Utopia is that it helps designers work with different type scales. Part of our job as designers is to make text an inviting, comfortable reading experience that conveys meaning and emotion. Type scales are a vital part of that, and different sized windows require different scales. Larger viewports benefit from more exaggerated scales, with headings set increasingly bigger compared with small screens. Without it they lose impact, are less scannable, and simply look a bit wrong.

Setting different scales for different viewport sizes is what Utopia helps us do really easily. It doesn’t mean that the base font size needs to change with screen size, although it probably should. Wider windows tend to be viewed from further away which implies the text should be larger if it is to reach our eyes at the same size as a phone held at 30 cm. The balance of the design – and hence the readability – will be improved too. But that’s up to the designer. Utopia as a tool is completely agnostic to how you apply the scales.

Miriam’s personal perspective as a web reader (like most people whether they know it or not) is that she’d like responsiveness:

As a web surfer, I would like my default font size to respond to changes [in window size]. As a web author, I would like my site to be responsive as well. We design layouts that respond smoothly from the smallest screen to the largest – it seems absurd to keep the base font size locked in place through that entire responsive process.

Miriam suggests the following code:

html {
  font-size: clamp(1em, 0.9em + 1vw, 1.5em);
}

This is remarkably similar to the output of Utopia, with the difference according to Miriam that We’re not trying to achieve a specific font size (or range of sizes) by assuming the user has a 16 px default. There’s no calculation witchcraft aimed at some target value in our designer mind, and the clamps are not related to my desired range of outcomes.

I think that’s somewhat disingenuous. The 0.9em + 1vw and the 1.5em are not random. There’s a reason those particular multipliers were chosen. It’s because they make the text look right at bigger window sizes, without going too large. Yes one might not care precisely what size the text is rendered at, but those are still subjective judgements made manifest in the code.

The reason a designer will have a target value in mind, rather than a vague sense of “that’s about right”, is down to tooling and the design process. Clients and stakeholders like to sign off designs before committing resources to building them. The tools we use to give clients a sense of the design (Figma) use pixels. When those designs are built, a developer could put in their own numbers as way of approximating the design intention. Or if the designer has taken a Utopian approach, they could put in the precise numbers the designer used and achieve the same effect, knowing the end result would be closer to the design intent, but also enable readers to adjust the text size to their own specification.

Which leads me on to the final key question Miriam raises: that of user preferences. All browsers allow users to bump text size up and down. Some browsers enable users to set the default base text size precisely. And yet fluid typography as I just described it would not respect that setting. Miriam says that when she sets her default text size to 24 px, that’s precisely the size she wants her text to be. Although as she says herself, even her own website wouldn’t honour that (nor would mine). Ironically many older sites designed without fluidity might do so.

I think browser makers have a role to play here. For a start it should be much easier to set your preferred base font size precisely. It should also be easier to change text size instead of zooming the entire page, and browsers should remember your settings every time you change them for any given website. Some browsers achieve some of these things, but never all of them.

The important thing here is writing CSS in such a way that your reader can adjust the text size to their preference, even if the text doesn’t start out that way. So make sure rems are a part of that, don’t use pixels and don’t rely on viewport proportions alone.

As I wrote in my book (I’m sure it’s uncool to quote oneself but whatever):

The web is arguably the best medium for text there has ever been. Readers can adjust the medium to their advantage or when affected by the external environment. From the beginnings of the web, the reader has been able to tweak the display of text to their own satisfaction, be it colour, size or font choice.

As long as your reader can still do that without difficulty, you’re grand.