Ask HN: Should websites on desktop have a default font larger than 16px/1rem? | Hacker News Reader

Ask HN: Should websites on desktop have a default font larger than 16px/1rem?

15 pointscodingclaws57 comments

I feel like on mobile 16px/1rem is perfect, but on desktop it may be too small.

Absolutely not.

Users should set the zoom level of their operating system to whatever makes user interface elements the optimal size for them -- menus, dialog boxes, filenames, toolbars, and so forth.

Then 12pt/16px will be perfectly readable as it was always designed to be.

I'm sick of websites where the body text is four times the size of the text in my menubar (by area). This trend has become increasingly common among tech bloggers and I'm constantly having to zoom out in my browser just to bring the text down to a reasonable size.

Stick with standards and let users modify zoom levels as they desire. If everybody follows the same standard, then users don't have to keep changing their zoom levels per site.

At some point we'll have AI that reformats pages to whatever size the user wants, and in whatever style the user prefers. This is what "web designers" are pushing us towards anyway.

Honestly you don't need AI for that at all.

Come to think of it, that's not a terrible idea for a browser extension -- figure out the median text size, figure out the visual apparent size of the font by drawing a few characters to a canvas and measuring them, and then set the page zoom to compensate.

Voilá -- you never have to zoom again!

Unfortunately, web designers will find ways around that as they have an inborn drive to show us things the way they want us to see things regardless of our preferences.

Therefore, I think the only true solution is to work from rendered pixels, and from there transform into whatever the user wants (font size, style, no advertisements, etc.)

Imagine a printed magazine you just bought from a newstand that allowed you to change the font, font size, colors, layout, and even the text in the body of the articles. Why is a website different? With a magazine, if you didn't like it, you just didn't buy it. With a website, you could just close it, or you can modify every single pixel and character on the site. So we went from take it or leave it to you can do whatever the hell you want with it.

So just because you don't agree with someone else's style doesn't mean it's wrong. It's not like it is preventing you from reading it. You're just upset you might have to do a little bit of work on your end and it's not being served exactly like you want it to be. The entitlement in today's society is beyond belief at this point.

It's not entitlement to expect a "user agent" (formal name for a web browser) to serve the user.

Who said it's not able to do that? You can literally change everything about a website using your "user agent". You can change the CSS. You can remove elements from the DOM. You can change the text within so that it says something that wasn't actually there. There's nothing that you can't do with it. You just have to actually, you know, do it. That's the entitled part. Complaining about it even though you already have the ability to change it to the way you like it. I'm one step away from being at the "get over yourself" commenting. It's a small step though.

Changing the CSS is not what I'm proposing here. If most users changed the CSS, then web designers would go out of their way to make it impossible.

To solve this once and for all, you'd have to take the rendered page, and turn it into something the user wants.

Advantages: 1. the user agent may apply the same general preferences to many different web sites (which all work in different ways and would require different CSS); 2. anything that's already rendered in images can still be transformed into a style preferred by the user. 3. it is technology independent so you could even use those style transformations in AR-goggles (e.g. to change the text on billboards) or on a TV.

That's reader view and you can set your browser to enable it for all websites by default. It's great!

> let users modify zoom levels as they desire

A common reply, but that requires setting a zoom level on every site across all browsers on all devices.

A better solution for users is setting a legible size, and respecting their choice of base font size in the browser.

> the body text is four times the size of the text in my menubar

This is the same symptom of type being too small: poor design. Communicate the importance of legibility with your designers to help mitigate.

Or even just remembering the difference between a web application, a web art project, a document being hosted on the web.

Applications are meant to be used and may need to be zoomed to maintain coherency among various widgets and controls. Likewise, art projects need to preserve their design intent.

Documents, meanwhile, are meant to be read and the user is going to best know what makes things legible for them. Ideally, publishers hint some presentation ideas but allow and anticipate that the user have final control, like you suggest.

False dichotomy. "Documents" are allowed to have design. They should not have bad design (bad in this case referring to legibility).

Is HN a web application, an art project, or a document? IMO it's a mix of all of the above.

it's definitely not an art project without a generous stretch.

Is there no art to successfully accelerating startups?

That's quite generous. Accelerating startups is a business, a greedy one at that, many times involving manipulations, lies, scams. No, this isn't an art.

...and yet here you are :) It's a stretch, I'll concede. It involves creative or imaginative talent expressive of technical proficiency, or conceptual ideas however.

At the very least, setting the default header color to orange is an artistic decision.

I mostly include it for the sake of argument, the lines blur between the categories. Being a "document" is not a reason to avoid adding CSS.

