Disagree. I have the font size on my my browser on my media server hooked up to my TV bumped up to 20 because I want things to be larger in the browsing context specifically (other parts of the UI are fine a bit smaller). Sites that respect this setting “just work” becoming easier to read and have bigger targets for a mouse on the couch or floor, and others require a lot more fiddling which isn’t ideal if my keyboard isn’t attached (sometimes I just have a game pad and mouse nearby, and have bookmarks in the browser so I don’t need to type).
This is why it has been common practice to do (as alluded in the post)
html {
/* percentage not pixels */
font-size: 62.5%;
}
body {
/* reset body text size to be inherited */
font-size: 1.6rem; /* ≈16px on most displays */
}
.Panel {
max-width: 3.2rem; /* ≈320px on most displays */
}
which sets the root element from the default “16” “px” to “10” “px” and as a developer just involves moving the decimal one place from the px value and doesn’t require much thought while supporting the accessibility/usability case. Some folks use font-size: 6.25% so they don’t have to do any decimal shifting, but there is some occasional rounding errors and minimal font size constraint issues. I’ve done this for years without much issue and I don’t feel I’ve “suffered pain” as the article suggests. It’s not about reaching some underlying px default, but scaling everything relative to the user agent’s request. It doesn’t prevent the user’s ability to scale, it just sets the at the best default to use rem.
What the author suggests is that users should have to press zoom on each individual website they visit instead of the website respecting their settings. What’s easier for a user is doing nothing and not having the UGH experience of needing to zoom for your content. It feels selfish: a fraction of my developer time is more valuable than the time of my readers/consumers.
Honestly em beats rem for a lot of things. So use em, rem, percentages, and vw/vh, all with thought and care.
Don’t use px for text.
But the default font-size is 16px, and that’s just too small.
Don’t touch the default font size. The text on that blog post is way too big. It’s like reading a billboard word by word instead of comfortably taking in the text. People’s vision can be impaired in many different ways.
Don’t touch the default font size (unless you use Verdana, which was pixel-hinted to the wrong x-height, but… just don’t use Verdana).
Other posts suggest cockamamie cargo cult ways to jack the fontsize up without technically breaking the “don’t use px for text” rule but that’s messed up. (One easy way to do it is just to set it to 1.25 em. But, again, don’t do that.) Just don’t touch the default font size. Fix your own browser instead of hoisting your own preferences onto the world.
I have to use the god damned “reader mode” everytime I read stuff on matklad.github.io to turn off those huge letters. It’s prose, not the Nazca Lines.
Just don’t touch the default font size. Fix your own browser instead of hoisting your own preferences onto the world.
If I followed that advice (as I understand it), then the vast majority of people, who are normally sighted, are using a mainstream browser on a typical display, don’t know anything about this subject, and therefore have left their browser’s default font size alone, could be forgiven for thinking that my company’s web pages were developed by a blind person. And they’d be half right, as I’m visually impaired (and my cofounder and some coworkers are totally blind). We can’t afford to give such a first impression, especially since some non-technical sighted people are often decision-makers on whether to buy our products, even though our products ultimately serve the needs of blind people. So I have to accept that the browser defaults are, in some sense, wrong, and impose my own settings instead. In other words, I can’t be a purist on this as you seem to be suggesting. It’s good enough that users who need to adjust the font size (including me when I’m not using a screen reader) have a way of doing so, using page zoom.
What are you talking about? Your site, Matt’s Musings, look great in the font size dept. Do not mess with that and you’re golden. Only problem is that the column is a li’l too wide but that’s not font size related.
Oh, that’s my dead personal blog. I keep thinking I should revive that with a proper theme that most people would consider presentable. Or, maybe in the spirit of doing things that scale, I should just use something off-the-shelf like WordPress or Ghost for my personal blog.
But my company’s website and products, which I won’t promote here, don’t look like that.
But my company’s website and products, which I won’t promote here, don’t look like that.
You mean good? Because that’s what Matt’s Musing’s look like (size-wise). Clean and readable.
Edit: I apologize for the passive-aggressive snipe. A lot of built up frustration on this issue and it’s really wrong of me to take that out on every individual I disagree with. Obviously it’s a contested issue. I’m sorry.
Aside: am I the only person who the first time I launch an application, I skim the settings? I’ve set these defaults for years in browsers, but I’ll show people regularly that there are settings in the stuff they used and they never bothered.
Just don’t touch the default font size. Fix your own browser instead of hoisting your own preferences onto the world.
I actually did that at one point (using default font-size), but very quickly realized that even I can’t be bothered to adjust all browsers I am using. The default isn’t “user’s default”; in practice it is 16px for the overwhelming majority of users. Its on the author of the content to make sure it looks good despite the default of 16px.
I do want my blog to be readable without reader mode, that’s why I picked the font size I consider to be readable. Incidentally, as I’ve just checked the actual rendered size in display pixels comes pretty close to the reader mode. The height of T is 19 and 18 in reader mode, for o it is 12 vs 13 (the actual font size is 22 vs 20, but Garamond is a small font). Given that this is default for reader mode, I am fairly confident that I indeed picked an appropriate size for an average reader who uses an unconfigured browser.
Now, you might have different preferences. You can configure default, per-website, or per-session zoom level. This is where the browsers provide most affordance these days. You can also use reader mode or, if you want full control, custom CSS.
“Default browser’s font size” is another way to configure this, which I decide to explicitly not support. I don’t see a need for that, given that browser vendors push users towards zoom, and given that “default font size” is somewhat incoherent (the default is to small, and it does depend on a specific font in use).
Zooming in is a heck of a lot easier than zooming out 🤦🏻♀️
On your site I have to use reader mode and crank the reader mode’s font size down to a normal size, not the default. But, reader mode has adjustable font size, which is good, which is the point.
Other people’s vision problems aren’t the same as your own vision problems.
There are four places this could be changed:
On the client side, users setting their own font sizes.
On the site side, every web page pushing their own preference.
On the browser implementation side, browsers deciding on a new default (which users then can change).
On the spec / W3C side.
Out of these four places, the absolute wrongest and worst place for opinionation & size-embiggenation is the second. The web becomes an unreadable mess of sizes. Every site owner who messes with their font sizes is part of the problem.
These last few years we’ve seen such a plague of too-big fonts stomp all over the web in some kaiji-sized boots. Maybe it’s device maker’s trends, people reading on misconfigured phones or something.
Would you please grab a paper book (let us know whether it’s paperback or hard cover) from the shelf, open it to a page of prose, and photograph it compared to your own website? I’d do the same but only good camera I have is on the iPad itself, or an old Nintendo 2DS camera.
If you have so many browsers that you can’t set the font size on them without Ansible and Kubernetes to manage all those devices then maybe that’s part of the problem.
Could you try to be a little less inflammatory in the comments? You make logically valid points, which I appreciate, even if I disagree with them, but it’s a bit hard to read past the style.
Here’s a comparison of the blog with a random paperback:
Book’s font seems to be larger (default settings on both the book and iPad)? And that despite books weighing font-size against the size of the book itself.
That is good feedback, thank you. You’re right, I’ll try to be kinder.
I got it in my head that it was me against the world on this one, a lost, windmill-tilting cause*, so I came on strongly and frustratedly. I didn’t think people would see my point but several have reached out and said that they have.
Thank you for sending the photo. You’re right that those letters are smaller than the book’s. Is that 20px?
*: Not that that would excuse my bad, unkind behavior either. I just really messed up either way and I wanna apologize to you @matklad and others. It’s been a bad week on lobsters (as in, I’ve been impatient and uncharitable and rude), and I’ve removed it from my feed reader so I can take a break.
It’s font-size 22px on iPad Mini 5. But Garamond I am using looks smaller at a given font-size than other fonts. Which … might be the answer? It looks like I might have messed up line height: it’s 1.5em, which is recommended, but if Garamond is smaller….
(Line-height is thet leading between the lines so I’m responding to the font PX here.)
Whoah, that explains a lot actually! If 22px looks that small on your device, 16px must indeed look ant sized. I can see why that is rough. But on the flip side of that, increasing it on just one size wouldn’t help you when visiting other sites. If you hit the li’l aA in the address bar you can increase your font size. I use 100% on the normal mode (and a lot smaller in reader mode, since reader mode’s default is bigger than 16px).
I got it in my head that it was me against the world on this one, a lost, windmill-tilting cause
In such cases, you might reconsider whether it’s worth fighting on this particular issue. Sometimes it’s easier to just adapt to the way that the rest of the world has chosen, if you can. I used to modify my browser’s default font size to suit my own needs (remember, I’m visually impaired). But at some point, as forcing my own font size at that level caused more problems and as page zoom got better, I gave up and just started using page zoom. (Also, I now often use a screen reader for web browsing, so often I just don’t care about font size.) It doesn’t really matter who’s right or wrong; tilting at windmills isn’t healthy.
While I deeply regret my tone and rhetoric, I haven’t changed my position.
I’m not arguing against page zoom, and I’m aware that there are plenty of websites out there where adjusting fontsize gives wonky and buggy results. (My advice is meant to prevent those kinds of bugs.)
I don’t think the site level is the right place to set this.
We don’t want another meta window viewport situation where old web suddenly gets declared broken unless they add this new tag that everyone suddenly needs just in order to look normal.
If the rest of the world collectively ends up wanting to bump the font-size, that should happen on the spec level, browser level, or device vendor level, and overridable on the user level.
16px is also a device-dependent size (since it’s based on (logical) DPI, not inches or millimeters) as @matklab showed with a device photo where even 22px was small.
Also, the world hasn’t changed yet; the most often recommended font size is still 16px. As I said, I mistakenly thought I was alone against the windmills. It turns out that that’s not the case (which is one of several reasons why I should’ve been a hell of a lot kinder and more patient).
In fact, that commonly given “best accessibility” advice (“set it to 16px”) is less future proof than my advice which is to just leave it alone, since the default is already that currently recommended 16px, and if the device default changes, your site will automatically update with it. Let’s say everyone decides the default should be 42 “frobnication units” all of a sudden, well, if you’ve left it to the default, then it’ll be the default.
(This is also why I often define other elements in terms of em (or sometimes rem), so they’ll adapt along with the font size.)
This is why I’ve mentioned Verdana in this context since it was pixel-hinted with a weird ex height.
There is actually a unit in CSS that addresses this called ex. It’s the height of a lower-case character (whereas an em based on the width of characters).
Hm, are you maybe thinking about ch? em is font-size, and font-size is height (I am not sure of what exactly, my current understanding is that’s the height of the box surrounding glyph, essentially the span between the tallest char like t and the lowest one like g)
From an accessibility point of view, it doesn’t matter what method you use for jacking the prose size up by 25%, whether’s you use rem, em, px, rubber bands, scotch tape, it’s all the same. It doesn’t magically become less of a problem because some self-proclaimed CSS guru tells you to use a particularly shibbolethy size unit. What matters is whether or not you care about user settings.
What matters is whether or not you care about user settings.
But it’s imprudent to care so absolutely about user settings that your site looks bad to the vast majority of users who don’t change settings. That’s the point I was making in my earlier comment, though it focused too much on my own situation.
Unfortunately, you’re right that the web is in such a sorry state that there are some settings every single site needs to set, and yeah, I’m talking about meta name viewport. iPhone really messed up there. 🤦🏻♀️
Font-size is not one of those things. If some sites are at 20px (whether the site designer set it with 1.25em or 20px or control-meta-cokebottle doesn’t matter) and some are at 16px, the web is gonna be left in a mess where you’d have to tweak your settings for every single site.
If humanity as a whole has collectively gone mad and suddenly wanna jam up the text size to almost twice that of most books or magazine, the way for them to do that is either individually as readers on the user settings level, or collectively on the device-designer or browser-designer level. The worst place to do it is on the site-designer level.
But the default font-size is 16px, and that’s just too small. If you just roll with intended defaults, than the text will be painful to read even for folks with great vision!
This is non-sequitur to me. You just set the font size for the body to 1.25rem (=20px), and it’s solved. I agree though that in practice px vs rem doesn’t matter, and you can use whatever is more convenient for you.
Disagree. I have the font size on my my browser on my media server hooked up to my TV bumped up to 20 because I want things to be larger in the browsing context specifically (other parts of the UI are fine a bit smaller). Sites that respect this setting “just work” becoming easier to read and have bigger targets for a mouse on the couch or floor, and others require a lot more fiddling which isn’t ideal if my keyboard isn’t attached (sometimes I just have a game pad and mouse nearby, and have bookmarks in the browser so I don’t need to type).
This is why it has been common practice to do (as alluded in the post)
which sets the root element from the default “16” “px” to “10” “px” and as a developer just involves moving the decimal one place from the
pxvalue and doesn’t require much thought while supporting the accessibility/usability case. Some folks usefont-size: 6.25%so they don’t have to do any decimal shifting, but there is some occasional rounding errors and minimal font size constraint issues. I’ve done this for years without much issue and I don’t feel I’ve “suffered pain” as the article suggests. It’s not about reaching some underlyingpxdefault, but scaling everything relative to the user agent’s request. It doesn’t prevent the user’s ability to scale, it just sets the at the best default to userem.What the author suggests is that users should have to press zoom on each individual website they visit instead of the website respecting their settings. What’s easier for a user is doing nothing and not having the UGH experience of needing to zoom for your content. It feels selfish: a fraction of my developer time is more valuable than the time of my readers/consumers.
Honestly em beats rem for a lot of things. So use em, rem, percentages, and vw/vh, all with thought and care.
Don’t use px for text.
Don’t touch the default font size. The text on that blog post is way too big. It’s like reading a billboard word by word instead of comfortably taking in the text. People’s vision can be impaired in many different ways.
Don’t touch the default font size (unless you use Verdana, which was pixel-hinted to the wrong x-height, but… just don’t use Verdana).
Other posts suggest cockamamie cargo cult ways to jack the fontsize up without technically breaking the “don’t use px for text” rule but that’s messed up. (One easy way to do it is just to set it to 1.25 em. But, again, don’t do that.) Just don’t touch the default font size. Fix your own browser instead of hoisting your own preferences onto the world.
I have to use the god damned “reader mode” everytime I read stuff on matklad.github.io to turn off those huge letters. It’s prose, not the Nazca Lines.
If I followed that advice (as I understand it), then the vast majority of people, who are normally sighted, are using a mainstream browser on a typical display, don’t know anything about this subject, and therefore have left their browser’s default font size alone, could be forgiven for thinking that my company’s web pages were developed by a blind person. And they’d be half right, as I’m visually impaired (and my cofounder and some coworkers are totally blind). We can’t afford to give such a first impression, especially since some non-technical sighted people are often decision-makers on whether to buy our products, even though our products ultimately serve the needs of blind people. So I have to accept that the browser defaults are, in some sense, wrong, and impose my own settings instead. In other words, I can’t be a purist on this as you seem to be suggesting. It’s good enough that users who need to adjust the font size (including me when I’m not using a screen reader) have a way of doing so, using page zoom.
What are you talking about? Your site, Matt’s Musings, look great in the font size dept. Do not mess with that and you’re golden. Only problem is that the column is a li’l too wide but that’s not font size related.
Oh, that’s my dead personal blog. I keep thinking I should revive that with a proper theme that most people would consider presentable. Or, maybe in the spirit of doing things that scale, I should just use something off-the-shelf like WordPress or Ghost for my personal blog.
But my company’s website and products, which I won’t promote here, don’t look like that.
You mean good? Because that’s what Matt’s Musing’s look like (size-wise). Clean and readable.
Edit: I apologize for the passive-aggressive snipe. A lot of built up frustration on this issue and it’s really wrong of me to take that out on every individual I disagree with. Obviously it’s a contested issue. I’m sorry.
Aside: am I the only person who the first time I launch an application, I skim the settings? I’ve set these defaults for years in browsers, but I’ll show people regularly that there are settings in the stuff they used and they never bothered.
I actually did that at one point (using default font-size), but very quickly realized that even I can’t be bothered to adjust all browsers I am using. The default isn’t “user’s default”; in practice it is 16px for the overwhelming majority of users. Its on the author of the content to make sure it looks good despite the default of 16px.
I do want my blog to be readable without reader mode, that’s why I picked the font size I consider to be readable. Incidentally, as I’ve just checked the actual rendered size in display pixels comes pretty close to the reader mode. The height of
Tis 19 and 18 in reader mode, foroit is12vs13(the actual font size is 22 vs 20, but Garamond is a small font). Given that this is default for reader mode, I am fairly confident that I indeed picked an appropriate size for an average reader who uses an unconfigured browser.Now, you might have different preferences. You can configure default, per-website, or per-session zoom level. This is where the browsers provide most affordance these days. You can also use reader mode or, if you want full control, custom CSS.
“Default browser’s font size” is another way to configure this, which I decide to explicitly not support. I don’t see a need for that, given that browser vendors push users towards zoom, and given that “default font size” is somewhat incoherent (the default is to small, and it does depend on a specific font in use).
Zooming in is a heck of a lot easier than zooming out 🤦🏻♀️
On your site I have to use reader mode and crank the reader mode’s font size down to a normal size, not the default. But, reader mode has adjustable font size, which is good, which is the point.
Other people’s vision problems aren’t the same as your own vision problems.
There are four places this could be changed:
Out of these four places, the absolute wrongest and worst place for opinionation & size-embiggenation is the second. The web becomes an unreadable mess of sizes. Every site owner who messes with their font sizes is part of the problem.
These last few years we’ve seen such a plague of too-big fonts stomp all over the web in some kaiji-sized boots. Maybe it’s device maker’s trends, people reading on misconfigured phones or something.
Would you please grab a paper book (let us know whether it’s paperback or hard cover) from the shelf, open it to a page of prose, and photograph it compared to your own website? I’d do the same but only good camera I have is on the iPad itself, or an old Nintendo 2DS camera.
If you have so many browsers that you can’t set the font size on them without Ansible and Kubernetes to manage all those devices then maybe that’s part of the problem.
Could you try to be a little less inflammatory in the comments? You make logically valid points, which I appreciate, even if I disagree with them, but it’s a bit hard to read past the style.
Here’s a comparison of the blog with a random paperback:
https://user-images.githubusercontent.com/1711539/200132811-ef552784-6f3a-4ed7-a160-ec7b5bd593b7.jpeg
Book’s font seems to be larger (default settings on both the book and iPad)? And that despite books weighing font-size against the size of the book itself.
That is good feedback, thank you. You’re right, I’ll try to be kinder.
I got it in my head that it was me against the world on this one, a lost, windmill-tilting cause*, so I came on strongly and frustratedly. I didn’t think people would see my point but several have reached out and said that they have.
Thank you for sending the photo. You’re right that those letters are smaller than the book’s. Is that 20px?
*: Not that that would excuse my bad, unkind behavior either. I just really messed up either way and I wanna apologize to you @matklad and others. It’s been a bad week on lobsters (as in, I’ve been impatient and uncharitable and rude), and I’ve removed it from my feed reader so I can take a break.
Thanks, apology taken!
It’s font-size 22px on iPad Mini 5. But Garamond I am using looks smaller at a given font-size than other fonts. Which … might be the answer? It looks like I might have messed up line height: it’s 1.5em, which is recommended, but if Garamond is smaller….
(Line-height is thet leading between the lines so I’m responding to the font PX here.)
Whoah, that explains a lot actually! If 22px looks that small on your device, 16px must indeed look ant sized. I can see why that is rough. But on the flip side of that, increasing it on just one size wouldn’t help you when visiting other sites. If you hit the li’l aA in the address bar you can increase your font size. I use 100% on the normal mode (and a lot smaller in reader mode, since reader mode’s default is bigger than 16px).
Thanks again for calling me out earlier
In such cases, you might reconsider whether it’s worth fighting on this particular issue. Sometimes it’s easier to just adapt to the way that the rest of the world has chosen, if you can. I used to modify my browser’s default font size to suit my own needs (remember, I’m visually impaired). But at some point, as forcing my own font size at that level caused more problems and as page zoom got better, I gave up and just started using page zoom. (Also, I now often use a screen reader for web browsing, so often I just don’t care about font size.) It doesn’t really matter who’s right or wrong; tilting at windmills isn’t healthy.
While I deeply regret my tone and rhetoric, I haven’t changed my position.
I’m not arguing against page zoom, and I’m aware that there are plenty of websites out there where adjusting fontsize gives wonky and buggy results. (My advice is meant to prevent those kinds of bugs.) I don’t think the site level is the right place to set this.
We don’t want another meta window viewport situation where old web suddenly gets declared broken unless they add this new tag that everyone suddenly needs just in order to look normal.
If the rest of the world collectively ends up wanting to bump the font-size, that should happen on the spec level, browser level, or device vendor level, and overridable on the user level.
16px is also a device-dependent size (since it’s based on (logical) DPI, not inches or millimeters) as @matklab showed with a device photo where even 22px was small.
Also, the world hasn’t changed yet; the most often recommended font size is still 16px. As I said, I mistakenly thought I was alone against the windmills. It turns out that that’s not the case (which is one of several reasons why I should’ve been a hell of a lot kinder and more patient).
In fact, that commonly given “best accessibility” advice (“set it to 16px”) is less future proof than my advice which is to just leave it alone, since the default is already that currently recommended 16px, and if the device default changes, your site will automatically update with it. Let’s say everyone decides the default should be 42 “frobnication units” all of a sudden, well, if you’ve left it to the default, then it’ll be the default.
(This is also why I often define other elements in terms of em (or sometimes rem), so they’ll adapt along with the font size.)
Important point that its not only device, but font as well. Here’s the same paragraph at 16 pixels in Garamond and Arimo:
https://user-images.githubusercontent.com/1711539/200141186-60c47b82-8e1f-414f-8fb7-4df7897101a8.png
Correct.
This is why I’ve mentioned Verdana in this context since it was pixel-hinted with a weird ex height.
There is actually a unit in CSS that addresses this called ex. It’s the height of a lower-case character (whereas an em based on the width of characters).
Hm, are you maybe thinking about
ch?emisfont-size, andfont-sizeis height (I am not sure of what exactly, my current understanding is that’s the height of the box surrounding glyph, essentially the span between the tallest char liketand the lowest one likeg)From an accessibility point of view, it doesn’t matter what method you use for jacking the prose size up by 25%, whether’s you use rem, em, px, rubber bands, scotch tape, it’s all the same. It doesn’t magically become less of a problem because some self-proclaimed CSS guru tells you to use a particularly shibbolethy size unit. What matters is whether or not you care about user settings.
But it’s imprudent to care so absolutely about user settings that your site looks bad to the vast majority of users who don’t change settings. That’s the point I was making in my earlier comment, though it focused too much on my own situation.
Unfortunately, you’re right that the web is in such a sorry state that there are some settings every single site needs to set, and yeah, I’m talking about meta name viewport. iPhone really messed up there. 🤦🏻♀️
Font-size is not one of those things. If some sites are at 20px (whether the site designer set it with 1.25em or 20px or control-meta-cokebottle doesn’t matter) and some are at 16px, the web is gonna be left in a mess where you’d have to tweak your settings for every single site.
If humanity as a whole has collectively gone mad and suddenly wanna jam up the text size to almost twice that of most books or magazine, the way for them to do that is either individually as readers on the user settings level, or collectively on the device-designer or browser-designer level. The worst place to do it is on the site-designer level.
This is non-sequitur to me. You just set the font size for the body to 1.25rem (=20px), and it’s solved. I agree though that in practice px vs rem doesn’t matter, and you can use whatever is more convenient for you.