Hacker News new | ask | show | jobs
by mleonhard 829 days ago
No! If you mess with the font size, you make your page hard to read for people who adjust their font size in their browser. They set their font size very carefully, to the smallest size they can comfortably read. Your site had better not change that.

Medium.com is the worst offender. Their font size is small and they disable zooming on mobile!

7 comments

I would expect two large groups of user behavior:

1. People who never adjust font size.

2. People who regularly adjust font size as needed.

The first group is helped by a reasonable responsive font size. The second group isn't hindered by it.

Is there really a significant group of people who carefully set their preset font size, but then do not adjust it as needed when they visit a page? It seems unlikely to me. Even if all webpages used your defaults, there’s still no one-size-fits-all preset to pick, since typeface, weight, layout, leading, colors and many other things also impact readability. The tool to take control of all of that is reader mode, which is a great option when a website has screwed up its typography.

> I would expect two large groups of user behavior:

I think you're missing:

3. People who set the font size once, when they configure their browser, to their preferred font size and expect, for some weird reason, that this will be respected!

> The tool to take control of all of that is reader mode, which is a great option when a website has screwed up its typography.

That would be great, if there wasn't a huge correlation between websites that screw up their typography, and websites that use an ungodly mess of nested `div`s and javascript-based content rendering that breaks reader mode.

On Firefox there's a preferred, minimum and maximum sizes. If you want sites to respect it, you set the minimum, otherwise it's a suggestion.
That third group is small enough that if it is impractical to properly support all three, they are the ones that will be ignored first.
I set the text size on my mobile browser. You'll understand as you get older and your devices keep getting more pixels.
I do too, and I’m in group #2. Are you saying you’re not?
No, I set it one for each device, then I never touch it again. So I'm am the third group that you doubt exists.

I don't want to fiddle with it. I read text on my phone, I have a preferred size to read, I shouldn't have to change it more than once. The few sites which end up too big or too small I read begrudgingly. Can I even set font size per site?

Pinch zoom doesn't work because now I have to pan left and right for each sentence?

I'm totally with Karellen on this.

At least in safari, you can hit the AA button and increase the font size there.
All CSS font sizes are already responsive because CSS pixels are an abstract concept. Adding your own hacks on top of that instead of respecting system settings is counter-productive.
This method uses the root font size as the base and therefore scales with the user's custom setting.
The point of the user's custom setting is that you don't need to scale with it. The user's custom setting is the font size they want! That's why they set it.

If the user wants a different root font size, they'll set it themselves.

If every site used the same font, maybe. But different font faces vary in readability at the same size. Also, we still have to set sizes for things like titles, subtitles and other elements to create a hierarchy on the page.

'Don't resize my fonts' is such a narrow view of whole range of design considerations.

font size needs to scale because font size can also affect contrast, unless the user is setting custom font size per site it will not be adequate for the user to set the custom font size for all potential situations.
The vast majority of users don't know how to adjust the font-size.
Is that just because they've never tried to figure out how, because the default font size works fine for them? In which case, the answer is still not to change it.
Unfortunately, while making a site, I can't query for "does the user set special preferences" in CSS.

I use somewhat similar formula in one project to create a common baseline font size that 1) does not break with viewport size changes 2) remain legible for baseline user 3) gives good base value to scale UI elements by rem/em units.

Of course it's also a project where the user does not have a chance to mess with font size anyway for the main user, but I'd reuse the formula elsewhere.

Wish I could query the browser if the user has specific preferences, just like with "Dark mode"

You don't query for it; you don't override. Either the setting is custom and desired, or it's default and it hasn't been adjusted because it's fine.
My personal experience is that the default is usually wrong, especially when I move between different displays. I end manually zooming in/zooming out a lot.

Meanwhile using the default size + CSS keyword size modifiers (large/x-large etc.) ended up on breaking on the project I mentioned, especially after for all practical purposes we had to deal with the fact that claims of single display size & resolution to target weren't actually delivered, and when client also asked about possibly opening the interface from portable devices.

> My personal experience is that the default is usually wrong, especially when I move between different displays. I end manually zooming in/zooming out a lot.

Then fix your setup. Campaing for better browser defaults. Do whatever it takes, but don't add hacks with hardcoded (=faulty) assumptions to your websites.

