Ask HN: What is the best font and styling combo for readability on the web?

As I read HN I often come across personal blogs / websites that look great and are visually easy to read, but I change my mind on what is "best" all the time.

Admittedly this is a matter of opinion and the web is not short of opinions, but I'm wondering what users here have found are the most pleasant to read font and styling combinations?

9 points | by duxup 19 hours ago

4 comments

  • evenoroddman 4 hours ago
    I see the same problem with HN tbh. So much so that I built newz.dev as alternative HN reader, meant to be minimal and easy to eyes.
  • dtagames 18 hours ago
    Inter[0] was designed specifically for readability on the web, and you can get all the weights out of a single file.

    I use this trick in my blog[1] to get typographic variety within the same font.

    It's become my go-to.

    [0] https://rsms.me/inter/

    [1] https://davidbethune.com/blog

    • a1ff00 8 hours ago
      Love your site!
  • Elfener 15 hours ago
    - Respect the user's prefers-color-scheme (HN fails this one)

    - Make sure your text is not to small (HN also fails this one spectacularly)

    - Lines should not be longer than like 132ch

    - There should be left and right margins as to not have letters directly on the edge of the screen.

    - For fonts, I prefer that a site just uses "sans-serif", "serif", and "monospace", but most people don't choose their browser default fonts, so for a general audience I'm not sure on this

    • brudgers 6 hours ago
      HN fails this one…

      Which suggests that content wins and form just needs to be good enough for the intended audience.

      To put it another way, san-serif is usually the best font absent a brand identity because it is the simplest thing that might work.

      The problem is there’s no shortcut to typographic expertise. Design is a process not two tips and one trick.

  • bjourne 17 hours ago
    In my opinion, Georgia serif, black-on-white text, large font size, and short lines. Lines should not be longer than 110 characters.
    • andrei_says_ 15 hours ago
      Because the screen medium is different from paper (emitting light vs reflecting light) pure black on white is a bit intense to the eye.

      General recommendation is to reduce contrast a bit.

      A good starting point would be #444 for the text and #eee for the background. #eeeee6 would warm the background a tiny bit.

      Recommended line size is 65-85 characters, line-spacing at 1.3-1.5.