The Proportional Web
52 points by typesanitizer
52 points by typesanitizer
@media screen and (max-width: 480px) { :root { font-size: 14px; } }
This is not accessible. Don't set the font size to a pixel value ever.
The px unit in CSS does not correspond 1:1 to pixels anymore. It means “max(1/96th of 1in, 1 pixel)”.
That doesn't change the fact that this overrides the font size configured in the browser which is a bad thing to do.
But is there a good way to do this?
I find that most browsers have an absurd font size configured by default. And I feel that changing the browser font size breaks a ton of stuff, so I expect setting a bigger font size just works better for more people.
I find that most browsers have an absurd font size configured by default.
Firefox, Chrome and Safari all default to 16px (at least on my machine) which is what WCAG recommends as a minimum size for body text. I think that's a good baseline.
And I feel that changing the browser font size breaks a ton of stuff
This a thing that happens sometimes, sure, but it's a separate issue. Another website breaking because the user adjusted their default font size doesn't mean your website should ignore their preference.
so I expect setting a bigger font size just works better for more people.
Be careful not to assume people's font size preferences. 16px may be the default but visually impaired users may prefer significantly larger text—Firefox allows up to 72px, for example. By setting font-size: 20px you might inadvertently make text illegible to some.
If you're worried about the users who you think prefer slightly larger text but aren't aware of the default font size setting, you could use something like font-size: 1.125rem; which gives everyone slightly-larger-than-preferred text. Or you could even do font-size: max(1rem, 20px); to ensure that everyone will get at least 20px text, but larger if they so prefer.
Firefox, Chrome and Safari all default to 16px (at least on my machine) which is what WCAG recommends as a minimum size for body text. I think that's a good baseline.
Eh, I have decent vision and I find it a tad too small.
This a thing that happens sometimes, sure, but it's a separate issue. Another website breaking because the user adjusted their default font size doesn't mean your website should ignore their preference.
You are correct- for my blog I try to not override users' preferences. But I want to be pragmatic; Firefox reader mode seems to agree that for reading content, going from 16px to 20px is better. But you give me a solution I like: font-size: max(1rem, 20px), which I have applied, thanks.
edit: Well, I made a further tweak.
I also don’t mind when a site sets a somewhat bigger font size than default. The problem with this design is that, at least on Firefox on Android, 14px is a smaller font size than the default.
It’s small enough to make the page hard to read unless I hold my phone still and close to my face. And holding my phone like that wouldn’t be possible for me in some situations when I use my phone, e.g. on a moving train.
The specific recommendation I like is:
:root so 1.0rem is 10pxbody so everything on the page inherits that(I'm pretty sure jak2k already knows this but for anyone else) the reasons for avoiding px, wv and wh for text sizes are:
It's strongly recommended to use em/rem rather than px for fonts so people with bad vision can use their browser's change text size feature to change the size of the text. This is an accessibility feature that people use in the real world and we should not break it.
You should never use wv or wh units for font size because it breaks ctrl-+ zooming on desktop - you try to zoom in, innerWidth/innerHeight shrink in response by the exact same proportion, and the text stays the same size. (Mixed use like font-size: calc(1.6rem + 2wv) where they just scale up a little on bigger screens is fine when it's subtle.)
Why is it good to have a difference in font-size on :root and body? And why is it better than setting no font sizes at all? It seems like all your other recommendations would be compatible with just going with the default font-size, which is 1em, right?
Only author convenience: because it's easier to write "font-size: 3rem" everywhere else in the CSS file when I actually want it to be 30px by default, rather than remembering that 30px by default is 30/16rem.
set font-size to 0.625 on :root so 1.0rem is 10px
This is already wrong. You are assuming that the default font size is 16px which is the default for current major desktop browsers but isn't universal and all browsers have options to change the default font size.
but isn't universal
It is. Everyone has settled on 16px for the default for :root and they're not changing it any time soon.
all browsers have options to change the default font size
Yes that's exactly the behaviour that I want. The default font size is 16px for everyone who didn't change it and for anyone who did change it then I do want their changes to propagate to enlarging the other fonts. Because they did that on purpose and I want to respect the wishes they have expressed by doing that.
No one should ever change the default font size in their browser. For basic text documents it’s fine but for most of the web you’ll just break things.
It is not really possible to design a complex website to handle arbitrary font sizes. The constraints it puts on design are enormous.
For accessibility (eg impaired vision) you should be changing the default zoom in your browser. This only puts the burden of normal responsive design (handling arbitrary viewport sizes gracefully) on the website, which is feasible.
Web browsers used to expose font sizes to end users but it was a bad UX so they all moved towards whole-page zoom. Decades ago.
Regardless of what they "should" do, changing the default browser font size is an accessibility feature that people do use in the real world and we should not break it.
As far as I can tell
Firefox, Chrome and Safari all make it easy to change the default zoom level, and much harder to change the default font size.
My research doesn't agree with you.
IMHO it is basically a wash, definitely not "much harder".
iOS has a text-size slider in the accessibility settings in the Settings app which changes it in apps and I think in the web browser too (but I don't have an iPhone to hand to check.) Android has one that only affects apps.
Dynamic Type does not change the font size in Safari unfortunately, but Safari lets you change it per website in its own settings and main UI.
Thank you for confirming for me that Safari does indeed have this option.
I'm a little surprised that it's separate from the apps one. I would've expected Apple to make them a single unified slider that affects both... unless there's some particular reason people would want to change them independently? I guess that might be useful because apps may be less likely to break on font size changes than websites.
I definitely don’t agree. My point is that you can’t support arbitrary font sizes unless your layout is dead simple. As in that’s technically infeasible for almost every website.
This doesn't seem like an reasonable alternative - when I zoom in to a page, the text doesn't reflow, and scrolling side to side to finish each line of text is horribly unergonomic. Do other mobile browsers treat zoom differently?
On desktop, zoom affects the viewport size. Test it at https://whatismyviewport.com/. So if you zoom in and have a smaller viewport, the website may or may not handle it gracefully. If handled gracefully, you wouldn't have to scroll left/right.
Different viewport sizes is something a website should already be handling, not just for zoom/accessibility but just because of different device/window sizes. For example, if you go to https://www.nytimes.com/ and zoom in a bunch, the text (and layout) get bigger as the viewport shrinks. At the highest level of zoom that Firefox allows I still don't get horizontal scroll.
On mobile things are different and more complicated.
This is a pretty good approximation of the typography in Bringhurst's book. Impressive!
The only flaw I can see is that the line height occassionaly departs from its expected fixed, even grid. For example, whenever text set in Courier is mixed into the line, the line height grows just a little bit.
<code> should be styled with line-height: 1 (or 0, I don't know if there is a consensus around that) to avoid this.
Also, bullet lists and ordered lists should have their symbols in the margin to follow "The Element of Typographic Style" (but I don't remember if this was explicitely requested).
Looks nice.
The relative sizing is great, but overriding the root font size is a fumble IMO. The site should respect the user's font size setting. A relative sizing system is great for this, because you're designing in terms of proportions and relarionships.
We all like to pretend that text is king and presentation doesn't matter but the truth is that having a really well thought out design guiding the page layout can really make a blog post, fiction story, or article seem much more professional. Really good page layout is somewhat of a lost art and I am glad efforts like this exist.
I jumped on the tuft.css bandwagon early and, although I have had to make adjustments over the years, it has served me well. This looks better in some ways but not enough to get me to change.
I absolutely love the "Alegreya" family of fonts. I also read the book you mentioned at the beginning when I first started using *TeX. I would recommend it to anyone.
Great exploration of a classic book on typography! Thanks for working on this - love seeing more "constraint based" design online.
opened the link, saw a column that uses 10% of my screen real estate with apparently a very pretty font, closed the tab. Impossible to focus on websites that look like this, please don't do this and just let text flow.