Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
2  
"What font do you recommend" is simply too broad of a question for us to answer. Also note that while a font is certainly a major part of how 'readable' something is, there are also a plethora of other variables (column width, line spacing, color, hinting, layout, etc.) –  DA01 Jan 12 at 19:45
    
@DA01 maybe there is a guide that you might recommend? –  Dan Jan 12 at 20:33
    
1  
Question seems fine to me - it's not "What font do you recommend", it's "How to choose a high-readability font for a website" - heaps of criteria. –  user568458 Jan 16 at 18:36
add comment

4 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

enter image description here

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

Serif vs. Sans: the final battle

share|improve this answer
    
There is no conclusive evidence that serif faces are any more or less readable that sans-serif faces. The one exception would be on screen, where lower resolution displays may make it harder to render the details of a serif face. –  DA01 Jan 16 at 20:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.