Live data from Hacker News

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

news.ycombinator.com

1–10 of 13 posts

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

#1
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?

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

#2
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

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

#4
post #3

In my opinion, Georgia serif, black-on-white text, large font size, and short lines. Lines should not be longer than 110 characters.

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.

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

#5
- 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

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

#6
post #2

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

Love your site!

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

#7
post #5

- 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 f…

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.

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

#10
post #6
post #2

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

Love your site!

Thank you so much! That's very nice to hear.
Post reply on HN