Ask HN: Best Fonts to Use on Websites?

10 pointsby ireallywantthat3년 전15 comments

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

15 comments

    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.

cebert3년 전

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.

speedgoose3년 전

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.

cpach3년 전

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

speedgoose3년 전

It’s a system font on many devices but Roboto is a nice default.

https://fonts.google.com/specimen/Roboto

I also like IBM Plex Sans.

https://www.ibm.com/plex/

LPavearoadi3년 전

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

I assume it's an Apple knockoff, or maybe even an original.

I recommend it highly, especially for eBooks.

meristohm3년 전

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.

DamonHD3년 전

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.

nicbou3년 전

I self-host fonts. They’re around 45kb in total. It’s worth it.

DamonHD3년 전

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.

nicbou3년 전

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.

stephenr3년 전

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.

LPavearoadi3년 전

Disagree. Helvetica.

DamonHD3년 전

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.)

LPavearoadi3년 전

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

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.