Ask HN: Why are fonts on websites so small? | Hacker News Reader

Ask HN: Why are fonts on websites so small?

38 pointslinkdd44 comments

I find myself zooming up to 150%, sometimes 175% on almost every website out there, HN included. Even my desktop graphic settings are set to 125% UI scale.

Small fonts make me less tired at the end of the day, as I spent a lot of time reading documentation and whatever.

I usually sit at 1 meter from my screen, but even when I use my laptop at 50cm from the screen, it's still too small.

I don't have a bad eyesight either, as I have no problem reading books, which have a good font size IMHO.

I was just wondering, how many people out there is like me, zooming everything to have an easier time reading.

View on HN

If no one is going to say the obvious answer, I will:

You sit further away from your screen (relative to your screen size), than the average user. Let’s work backwards:

Assume you use 150% zoom on average. And you sit 100cm from computer screen. Then I predict an average user would sit 100cm/1.5 =about 66cm from same screen.

edit: or a screen with the same PPI or pixel density

This is it. There is no web standard where you can pick a font size based on the apparent size to the user (e.g. using moons as a unit)

It's getting better.

I remember just a couple of years ago, many websites had super small fonts with grayed text. SUPER hard to read.

Now a lot of sites are using minimum 1 rem fonts and even 1.1 and 1.2 (16 points and up).

HN is pretty bad in this respect. I can't read it unless its zoomed in 2x.

What was with the gray text on websites? It was absurd, I chalked it up to designers using Mac screens at the time?

Some study said black on white wasn’t as readable as off black on off white. Of course everyone took it to mean make gray on gray.

I think there was a time where people thought #FFFFFF backgrounds and #000000 text was boring. Probably influenced by http://bettermotherfuckingwebsite.com/ which was being used as CSS minimalist best practice for some reason.

And there were tools like https://webaim.org/resources/contrastchecker/ where you can check whether your gray on gray meets accessibility guidelines.

So designers would hug as close to accessibility guidelines as possible, as a show of skill.

Then there were memes like this going around: https://www.boredpanda.com/designer-price-list-client-helps-...

So people decided to trust the designers to do their jobs and nobody brought up the obvious downsides of gray on gray. And if they did, the designer would point out that it meets WCAG AA requirements, which is safe for disabled people. Who is the PM to argue with the expert who knows their data?

Bad designers trying to imitate what they thought was the "Apple look". However, if you actually go to any Apple site and look, you'll find that the "gray" thing is largely only for headings and short text snippets (usually at a larger font size to boot). Long-form text (e.g., developer docs) is, and always has been, in a good high-contrast color scheme.

Example:

https://developer.apple.com/documentation/webkit/wkwebview

Set the OS to a higher scaling DPI. I use 150%. Then, in the Firefox browser uncheck "Allow pages to choose their own fonts, instead of your selections above" this will allow all websites to display nice legible text. You can also override the colours from grey to black as well if you want to.

For the browser, use a font with a tall x-height; Verdana is great for surfing the web.

Atkinson Hyperlegible is easy to read, but it ends up looking terrible on most websites because they don't design for anything outside their blessed fonts.

The first time I do when setting up is adjust the fonts. I limit the size to a very narrow band. And then basically lock it so only a couple my favorites fonts will work

Designers must hate me but I don't care. Their designs suck

This is so funny to me. So many websites have ridiculously large text and I have to zoom out to 66% or 50% to read them comfortably. I want to ask the opposite question: Why are fonts on websites so large?

HN is one of the few sites left that seem to have a normal font size.

Conversely, I sit at about 50cm from my boring 24" 1920x1080 monitor, and HN is hard to read below 130% zoom. On my laptop, higher resolution and less inches, it has to go up to 150%. I can't imagine using HN at 50%, I need my eyes for other things.

Edit: tried it just for kicks. The mouse cursor fits three lines of text. Something is seriously different between our setups.

I have a 1920x1080 setup and my mouse cursor fits 1.2 lines of text. No DPI scaling or other shenanigans. I can read HN very comfortably at 100% zoom.

Maybe this is the "adult supervision" thing everyone is talking about.

You probably have a high DPI monitor and need 150% display scaling from your OS. Devs usually have large monitors and will not notice the issue when they decide what font size to use on their websites.

Also 1 meter from the screen would be way too far for me personally. I use 1.5x scaling in windows and my eyes are ~0.5m from my main monitor (27” 4K 120hz).

Design matters more than accessibility.

Same reason we have low contrast between backgrounds and text.

Same reason very few people add alt-text for images.

