6 ms·

Ask HN: Best Fonts to Use on Websites?

Apart from "system" fonts, which fonts do you think will make websites/blogs look instantly beautiful?

throwaway154 3y ago
body { font-family: sans-serif; font-size: 16pt; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: serif; } That's readable, thus a minimum standard for beauty. Use of colour, spacing, case, image then become important for making powerful prioritisation, focus, structuring absorption/presentation of your message. A specific font may or may not be part of this, and advantage of system fonts is not just their speed, but their familiarity - this can also be a disadvantage if intentionally seeking to disjoint a user or place them in a context associated with the font.
cebert 3y ago
I understand there's an ongoing debate about using web fonts versus system fonts due to privacy concerns. I've experimented with disabling web fonts while browsing, but found that many sites become almost unusable without them.
- speedgoose 3y ago
  It’s easy to host nice fonts on your website. You don’t have to send your visitors data to Google or adobe or whatever CDN.
DamonHD 3y ago
I like sites to be readable, quickly, and without leaking too much information to third parties. 'Beautiful' Web fonts tilt against all of those metrics.
- LPavearoadi 3y ago
  Disagree. Helvetica.
  - DamonHD 3y ago
    I don't know whether you are claiming that Helvetica is beautiful or not! In any case I think that it is available in most browsers locally, with a fall back to sans-serif easy if not? I haven't looked lately. I value locality and speed with a font that has been picked to work nicely for the browser without trying to wrestle every pixel. (Yes, I have been an editor, but I try to pick the readability battle first.)
    - LPavearoadi 3y ago
      I was, yes. I think it's one of the most beautiful ever. It's so readable, both in print and digitally. https://www.fonts.com/font/linotype/helvetica https://www.fonts.com/font/linotype/helvetica It was once widely available on OS/browser, but is increasingly not. It's not on Win 11 or the latest Chrome, for example. I glossed over your performance criteria, however; shame on me.
- nicbou 3y ago
  I self-host fonts. They’re around 45kb in total. It’s worth it.
  - DamonHD 3y ago
    That sounds pretty good. I'll think harder about where I should consider doing the same! But if you are self hosting then it ain't a "Web" font IMHO, and you contain the time/latency and page-weight cost, and probably eliminate the data leakage.
    - stephenr 3y ago
      Web fonts are just fonts downloaded on-demand by the browser based on css rules. Hosting the font file(s) on your own domain doesn't suddenly make them not webfonts.
    - nicbou 3y ago
      It's a Google font, just without Google infrastructure. The trick is to download a subset of the font, to use preloading, and if possible early hints. Then you barely know that it's there.
speedgoose 3y ago
It’s a system font on many devices but Roboto is a nice default. https://fonts.google.com/specimen/Roboto https://fonts.google.com/specimen/Roboto I also like IBM Plex Sans. https://www.ibm.com/plex/ https://www.ibm.com/plex/
cpach 3y ago
I like this showcase: https://beautifulwebtype.com/ https://beautifulwebtype.com/
LPavearoadi 3y ago
I adore this font for everything, especially eBooks, but I haven't tested it against a responsive web UI. https://www.dafont.com/apple-garamond.font https://www.dafont.com/apple-garamond.font I assume it's an Apple knockoff, or maybe even an original. I recommend it highly, especially for eBooks.
meristohm 3y ago
I far prefer fonts that are accessible to the most people. Anti-dyslexia fonts might be too odd at first, so I avoid using those for now. I've read that sans-serif is best for text on screens, and serif for text on paper. The font should err on the side of larger rather than smaller. Functional is beautiful.

Apart from "system" fonts, which fonts do you think will make websites/blogs look instantly beautiful?

body { font-family: sans-serif; font-size: 16pt; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: serif; } That's readable, thus a minimum standard for beauty. Use of colour, spacing, case, image then become important for making powerful prioritisation, focus, structuring absorption/presentation of your message. A specific font may or may not be part of this, and advantage of system fonts is not just their speed, but their familiarity - this can also be a disadvantage if intentionally seeking to disjoint a user or place them in a context associated with the font.

cebert 3y ago

I understand there's an ongoing debate about using web fonts versus system fonts due to privacy concerns. I've experimented with disabling web fonts while browsing, but found that many sites become almost unusable without them.

speedgoose 3y ago
It’s easy to host nice fonts on your website. You don’t have to send your visitors data to Google or adobe or whatever CDN.

DamonHD 3y ago

I like sites to be readable, quickly, and without leaking too much information to third parties. 'Beautiful' Web fonts tilt against all of those metrics.

LPavearoadi 3y ago
Disagree. Helvetica.
- DamonHD 3y ago
  I don't know whether you are claiming that Helvetica is beautiful or not! In any case I think that it is available in most browsers locally, with a fall back to sans-serif easy if not? I haven't looked lately. I value locality and speed with a font that has been picked to work nicely for the browser without trying to wrestle every pixel. (Yes, I have been an editor, but I try to pick the readability battle first.)
  - LPavearoadi 3y ago
    I was, yes. I think it's one of the most beautiful ever. It's so readable, both in print and digitally. https://www.fonts.com/font/linotype/helvetica https://www.fonts.com/font/linotype/helvetica It was once widely available on OS/browser, but is increasingly not. It's not on Win 11 or the latest Chrome, for example. I glossed over your performance criteria, however; shame on me.
nicbou 3y ago
I self-host fonts. They’re around 45kb in total. It’s worth it.
- DamonHD 3y ago
  That sounds pretty good. I'll think harder about where I should consider doing the same! But if you are self hosting then it ain't a "Web" font IMHO, and you contain the time/latency and page-weight cost, and probably eliminate the data leakage.
  - stephenr 3y ago
    Web fonts are just fonts downloaded on-demand by the browser based on css rules. Hosting the font file(s) on your own domain doesn't suddenly make them not webfonts.
  - nicbou 3y ago
    It's a Google font, just without Google infrastructure. The trick is to download a subset of the font, to use preloading, and if possible early hints. Then you barely know that it's there.

speedgoose 3y ago

It’s a system font on many devices but Roboto is a nice default. https://fonts.google.com/specimen/Roboto https://fonts.google.com/specimen/Roboto I also like IBM Plex Sans. https://www.ibm.com/plex/ https://www.ibm.com/plex/

cpach 3y ago

I like this showcase: https://beautifulwebtype.com/ https://beautifulwebtype.com/

LPavearoadi 3y ago

I adore this font for everything, especially eBooks, but I haven't tested it against a responsive web UI. https://www.dafont.com/apple-garamond.font https://www.dafont.com/apple-garamond.font I assume it's an Apple knockoff, or maybe even an original. I recommend it highly, especially for eBooks.

meristohm 3y ago

I far prefer fonts that are accessible to the most people. Anti-dyslexia fonts might be too odd at first, so I avoid using those for now. I've read that sans-serif is best for text on screens, and serif for text on paper. The font should err on the side of larger rather than smaller. Functional is beautiful.