Re: art, a counter to my argument would be Lubalin's, that we must sometimes reduce legibility to increase impact.

I have a 5K, 27” screen. It’s too small to display 3 paragraphs of text on a webpage.

This trend to increase fonts and margins needs to stop. Desktops and browsers should have more control over how they display windows and text, we shouldn’t leave it to website designers to compensate for every single person’s preference. What’s next, an Age API based on IP location, which increases text size because they assume you’re presbyte?

This effect is driven by the trend in CSS frameworks to increase the base font size for wider windows. I.e. you might have a base font size at 16px, which applies on your "phone" breakpoint, but your "desktop" breakpoint scales this up to 150% or 200%.

This leads to being able to read 5 paragraphs on your phone but only 2 paragraphs on your desktop. I find it insane. Just let it stay at 16px; the result is still easier to read than the text on your phone, so why bother fiddling with that at all?

I'd even sympathize with a controversial take such that the font size should shrink on the desktop, not grow! The desktop is for utility, and info-density is one of the things it can support very well. Proof? My Emacs font is smaller than the base font in Firefox, yet I stare at Emacs text all day. And HN is, apparently, 12px.

The best font size to set in css is no size.

For normal text. Headings and other content that needs to stand out should be sized relative to the main text, but why don't website (and ebook) publishers/designers leave the main body text as default, always? Why make users have to consider adjusting font size separately on every website they visit?

Fonts, too. Everyone has their favorite fonts, but the font a web designer likes has no bearing on what's best or easiest to read for the user. Are they developing a website as an art piece, or to publish articles for real people (not bots) to read?

Ancillary styling for text that needs to stand out, or text that isn't part of the main flow, can be whatever. But I don't even agree with shrinking footnotes anymore. There's no lack of page real estate at the bottom; there's no reason to shrink "back matter" except to imply that you don't expect anyone to ever read any of it (footnotes, index, bibliography, etc. in long-form blogs or books).

99.99% of all websites visits are from people who can’t or don’t know how to change their browser font. Saying ‘don’t set a font’ is equivalent to saying ‘use Times New Roman.’

When the web was created, HTML was meant to semantically describe text documents. But that isn’t an accurate description of the web today. Today, websites have complete control over their own visual appearance.

Websites' default font and size for readable text content can be set under the css for body and then not overridden in more specific tags or classes, so the UA can easily override that without breaking all other areas that need custom fonts and sizes like navigation.

Users not knowing how to change their font or font size is not an excuse for website designers to choose fonts and font sizes whimsically, since they rarely base their decisions on good quality readability data. Browsers and other UAs need to step up and provide meaningful interfaces to choose those defaults at install time, and make it easy (and easily discoverable) to adjust.

