Why are fonts on websites so small?

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

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.

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.

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.

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.

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

"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.

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.