Posted on by & filed under Fire-and-Forget.

Quick Win

To make sure larger blocks of text are readable across all devices you need to pick a “proven to be readable” font-family like Helvetica, and add Arial, sans-serif as a fall-back. Even quicker win is to copy-paste this into your main CSS file, right after the CSS reset:
body {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}

What Needs To Be Solved?

We need to make sure, that the text of our websites can be easily read and understood. This is one of the most important goals of user experience design. Unfortunately it is not among the easiest ones, mainly because it is influenced by many things.

The most important factors of legibility (the degree to which characters are recognizable) and readability (the degree to which the text itself is understandable):

  • Shapes (font family, weight and style)
  • Size, scale and rhythm (font size, line height, paddings, spacing)
  • Colors (font color, background color, highlight colors)
  • Ease of reading the text (number of words with more than two syllables, Fry Readability Graph, etc.)
  • Ease of understanding the text (reader’s interest, knowledge and motivation)

Note, that many sources discuss readability and legibility separately. I find this separation highly impractical, because many factors of readability and legibility are common, and influence both. Even hard to measure abstracts, like the motivation of the reader will influence both.

Font Family

Typography enthusiasts often simplify the problem of legibility to the choice of font family. Truth to be told, the font family plays a major role in legibility. Allan Haley emphasizes that “not all typefaces are –or should be– created with legibility as a primary design function”.
not-all-typefaces-are-legible
To further complicate things, even if you manage to find an easily readable font for your website, chances are, there will be technical and legal complications. Theoretically you could save the text as a .PNG image, and use that on your website, instead of real text. While this solves some problems, it raises a lot more. You need to export a new .png whenever you edit the text, search engines will not be able to index your site, to name a few. Long story short, it is an accessibility and usability disaster for body texts. Some use this dirty trick for headlines or pseudo-logos but even then I would not recommend it. (Not even if you replace the underlying text with the image through CSS, so that crawlers and screen readers can read it.)

The Websafe Fonts

The easiest solution is to pick a font from the so called “websafe” font list. This roots in the “Core fonts for the Web” project by Microsoft. The projects goal was to create a standard pack of fonts for the Internet. The project was terminated in 2002, because of frequent EULA violations. (People used the fonts in commercial software, and most of the time they repackaged and modified them.) Fortunately they are still included in both Microsoft 8 and Mac OS X.

With the dawn of smart phones, and mobile operating systems, the list of web safe fonts narrowed. Fonts considered web safe in the past are no longer present in all devices by default. This is quite a good thing in some cases, that where a typographical disaster anyways, like Impact and Comic Sans. Others are monospaced, and should be used only in very special scenarios, like rendering ASCII Art or screenplays scripts (for example Andale Mono or Courier).

My list of generic use web safe fonts is as follows:

  • Arial
  • Georgia
  • Helvetica
  • Times
  • Trebuchet
  • Verdana

That is six font families to choose from… or rather five. While officially Arial is based on Monotype Grotesque it is so similar to Helvetica that it is indistinguishable for the untrained eye. Plus Helvetica was not part of the “Core fonts for the Web” project.

Now the above five can be split into two categories serif and sans serif fonts. “Serifs” are the small finishing strokes on the end of a character. “Sans serif” fonts do not have these small finishing strokes. There are numerous studies claiming that one category is more readable than the other, but there is no definitive answer. As Alex Poole summarizes: „What initially seemed a neat dichotomous question of serif versus sans serif has resulted in a body of research consisting of weak claims and counter-claims, and study after study with findings of no difference. Is it the case that more than one hundred years of research has been marred by repeated methodological flaws, or are serifs simply a typographical red herring?” (http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces)

If you can’t decide, set the whole text with each font (or the ones you prefer), and ask others what is better on the screen. Printing the text with different fonts is a bad idea, because the legibility of a given font is different on screen and on print. Obviously there is no definitive answer to the question: “What is the most legible font on the face of Earth?” But then again, if you want a quick win, go with font-family:”Helvetica Neue”, Helvetica, Arial, sans-serif.

The “Helvetica Neue” is not guaranteed to be present on each and every device, so add a fall back option. There are some old cell phones, that have only two font families in them, sans-serif and serif, that is the reason to add that at the end of the fall back list in CSS.

