Best fonts for improving reading experience

Question

I am building a website whose major purpose is to serve content (legislature) and I want to give best reading experience to users. You can take a look at the example page at:

http://iura.cl/cc/44

As you can see, I have stripped everything that At the moment I am using Telex webfont. I also have an option for night reading that should reduce glare:

http://iura.cl/cc/44?estilo=nocturno

I wonder what I should consider about the font that I choose to ensure it is legible, if there is any guide to adhere to?

Answer 1

Actually there are some pretty simple principles if your number one criteria is a high-readability font for a website.

1. Think mainstream. Thanks to @font-face you could choose from thousands and thousands of fonts - but less popular or newer fonts often have rendering issues between browsers and operating systems, sometimes even when they come from respectable foundaries. If readability is your priority, and you don't want to do massive amounts of cross browser cross OS testing, you may want to play it safe and use a trusty, tried and tested font. The old web-safe fonts like Verdana and Georgia are safe bets since they're so widely used, they will have been tested even in rarer browser/OS setups. Plus, familiarity aids readability.
2. High x-height, and wide. You don't know what the quality or pixel density of your reader's screen is, so, if you're prioritising readability, make sure the important distinguishing features of the letters are extra clear. Fonts designed for web readability, like Verdana and Georgia, use as much as possible of their pixels for the x-height where the key details of a letter are, and use minimal pixels on ascenders or descenders where a one or two pixel bump is enough to easily tell a b from an o or a p.
3. Not too light. Light type looks great on print or high pixel density screens - but there's a good reason why it was seldom used on screens until ios7 and was controversial even then: if the viewer isn't viewing in optimal conditions, like a high quality screen in steady indoor lighting, it risks readability. Go for a font with a good solid regular weight - did I mention Verdana and Georgia?

There are plenty of fonts that meet these criteria other than Verdana and Georgia, of course, and these two are sometimes considered a bit boring because up until 2009 or so when @fontface became widely used they were been the go-to fonts for much of the web.

But you really can't go wrong with them - they were designed for web readability, and every browser and operating system combination will have been tested to display them well.

---

Edit: When webtype sellers and foundaries do go to the trouble of testing for good readability, they're likely to shout about it in their marketing. For example, the webtype "Reading Edge" series (hat tip to Chris Burton who mentioned this here). Still, do test widely.

Answer 2

Ok I'm going to go ahead and give my thoughts on this. There is no ultimate 'best font' nor can there be because choosing a font depends on many different aspects. What there can be is a 'best method for choosing a font'.

So things to consider to help choose the best font for your project;

Media: How will the font be displayed, paper, canvas, online, portable device, etc. You want to make sure that you are choosing a font appropriate to the media that it will be displayed on, for example a block of Times New Roman might be fine for a printed document but, on screen (especially a small screen) a block of Times New Roman can be quite difficult to read. You also want to see what is available to you if you are restricted to web fonts, resources such as google fonts could help you out here. (From Wikipedia: "Web Safe Fonts Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content displays in their chosen font. If a visitor to a Web site does not have the specified font, their browser tries to select a similar alternative, based on the author-specified fallback fonts and generic families or it uses font substitution defined in the visitor's operating system.")

Audience: Think about who will be reading it. A young child might do better without a serif based font, or a single story 'a' as opposed to a double story 'a'. However if it were say a wedding invitation then fonts such as Edwardian Script are what's highly popular in that context because let's face it the more Serif, the more decorative the better - according to some brides that is ;) though even still the decorative stuff is used primarily for titles rather than entire content. As a wise ol

Contrast/Colour: Again this is something to consider in terms of your project. Of course you don't want to blind people as a result of terribly high contrast, or give them wrinkles from squinting at something that has terribly low contrast - that part is obvious. But depending on your colour scheme you might want to fiddle with brightness and contrast settings. You'll notice that GD.SE for example is not completely black and completely white (as asked & answered here)- it has a lower contrast than that, consequently it's quite easy to look at this website for very long periods of time by comparison to looking at something with a much higher contrast- your eyes would get tired!

Weight: In general lighter weighted fonts ten to be a little more legible than some heavier ones, this is discussed further here along with other aspects of legibility which you may find useful.

How many: Depending on your media, audience and content you might want to choose several fonts. Of this I suggest being wary. You most certainly do not want to confuse the content. The whole point of font is to communicate something, what you are looking for is the way to do that most effectively. Too many fonts can be confusing,though a single font can sometimes be boring. Generally mixing it up in terms of bold/italics and size with maybe two fonts is what tends to happen. Pairing fonts is discussed a little more here.

These are some of the aspects that you should narrow down if you are going from a blank slate but though there is a lot to consider when it really comes down to it, it's not that bad. The value of choosing the right font/fonts at the early stage of a project has no comparison! There is more about factors to consider while choosing a font here.

A good analogy is that it's like getting dressed, a simple concept that is discussed here.

So as the format of my answer naturally fell, you want to first figure out who it is for and what it has to say - then you want to figure out the means of communication, which font :) and since this wouldn't be a Jenna-Answer without an abundance of links, this is further discussed here.

I strongly suggest reading the links that I have provided, they are quite helpful and will help to equip you to choose the right font for your project, this is what will improve the reader experience. It is not just about the legibility but also the entire context that the font is contributing to, not to mention the aesthetic an adequately legible font might take away from a design entirely when and equally legible but more appropriate one might go unnoticed and therefore make the design and the information the most prominent things. Taking time to do this in my opinion is quite essential.

Hope I've helped and haven't rambled too much, I am a little passionate about the right font :) Good luck with your project.

Answer 3

I believe that Serif fonts tend to be easier on the eyes for longer periods of reading. For a better reading experience, I think a serif font like Adobe Garamond works well. It's not as "blah" as Times. There are some interesting curves in the serifs that helps make it a bit more "purty" as far as serif fonts go.

Here is an article on the subject that I tend to agree with:

Serif vs. Sans: the final battle

Answer 4

Here are two good reading fonts available through Typekit's personal plan:

Nimbus Sans https://typekit.com/fonts/nimbus-sans

Adelle Sans https://typekit.com/fonts/adelle-sans