Sadly, I agree that browsers have forgotten what defaults are for. Instead of prvoiding something useable for the user, default CSS has turned into a nearly completely abstract set of values of relevance only to developers.

But that situation should be fixed on the side of the Web browsers, not every website's author.

OR, the setting is default and it hasn't been adjusted because the user doesn't have the faintest idea how to adjust font sizes.

Which I suspect is the case for the majority of end users.

The responsibility for making sure the default is reasonable for those users is the browser vendor, NOT each individual website.
> Wish I could query the browser if the user has specific preferences, just like with "Dark mode"

You can't query that with dark mode since there is no "no-preference" in the spec and the "preference" that browsers expose normally has not been influenced by the user in anyway. You should still respect the indicated dark mode preference because the user can influence it to set their preference for all sites. Same with the font size.

For me, HN is one of the hardest to read on default zoom.
It's a real shame the site is never improved due to the captive market and lack of need to make things better. I am constantly downvoting on mobile when I mean to be upvoting for example, surely they could just make the clickable area bigger.
I also sometimes wish this site got an overhaul, but then I look at the new Reddit layout and feel glad HN hasn't changed like that.
That's the most slippery slope argument possible. "Whoa can't refine the hit state on two arrows by a few pixels! The whole site might become anew Reddit!"
I think the argument is more “if I had to choose between the two extremes, I'd definitely prefer this one” than the slippery slope of “I don't want change because change might lead to abomination”.
Yes completely, I can't understand why Reddit hate their users so much, I find the site totally unusable and I often just leave immediately if I visit it!
I use a Safari extension to add my own CSS and edited a Stylish package that already existed to update the design a bit. On iOS and iPadOS I use Hack. https://apps.apple.com/us/app/hack-for-hacker-news-reader/id...
That’s interesting; this seems like one of the better mobile sites to me. I mean it is just a column of text. I don’t really care that much if I hit the wrong voting button, though. I’m just one little signal, if my inputs are slightly stochastic it shouldn’t matter too much. If I really love a comment I can zoom in a bit to hit the arrows.
Then change your DPI scaling factor to match your display size and viewing conditions. HN has a perfectly reasonable font size.
There are exactly 2 websites where I feel like I need to increase my front size, HN (140%, no less) and old.reddit.com. Every other website I use looks fine.

And I'm not changing the font size on every website I visit for the rest of my life just so that HN can display properly at 100% zoom.

Exact same boat. HN font size is outrageously small.
Same here, and for this reason I prefer Firefox because it remembers the zoom size on a per domain basis instead of a tab basis.
Chrome and Safari do this too.
Lol yep, I have HN on 180% on my 4K screen and even then the text is fairly small
Then something in your setup is wrong. How many pixels your screen has is irrelevant, as long as your setup isn't broken CSS pixels should be (roughly) the same physical size.
It's 9pt, most recommendations I see are between 14-16 for body text. I usually have HN on 130% in my browser.
Browsers have 16px font as the default. HN is set to half.
"just change your settings for your whole monitor for every site you visit because HN has the _perfectly reasonable_ font-size of 9pt."
Laughs in pinch to zoom which works for zooming into images as well. I just really hate those websites that disable this and the regular zoom.
I actually liked it more when browser zoom affected only the font size and images were left 1:1 - for a normal Desktop usage anyway.
Browsers should definitely support both, they are very different features.
I know that Safari has two zoom modes, one which zooms the whole page and one which zooms just the text, leaving everything else intact.
If only CSS supplied some sensible keywords based on the user's preferences, so you could just ask for say a medium, large, or x-large font.

Of course CSS actually does. I've found using font size keyword and rem units can make a UI that scales with user preferences quite possible. Not _easy_ of course, but possible.

Actually, Medium—the app, at least—does have an option under "Display settings" that lets you switch between two font sizes that are almost imperceptibly different...
Full-page zoom won already. Browsers all make it very difficult to even scale the font size without zooming the page (Firefox is the easiest, with the setting buried in a submenu as a toggle). And frankly, scaling just the fonts but leaving the rest of the layout is a bad experience: scaling just the font size often breaks the layout, particularly around interactive controls like buttons and tabs. There are two good paths to accessibility here: full-page zoom, and reader mode.