Yes, sort of, 19px is a safer bet, but it's complicated. It's counter intuitive but the larger the screen, the bigger the font should be (because it's probably further away).

This article is a really good overview of the subject:

https://www.smashingmagazine.com/2014/09/balancing-line-leng...

This goes right I to details, and the conclusion is that it depends on the distance between the reader and the screen, the eyesight of the reader (which gets worse as we age) and the size of the pixel on the screen:

https://www.imarc.com/blog/best-font-size-for-any-device

My opinion is the exact opposite. I experience 18px as a good font size on the phone, and 12px on the desktop. I'm sure analyses such as the one you quote are missing some important criterion, but I can't put my finger on what.

Maybe you somehow keeping your phone further away from you than the average person? Or have an eyesight condition where the quality decrease quickly with even small distance?

It's possible I sit closer to the monitor than necessary to read most websites, but that's just the thing: I'll place the monitor as close as necessary to read the smallest elements in my OS, such as menu bars.

Think of it as a "weakest-link" principle.

Web pages have no reason to use larger font than the user has in the menu bar, since the user is already sitting at the optimal distance for that font!

Read the second link on my post. A menu bar is one or two word that are easy to read. The recommendation on those posts are for long texts that need sustain attention to be read. The second article shows data of readers reading speed based on font size.

Thank you. Good data, that people read fastest at a text size of 0.3 arc. And I'm taking away that it might be fine for paragraph text to be slightly larger than menu bar text. But a couple of factors jump out at me:

As they said, there's a lot of variability in how far people sit, which is a good time to remember the myth of the average[1]. You set default values to suit the "average" reader, but your efforts might serve a much smaller amount of people than you'd think -- because almost no one is "average". It's good to shoot for sane defaults, of course, but it could distract designers from strategies that would reliably serve all users. To start with, an actual safe assumption is that whoever the reader is, they've made sure that 16 CSS pixels is readable to them (even if it doesn't meet the ideal of 0.3 arc). They might have upscaled the whole OS UI or just sat closer -- either way, 16 CSS pixels still represents a size that's readable to that person. Going too far above this requires making some pretty bold assumptions which risks making users feel they're being treated like idiots or children.

Without sensors that measure physical distance-from-screen, I don't know how we would calculate the visual arcs anyway. We can only hope the user is average. And even if we had such sensors, there are two problems: (1) I'd prefer that iOS/Android just manage the system-wide zoom level, and then individual webpages need do nothing; and (2) it may be great and all to try for 0.3 arc as a default, but if I've scaled it up or down for any reason, I probably want that choice respected, which brings us back to point 1: you can safely assume that the user has adjusted their sitting distance to meet the arc-value they prefer! Yes, they could be idiots and wrong about what would be best for them, but they will still sit closer or zoom out, so you won't get the arc-value you were shooting for anyway! The more you upscale, the more the user downscales. So why fight? Why break expectations?

I don't know which font size represents 0.3 arc my screen, but I'll assume it's about 18 CSS pixels and I often experience that smaller text and tighter line-heights let me digest paragraphs and go through whole documents more quickly. The lower limit is very low, like 9px. I think studies need to split up what it means to "read fast":

If you're part of the majority who read one word at a time and subvocalize every word in your head, then what's ideal is probably very different from what's ideal for a speed-reader. In my experience, my reading speed scales to some extent with the total amount of text visible on the screen! So I want a lot of text on screen. That's why I like the default HN tiny font too. Notably, line-heights above 1.6 absolutely destroy my reading speed and I have to switch to Reader mode or just close the tab. My own website has 1.3.

I guess the same principles apply to reading carefully vs. "scanning"/"skimming". Every user cares about that. I think the people who designed the websites I hate probably just assumed that the user is reading everything carefully, but that makes the website a nightmare for users who are just trying to navigate and find their way around.

-----

[1] Excerpt from https://www.gse.harvard.edu/ideas/ed-magazine/15/08/beyond-a...:

> The Air Force concluded that Americans had gotten bigger over the past couple of decades and they simply needed to update their measurement of the average pilot. With the help of a young Harvard College graduate named Lieutenant Gilbert Daniels, they measured more than 4,000 pilots on 10 dimensions of size that seemed important for fitting into a cockpit — torso length and chest circumference, for example. The thinking was that once they redesigned the cockpit for the average pilot of the 1950s, controlling the plane would no longer be so troublesome. Most pilots, they assumed, would be within the average range on the majority of dimensions and that a good number would even be average on all 10 dimensions.

> “Do you know how many really were?” Rose says. “Zero.”

> Even when just three dimensions of size were picked, fewer than 3.5 percent of the pilots fell within the range defined by Daniels as average. Instead, what Daniels found is that every single pilot had what Rose calls a jagged profile. One pilot with long arms may also have long legs while another may not. Not everyone who was average height (5 feet 9 inches) had the same chest circumference or head size.

> Finally, the Air Force had its “aha” moment: If every pilot had a jagged profile and the cockpit was designed for the average pilot, it was actually designed for no one.

MacOS doesn't look the same as Windows on the same monitor (Firefox on both; no idea about Chrome; I don't care about it). Linux may have yet another view. Perhaps there's even a difference between X11 and Wayland. Don't make too many assumptions what 'desktop' means.

Websites should use the default font size set by the user's browser and all other font sizes should be relative to that.

If you're using relative units (rems) make sure you use them everywhere, like container sizes.

Otherwise the size of the type increases, the container does not, and the line lengths become very short.

Just use the browser’s default font size, i.e. not setting anything.

I think it depends on your font and font weight. Yesterday I had a block of text 16px Roboto 400 and I recommended bumping it up to 20px, since Roboto is kind of a thin font. But on my website body text is 16px.

It also depends on the amount of text. If you don’t have other content on the screen, it’s easy to justify increasing the font size.

NO. i've tossed about posting an "Ask HN" a handful of times asking "Why are font sizes enormous these days?"

i am regularly distracted by sites with huge font sizes, leading me to double check if i'm zoomed in. body texts generally average out to be around 20px, with many even larger.

can someone explain what's going on here? i'm assuming it has something to do with supporting both mobile and desktop, but are that many people explicitly setting the pixel size and/or 150% font size?

You can change the base font size in the browser settings.

Do not set a font size on the root element (<html>). This often overrides a user's choice to increase the base font size on their browser.

Do you need to set a font-size for the p element? You can leave that out and let the visitor use her browser default to determine the size.

There is a reason browser is called USER AGENT.

The only thing that matters is that the type size can be changed by the user. I miss the old days when sites often had a +/- button.

People have different vision. I am old and need it big. You are young and want all the text at once. Sites that don't easily adjust are bad (I'm looking at you mobile Slashdot!).

