Reimagining Fluid Typography
oddbird.net
oddbird.net
`font-size: calc(1.25em + .5vw)`. Please never, ever do anything like this.
On a 1920×1080 display, given a browser em of 16px, that would be 29.6px. When practically every other page around will be in the range 16–22px (mostly 18–20px, I reckon). It’s 30–70% too large.
On a 400px-wide phone with 16px browser em, that would be 22px. When practically every other page around will be in the range 16–18px. It’s 20–30% too large.
On my 1706×960 laptop display, it’s 28.5px, and has the dishonourable distinction of being the first site that I’ve actually zoomed all the way out to 50% for, and not felt any remorse at all, because that makes the text effectively 18.5px for me, right about where I reckon is right. I’ve never felt the need to go past 67% before. If it weren’t for the fluid typography, I wouldn’t have even had to, but because the viewport width is such a large part of the calculation, it decreases the effectiveness of the browser’s zoom, so the 50% is actually more like 65%. This also means that things like changing the browser’s zoom will throw you around the document willy-nilly, because it’s working against the browser’s techniques to keep you in the same place in the document.
What it talks about has a clamp() invocation to prevent values from getting too stupid, but the site itself doesn’t have that, and starts already oversized.
This is a real pity, because there’s a lot of good about the content itself—in particular, its remarks on how people accidentally make calculations assuming the browser em is 16px are spot-on. But the content is immediately compromised by the page’s crazy font sizes.
Evaluate all the font sizes in viewable text, find the median (weighed by character count), set it to my preferred size, scale the rest accordingly.
This is akin to volume normalization for audio. Just like TV channels shouldn't increase their volume willy-nilly, neither should web developers get to scream their entire articles at me.
Many are the people that use tech, have poor eyesight, and struggle because they don’t know about things like browser or OS zoom or text size adjustment facilities. They just get used to using things in their own idiosyncratic way, and don’t realise better is possible. In my limited experience of enlightening such people when I observe it (in person, that is), I think they’ve always been grateful to learn of such functionality, and it significantly improves their experience.
(You being on HN makes it much less likely you’ll be unaware of such things, but still⸺.)
If you’re struggling with every other web page, and find this one good, while others are agreeing it’s bad (and, more objectively, it’s unquestionably atypical); if they’re pointing out that there’s a way of effectively applying the difference that you liked in this page, to all pages—well, that seems pretty reasonable to me.
Anyway, whether you care to employ it or not (and that is certainly up to you), deredede’s advice is very solid in general. There are a lot of people out there that would benefit from it.
It’s important that atypical experiences get some kind of exposure. On the web, there’s actually a chance those atypical needs may get a solution, because it’s comparatively cheap to produce accessible versions or modifications (compared to modifying buildings and transport, for example). I raised a counterpoint to the general consensus because no similar point had yet been raised and now I’ve had six paragraphs on why I’ve been doing it wrong. Very disappointing.
EDIT: TBH the whole site is terrible on desktop. Everything is too big. I get the feeling this person is mobile focussed.
Maybe something like this?
html { font-size: clamp(16px, 1.5em, 24px); }:root { font-size: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem); }
but I don't need vi (I use emacs) so I would settle for: :root { font-size: clamp(1.125rem, 1.15rem, 1.25rem); }
for line length we can use ch ? 65 to 85 and shorter for the headings or whathaveyou?
Does that break the site for some users because of browser settings they have? I am all for the best presentation right after "must be readable on a phone".
If that's a horribly broken assumption on Safari, I'd be grateful if you could explain to me how it's broken.
That would be like if every television programme broadcast audio at a different volume, so every time you watched something new you had to adjust the volume. It’s insane. The browser already knows what size text the user prefers. The only thing you have to do is let them use it instead of overriding it with absolute units. If you’ve designed something that the user needs to change their settings to read, you’ve made a really bad design.
> all have to be in ems if you want things to scale proportionally when font size changes.
You don’t want most things to scale proportionally when font size changes. The goal of a good web design is not to have the exact same raster image appear at different sizes, the goal of a good web design is to be the best presentation for the current situation – which includes user preferences, what content you are displaying, the size of the viewport, etc.
So, for instance, if you have a main content area in the middle of the page and sidebars on each side, then you might want to set a minimum and maximum width for them in ems so that the line lengths don’t get ridiculously long and it doesn’t get squashed, but the width should probably be proportional to the available horizontal width, so percentages or fr should be used for that property.
There are some things that are closely related to the font size, so for instance you should use ems to set padding around text and margins between paragraphs. But that doesn’t mean that, say, the border should be set in ems.
Basically, use the units for their designed purpose instead of thinking you need to use all of the same types of units everywhere.
Well. No. It would be more like if every television program was displayed on a screen that had a different height, width, and scaling that may depend on the state of the browser at any given moment. Which is in fact the case. And is kind of the point of what we're trying to deal with here.
What I do not get for the life of me is why you would introduce a dependency on a deeply obscure user preference that I, as a perfectly literate computer user, would not expect. As opposed to scale, which is completely in your face (and also has an obscure default setting in exactly the same place if that's what the issue is for you).
And it's not like there aren't enough dependent variables I have to deal with to make sure that my UI is responsive across all common page sizes my app will encounter without introducing another one, whose benefit, frankly, just doesn't seem that compelling.
Asking because I genuinely do not get it.
The only thing you have to do here is not do anything. Literally just don’t use fixed font sizes. It takes extra effort to make life worse for people with vision problems. Just… don’t do that. It’s easier than fucking it up.
Why? I’ve started to use rlh as my base unit for almost everything, and it’s great as it automatically gives your whole design consistent vertical rhythm.