6 ms·

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

• compressedgas 3y ago
  You can change the base font size in the browser settings.
• pestatije 3y ago
  HN displays plain text at 12px in my desktop
  • rob 3y ago
    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.
    • 11235813213455 3y ago
      I'm using 125% for hacker news, which does 15px, so 16px is totally fine for me
  • Brajeshwar 3y ago
    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!
    • PokemonNoGo 3y ago
      What's the 5k 17"? Any good?
      • Brajeshwar 3y ago
        Sorry Corrected. You knew it was a typo, didn't you? ;-)
        • PokemonNoGo 3y ago
          Noooo I was honestly excited for a portable external 5k screen or something!
• carlosjobim 3y ago
  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.
• eastbound 3y ago
  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?
  • medstrom 3y ago
    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.
• karaterobot 3y ago
  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.
• xnx 3y ago
  The best font size to set in css is no size.
  • harshreality 3y ago
    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).
    • MatthiasPortzel 3y ago
      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.
      • harshreality 3y ago
        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.
• MatthiasPortzel 3y ago
  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.
• dorfsmay 3y ago
  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-length-font-size-responsive-web-design/ 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 https://www.imarc.com/blog/best-font-size-for-any-device
  • medstrom 3y ago
    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.
    • dorfsmay 3y ago
      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?
      • medstrom 3y ago
        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!
        • dorfsmay 3y ago
          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.
• tgv 3y ago
  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.
• omgmajk 3y ago
  Less css is almost always better.
• crazygringo 3y ago
  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.
  • amelius 3y ago
    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.
    • crazygringo 3y ago
      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!
      • amelius 3y ago
        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.)
        • dylan604 3y ago
          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.
• jug 3y ago
  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
• rasz 3y ago
  There is a reason browser is called USER AGENT.
• alberth 3y ago
  HN has a default font-size of 10pt (which equates to 13px/0.8em).
  • cantSpellSober 3y ago
    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 ;)
    • alberth 3y ago
      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.google.com/chrome/answer/96810 https://support.apple.com/en-gb/HT207209 https://support.apple.com/en-gb/HT207209 https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages https://support.mozilla.org/en-US/kb/font-size-and-zoom-incr...
      • cantSpellSober 3y ago
        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.
        • mrob 3y ago
          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.
          • cantSpellSober 3y ago
• d3layd 3y ago
  I typically make my body text 18px by default for improved readability
• cantSpellSober 3y ago
  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.
• ww520 3y ago
  Just use the browser’s default font size, i.e. not setting anything.
• tqwhite 3y ago
  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!).
• JohnFen 3y ago
  Websites should use the default font size set by the user's browser and all other font sizes should be relative to that.
  • cantSpellSober 3y ago
    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.
• arrakeen 3y ago
  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?