Desktops should focus on implementing layouts which don’t break when I change my font size. I’ll control how large the font size is. In my opinion 16px is plenty large enough, but that doesn’t matter, it should be adjustable to your preference too.

HN displays plain text at 12px in my desktop

Trust me, I know, it’s one of the few sites I actually have to override in my browser settings and set at 150% zoom.

It made sense in 2007 when your monitor size was 1024x768 but I struggle to find out why @dang doesn’t update a couple of lines in a stylesheet to make this website more accessible almost 17 years later.

I'm using 125% for hacker news, which does 15px, so 16px is totally fine for me

Yeah! The text is extremely tiny on a Desktop (I'm also on a 5K 27”). Here is my only custom style that uplifts HackerNews to my preference;

   :root {
      --font-size: 20px;
      --font-weight: 500;
      --border-radius: 5px;
      --line-height: 1.6;

      --spacing-min: 05px;
      --spacing-mid: 10px;
      --spacing-max: 20px;

      --zoom-min: 110%;
      --zoom-mid: 125%;
      --zoom-max: 150%;

      /* grays  */
      --color-50 : #f9fafb;
      --color-100: #f3f4f6;
      --color-200: #e5e7eb;
      --color-300: #d1d5db;
      --color-400: #9ca3af;
      --color-500: #6b7280;
      --color-600: #4b5563;
      --color-700: #374151;
      --color-800: #1f2937;
      --color-900: #111827;

      /* background */
      --color-bg-cool-1: #eceff4;
      --color-bg-cool-2: #e5e9f0;
      --color-bg-cool-3: #d8dee9;
      --color-bg-warm-1: #fdf6e3;
      --color-bg-warm-2: #eee8d5;
      --color-bg-warm-3: #fffcf0;
    }

    /* HackerNews - news.ycombinator.com */
    table#hnmain {
      zoom: var(--zoom-min);

      margin: var(--spacing-mid) auto !important;
      padding: var(--spacing-mid) !important;
      max-width: 960px !important;

      background: var(--color-100) !important;

    /*  border: 1px solid var(--color-200) !important;*/
      border-radius: var(--border-radius) !important;

      line-height: var(--line-height) !important;
    }

    table.fatitem .toptext {
      color: var(--color-700) !important;
    }

Edit: Typos!

What's the 5k 17"? Any good?

Sorry Corrected. You knew it was a typo, didn't you? ;-)

Noooo I was honestly excited for a portable external 5k screen or something!

Less css is almost always better.

I typically make my body text 18px by default for improved readability

HN has a default font-size of 10pt

(which equates to 13px/0.8em).

And is nearly illegible for people with poor vision, not to mention the smaller sizes used for other parts of the UI. (To say nothing of the poor contrast of several items.) Target WCAG 2 AA.

I love HN but the CSS is outdated. Working on a fix ;)

That's why browsers support zoom levels.

So you can scale the size of the entire page to be bigger (to suit your needs).

https://support.google.com/chrome/answer/96810

https://support.apple.com/en-gb/HT207209

https://support.mozilla.org/en-US/kb/font-size-and-zoom-incr...

I know. I have more than one browser, and more than one device. Users need to set zoom on all of these.

Good forbid I visit a site on a device that is not my own, requiring setting the zoom level again.

Legible design reduces to need to offload this work to the user.

Things like Userstyles and Arc Boosts are reducing the problem too.

In Firefox, zoom level can be adjusted by holding down control and scrolling the mouse wheel. This is a very easy task, and Firefox remembers the custom zoom level for your next visit. I assume other browsers allow something similar.

I know that zooming exists. My phones don't have a scroll wheel, and I use quite a few different browsers.

Zooming on phones typically breaks the layout (making the viewport larger than the screen).

If I don't own the device I'm using, this solution doesn't work at all as well as simply saying a legible text size in the design.

HN has been cleverly designed to ensure that only people who know how to adjust the font size come here.

Huh. I think 16px is pretty much perfect on desktop too, and I thought I was leaning towards large desktop font sizes!

I'm not sure why Hacker News uses this masochistic 12px/9pt font size for all these years though. I mean, it makes sense on a 21" 1024x768 display but that was 20 years ago

Reply on news.ycombinator.com