Threading On Unsafe Ground

If you want to use any font, not just those five mentioned above yours uses will need to download the fonts your site uses. While in the late 90’s there where sites that included a link on their home page to the font download, that is something you should definitely avoid. A bit more advanced, solution is the @font-face CSS property. Some older browsers do not support the @font-face rule. (Internet Explorer 8 and earlier versions, not to mention older smartphone browsers.) But there is an even bigger issue with this. You have to own the font license, and in that license it should be allowed the @font-face usage. This can be quite costly. Moreover this increases the bandwidth costs of your hosting. So I would not recommend @font-face, unless your company has his own font, that must be used on the website.

Paid solutions quickly emerged for this problem. Typekit, WebINK, Webtype, Fonts.com and similar services exist and have quite a few subscribers, so this might be the way to go, if you want a really custom and unique looking typography. In some cases you need to pay a yearly fee based on the number of unique visitors / month and get access to all fonts in their library and you can use on any site, while in other case they limit the number of fonts you can use on a website, and number of websites you can have. When choosing such a service, make sure the read the fine print. Some services measure number of pageviews/month, while others number of unique visitors / month.

Typekit was one of the most popular service of this kind, even before it was acquired by Adobe in 2011. It has an easy to use and quite newbie friendly interface. You can select fonts based on classification (for instance if you only wish to see Serif fonts or Script fonts), but more important is the ability to click the „Paragraphs” option in the „Recommended For” section. Even if you want a unique looking heading, most of the time you should pick a paragraph font.
adobe-typekit
If your budget allows by all means go with a paid solution, to enrich the web with typographic marvel. The said solutions solve the legal and hosting problems for you and provide an easy to use interface for choosing the best looking font for the task. If you want best of both worlds, you might want to check this wordpress hosting company.

Google Fonts

https://www.google.com/fonts is where you can find 600+ font families (632 at the time of writing this blog post) totally free, and usable on any website, hosted by Google. All of the fonts you find there are Open Source, so you can even modify them.

The Helvetica of Google Fonts, as in the most popular (with a reason) font is Open Sans. So the quick win here is: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans Implementing a Google Font is only adding a line of code to theelement of the pages that will change based on the styles you want. (We will talk about styles in the next chapter.) Keep that to the minimum, because each additional style will add to the page load time. Google helps you with an impact meter on the right side of the page, so keep that in the green area, because slow sites are bad for user experience, and for SEO. (Seriously, site speed is a Google ranking criteria.)

Weight And Style

In a font family you can find many different weights and styles. The styles (italic and oblique) should be used to emphasize parts of the text, but almost never to set the whole text with it. From a readability standpoint they are inferior to the normal styles. The same stands for text-decorations (underline, overline, etc) and font-variant (the only font-variant currently in CSS is small-caps). So avoid those for the main body of the text.
open-sans-styles-weights
Font-weight is however can be tempting to be set to light or semi-bold. It is common knowledge that bold or extra bold is for strong emphasis, not for main text. But some even claim that semi-bold can be more readable in certain situations. For example, when the contrast between the background and the text color is low. Light gray text on a darker gray background is one of those situations. I would avoid those situations in the first place, but if for some reason (mostly client desire) can’t be avoided I would certainly try to play with font-weights. But then again 99.99% of the time you want to go with normal (400) font-weight. It is called regular or plain in some cases.

Futuresight

I don’t think that in the near future we would see the birth a measurably more legible font-family. And even if such a font appears it should be used in normal weight and style for body text. Google Fonts will surely grow, and some claim that open source fonts will be the future of typography. That battle is yet to be fought…

6 Responses to “Web Readability – Font Shapes”

  1. Hamilton

    I’m really enjoying the design and layout of your website.
    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often.
    Did you hire out a designer to create your theme?
    Excellent work!

    Reply
  2. Mitchel Hayner

    Great website. A lot of useful information here.
    I am sending it to several pals ans additionally sharing in delicious.

    And naturally, thanks to your effort!

    Reply
  3. BB

    This site was… how do I say it? Relevant!! Finally I have found something which helped me. Many thanks!

    Reply

Leave a Reply to HamiltonCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.