14 votes

Website Reader Friendly Fonts?

I'm developing a website that will be for the academically inclined. As you know, these people do a lot of reading. So, I wondered if anyone here knew of particular fonts that are easy on the eyes and lend well to long reads.

Got any ideas?

10 comments

  1. mat
    Link
    A lot of it comes down to personal preference. I like sans serif type, but some people prefer serifs. Some people even like 'handwriting' typefaces. Although we don't talk about those people......

    A lot of it comes down to personal preference. I like sans serif type, but some people prefer serifs. Some people even like 'handwriting' typefaces. Although we don't talk about those people...

    Use the "best" typefaces you can. So if you want a sans-serif, use Source Sans rather than some random thing from Google Fonts (Source is on there too). The reason is that readbility is helped, or hindered, a lot by the parts of type design you don't see in the letterforms. The kerning, the hinting and so on - all of which take very different skills to the graphic design of the glyphs themselves. Times is cliche but it's a solidly designed typeface. As, and I hate to say this, is Comic Sans. CS gets a lot of flak but it's a very well made typeface and it's extremely readable. I wouldn't ever set a website in it. But I might offer it as an option.

    If I were you I'd choose one sans-serif, one serif, one of the dsylexia-friendly faces and then I'd offer a style switcher on the site. Let people choose. Let them scale the type up or down, put it black on white or white on black (or, ideally, let them pick their own colours).

    Layout matters as much as typeface, possibly even more so. Wide columns are harder to read on screen (but better on ereaders or print). Lots of fluff around the text makes it less readable. Lots of paragraph breaks makes it more readable.

    11 votes
  2. Arshan
    Link
    I use inter as my main font. I personally find it to be very readable, except at very large sizes. It is a Sans-Serif font that was designed for UIs, but it is still very nice for documents. As a...

    I use inter as my main font. I personally find it to be very readable, except at very large sizes. It is a Sans-Serif font that was designed for UIs, but it is still very nice for documents. As a general recommendation, I second Practical Typography as a solid, if opinionated, resource on typography in a wider sense. It is free, but the author does request donations if that is possible for you.

    9 votes
  3. deing
    Link
    I'd like to share a recommendation from "Practical Typography": Charter┬╣, a free serif, somewhat old, but holding up extremely well. I find it comfortable to read even in longer bodies of text and...

    I'd like to share a recommendation from "Practical Typography": Charter┬╣, a free serif, somewhat old, but holding up extremely well. I find it comfortable to read even in longer bodies of text and use it on my personal website as the main font.


    ┬╣ Note that that page is not set in Charter but one of Butterick's own fonts.

    7 votes
  4. tannercollin
    Link
    I spent a lot of time searching for a font that I liked to read long articles in. What I came up with are these settings: Font: Apparatus SIL Size: 1.2 rem (I want a little bigger for my eyes)...

    I spent a lot of time searching for a font that I liked to read long articles in. What I came up with are these settings:

    Font: Apparatus SIL
    Size: 1.2 rem (I want a little bigger for my eyes)
    Line Height: 1.5
    Line Length: 70 characters max
    Spacing / Weight: leave normal

    That's a serif font for article bodies. The rest of the interface I like to be in sans-serif. Here's what it ends up looking like:

    https://pic.t0.vc/WAEI.png

    7 votes
  5. [3]
    xstresedg
    Link
    While I haven't played much with reading with it, this (allegedly) can be helpful for those with Dyslexia: https://www.dyslexiefont.com/en/typeface/ Maybe someone here has more experience with it.

    While I haven't played much with reading with it, this (allegedly) can be helpful for those with Dyslexia:
    https://www.dyslexiefont.com/en/typeface/

    Maybe someone here has more experience with it.

    5 votes
    1. [2]
      ainar-g
      Link Parent
      Sorry if that's a bummer, but the Wiki article quotes a couple of papers (Paper 1, Paper 2) which suggest that it doesn't actually do anything. Also, it's proprietary, which means that the authors...

      Sorry if that's a bummer, but the Wiki article quotes a couple of papers (Paper 1, Paper 2) which suggest that it doesn't actually do anything. Also, it's proprietary, which means that the authors technically have an ulterior motive of selling more licenses.

      5 votes
      1. xstresedg
        Link Parent
        No worries, not a bummer.

        No worries, not a bummer.

        2 votes
  6. undu
    Link
    I'm quite fond of Palatino for reading articles onscreen. There quite a few clones freely available, like TeX Gyre Pagella or P052.

    I'm quite fond of Palatino for reading articles onscreen. There quite a few clones freely available, like TeX Gyre Pagella or P052.

    4 votes
  7. Silbern
    Link
    I think I'm definitely in the minority and I believe it's rather tricky to implement in a browser these days, but I've always preferred razor sharp unaliased fonts over aliased ones for...

    I think I'm definitely in the minority and I believe it's rather tricky to implement in a browser these days, but I've always preferred razor sharp unaliased fonts over aliased ones for readability. I can comfortably look at my terminal or custom browser fonts way longer than the blurry stock ones, and they look easily distinctive even at very small sizes, for those readers that prefer to see more of the page at once.

    3 votes
  8. ainar-g
    Link
    My personal favourites are Linux Libertine and its slightly more actively maintained fork Libertinus. They are very nice-looking classical serif fonts with ligatures and other features for...

    My personal favourites are Linux Libertine and its slightly more actively maintained fork Libertinus. They are very nice-looking classical serif fonts with ligatures and other features for typography nerds. Wikipedia logos are actually typeset using this font.

    2 votes