Same reason webpages re-flow terribly (not to mention how the formatting goes to pot if someone doesn't use their blessed gfont).

Same reason we get custom fonts when it's demonstrably easier to read fonts you're familiar with.

Designers rule the roost, with their 40" color-calibrated displays. Anybody with slightly less than perfect vision can go rot for all they care.

Sorry, a bit of a rant there. But this honks me off so badly. I use override fonts and sizes, and somehow designers still find a way to fuck that experience up.

On a related note, zooming on mobile web is a fairly poor UX. You pinch to zoom, and then have to scroll sideways back and forth to read something. It would be nice if you could pinch to zoom, and still respect the viewport desktop is better at zooming in this regard.

I usually double tap and it fits to my screen fairly well. HTML in iOS chrome.

When double tap works, it also adds massive latency to every interaction: https://developers.google.com/web/updates/2013/12/300ms-tap-...

That’s why most websites disable it.

Interesting, this doesn't seem to work on Android Chrome, at least not on HN. Although you got me poking through the settings, I discovered you can enable text-scaling in the Accessibility settings, and that works! Thanks

Opera on Android solves this by forcebly reflowing text blocks to fit screen whatever zoom you use. Can't live without it, and have no idea how others do

On iOS you can press the aA button to do the kind of zoom you want.

Mostly I just want websites to have some internally-consistent set of sizes so that I can Ctrl-scroll to set and then Firefox will remember what's the right size for that website and then I don't have to edit that setting again. (I view HN at 90%, for what it's worth.)

But if the user has set a preferred default font size, why on earth would you want a website to override it?

I've actually had the opposite experience generally. Something like "Default for Display" on my 2019 MBP makes everything seem so large and zoomed in that most websites are zoomed out to around 75%. (Now that I think about it, I do the same on the iPhone 13 Pro!)

It's not even just websites, I feel like the default padding around macOS windows is MASSIVE on low resolutions. Tons of wasted space.

I think generally we've gotten a bit lazy with "true" responsive design when it comes to taking advantage of the space provided, but I also know first hand how difficult it can be to make one design work for everyone. I guess the real solution is to make it easy to adjust designs for personal preference, or even better, a way to templates the process so that certain elements are resized the way you like it.

In Firefox, you can change the default zoom level by going to about:config and setting the value of layout.css.devPixelsPerPx. If you want things larger, try 1.2 or 1.5. If you have a 4k or larger display, try 2.0.

Not sure about the sites you're visiting, but I keep Hackernews at 175% so I can read better

Hah, I had to check.. I'm on 175% too!

133% here lol

170% here

"Why do I prefer larger font sizes?"

My personal experience and opinion: With aging, I've found bigger fonts more pleasant as-a-whole to look at And, to digest. Not regarding bad eyesight, but I think it has something to do with age-related cognition changes and/or allowing oneself to notice parts of their life's little annoyances that are extremely simple to fix (ctrl+plus).

"Why are fonts so small?"

My guess: People who design, don't dare deviate from the norm.

"What about the technical things?"

Some of this is assume-work, some of it is knowledge: Monitors provide their physical size to the operating system, which derive the used DPI from that, and the current resolution in use. This cannot be freely chosen. The reason is that while font's do scale freely, raster graphics don't. And if the scaling is set such, that raster graphics don't scale pixel-perfectly, the result looks muddy.

I think this combined with the fact that there can be widely differing physically sized screens, old non-scalable applications, and history of designing for something like 72 or 96 dpi results in.. well.. "safe font sizes".

I wondered about that too. Firefox has a preferences screen that purports to let you set the minimum font size to N points (N=14 or 16 or whatever). Yet somehow it still allows sites to override that preference and make the fonts smaller. That has always seemed like a bug to me.

Why? Historical reasons. Early websites typically used 12px text or smaller, because on a 640x480 (VGA) or 800x600 (SVGA) screen that was readable but not too big, and that stuck even as screen resolutions got higher. Though to be fair, people have been complaining about too small fonts forever. Browser defaults were 16px, but designers hated that and always wanted 11–12px body text.

One thing I used to hassle designers about in the early days of web dev was how they wanted their designs to respond when users resized the text. Early browsers did text-zoom instead of page-zoom, so layouts would often break when users resized the text.

I've made separate browser bookmarklets to independently enlarge fonts, switch to a serif font, fatten margins, change colors to black-on-white, and invert all colors (dark mode)--because most web designers are barbarians.

Different sites need a different mix of buttons. Theoretically, "reader mode" would fix most of this, but chrome & firefox neuter it to some degree for obvious reasons.

I'd also add that bitmap fonts rendered at the right size can be far more legible than truetype/opentype ones at larger size thanks to the hinting & antialiasing tax. I really like GNU Unifont.

a) Higher resolution displays and style sheets that do not scale... b) changes in browser compatibility may require you to adjust your html declaration, doctype and meta tags as well.

I've been adjusting my web pages changing the body font size from a fixed point size to an em value, most browsers do some scaling when that is the case, also I do a minor size increase as well. Now most pages get a desktop font-size of 1.2em with mobile width adjusting to 1em, and print with .7 em..

My take is that we design for 24" or 27" display that are only 1080P!

So very low pixel density on overly large physical displays!

There's also the shitty old displays that you get in corporates.

I'm the same way on my 12" WUXGA laptop panel and zoom every page to 150% by default due to the pixel density. This is kinda tangential to your question, but try this browser extension to make your life a little easier: https://addons.mozilla.org/en-US/firefox/addon/zoom-page-we/

I find myself scaling text down slightly a lot (without scaling images)…though I did go through and increase the base size on my own site recently.

If you're on Windows, configure ClearType on every monitor. It helps a lot with legibility.

Instructions: https://www.laptopmag.com/articles/adjust-cleartype-windows-...

I’m always baffled at how HackerNews, the cabal of woke devs who regularly turn up their pince-nezed noses at the unergonomic design choices of other companies, has such a hard to read layout itself [on mobile].

The tap targets for voting buttons etc. verge on the need for an electron microscope, you get punished with photons for daring to read in a dark room, and you can’t even use Reader Mode.

Hire a fucking UX person you guys.

Come now. You know Hacker News is always the exception to the rules.

I have HN on 200%, using a 21.5" 1080p monitor myself.

I'm reading this at something like 150%, so yeah.

To speed up page load times

Most websites have too large a font size. HN is an exception. Perhaps adjust your browser settings? It remembers the zoom level.

I do this on the desktop on mobile have no problem. Actually like the increased info density for my consumption style.

Reply on news.ycombinator.com