Accessibility: is your site readable?

A few weeks ago we treated the issue of the web-standard fonts and in particular the specifications CSS3 @font-face.

An important aspect that, for one reason or another, I didn’t take in consideration is the readability of the “fonts”: “now” that you have the possibility to choose the font you want for your website, you have to be careful not to base the choice only on the aesthetic ( excited for the new CSS3), since the ability to set a certain font doesn’t necessarily mean that it’s the right choice, simply becasue some fonts are  more readable than others.

Readability

The basic rules of readability are:

  • that a capitalized script or in block letters (in CSS: uppercase) is less readable than a lowercase writing
  • that the upper part of a writing is more important in terms of readability than the lower part;
  • that  fonts with serif are more readable than fonts sans serif.

For what concerns the first two statements, it’s easily seen in the following image how a text with  the right high and low letters give more information respect to a text always high and how the upper part of a writing gives us the same more information respect to the lower part.

Confronto leggibilità del testo tra parte superiore e inferiore e tra alto e basso

For the third statement the situation is bit more complicated and less clear.

Screen reading

Reading on computer is an activity that requires the 25% of time more respect to the same  reading on paper,  because it’s more tiring and difficult.
The reasons are due to an unnatural posture, to the light emissions of the screen (which can be mitigated with appropriate contrasts) and a lower resolution of the monitors respect to the paper.

This last factor affects the preference of  serifs fonts respect to sans serif ones: the lower definition of the font on the screen respect to paper brings to a greater strain in reading  serifs fonts. The problem is slowly getting reduced with technology  improvement: we can’t exclude the possibility that one day, not too far away, we’ll have the same paper definition also on  big sized screens (the screen display of the iPhone would be too expensive for the iPad screen ) and therefore the rules of readability valid for paper become valid  also for screen reading.

The screen-fonts

Considering all the problems of video reading, Microsoft in the 90s commissioned to the font-designer Mathew Carter the fonts for its operating system.

After some studies and experiments Carted identified the parameters necessary for a font that has to be screen readable: hence the origins of  Verdana, a sans-serif font with wide spaces between  letters, excellent  to insert a lot of text in confined spaces, and of Georgia, a serif font very similar to Times New Roman, but wider at the same dimension, the only serif font suitable for the screen

Georgia is larger then Times

Afterwards the fonts became so widespread that they are preinstalled now on most computers (Windows e Mac).

The other web-safe fonts

A series of researches lead Michael Bernard (Usability News 41) in the early 2000, seem to overturn once again the rules of the game, calculating the speed and the accuracy of reading, the impressione of less or greater readability and the pleasantness of screen -fonts respect to conventional fonts.
It seems,  in fact, that the podium for the average speed ( 10-12-14 pt dimension) goes to Times, followed by Arial; while the absolutely fastest font to read goes to Tahoma 12pt.
Tahoma again, this time at 10pt,  is the font that gives the impression of being the most readable, followed by Georgia 10pt and by Courier 12pt; for what concerns the average between the three dimensions, the best one seems to be Arial tied with Courier, but there aren’t big differences between all the “competitors”.
On the pleasantness, Georgia in media (and in absolute at  10pt) is the most attractive font, followed by Times (second at 14pt).

Under the 10pt however the rules stay the same: for what concerns screen reading it’s always better  to use sans-serif fonts. You’re probably thinking that its dimension is too small to be even considered, but reporting the discussion to the press, where newspapers are printed at 8pt and paperback books at 9…the positive side is that the screen doesn’t have to save room for the cost of paper, so it would better to avoid reduced dimensions (always expressing them and however in order that they’re scalable).

All the other fonts

At the beginning of this year Google Font Directory service expanded the list of fonts available with about 20 new fonts. It should be quite clear which of these fonts will be used only for the titles and which for longer text.

Alcune fonts messe a disposizione da Google Font Directory

The layout

Besides the font, for the readability of a text it’s important that it’s well paged. So, we have to consider the length of the line: if it’s too long it makes you lose the thread (and confuse with the confined lines, so if you really need a long line, you need to balance it with a higher interline)  instead if it’s too short it makes the reading at the comprehension level slow and difficult, breaking the discourse too many times.
The optimal length of the line should be between 7 and 12 words.

I often find, surfing the web, text with justified alignment. Honestly not that often, but even 1 on 100 is too much!
Justified alignment has the great advantage  of saving a lot of space, so it’s used on newspapers. Save space shouldn’t be a necessity on the web, as mentioned and above all the text should be justified with more attention respect to a simple CSS “text-align:justify”: when one aligns a text for the print, aware that the text can’t be modified at the reader’s liking or by their devices  the spacing between the letters and the new line  are used to create a pleasant block effect, trying to avoid clusters of letters without spaces and empty holes.

On the web you can’t control the final size of the font, the font that will effectively see the user and so on, so the justification will fit the space of the paragraph given in a totally arbitrary way, creating often gaps between words where it’s easy to lose the thread.
Therefore the best alignment would be the flag left aligned as Westerners we read from left to right and it’s comfortable for us that the line begins always at the same point, while the fact that it finishes in different points gives us a reference point (like for the printing, the center alignment is suitable only for poems and songs).

At the end, the interline isn’t a parameter to play with to make the text occupy less space, it has a default value of 120% of the body of the font, that is also the most indicated value to avoid overlapping lines or that there’s an exaggerated space between the lines.

Test the readability

Often we, web- designers, create the structure of the site with a font we like (or likes the client), at a dimension that we think suitable for the sight, testing it with the usual “Lorem ipsum”. This could  go for the “alpha phase” of the project, but when we really have to check if a font and the chosen dimension are right, one needs to make a person that neither you nor the client read the real text: in simple words a person who doesn’t know the text, not to find ourselves afterwards in unpleasant situations.

Which fonts do you find more readable and which one do you prefer for your projects? Do you try to squeeze  a very long text in a small space or allow the text to use all the space it needs?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Passionate and professional web-designer, she knows deeply (x)HTML/CSS, loves to experiment PHP & js scripts and is always ready to learn new practices and techniques. She prefers a sober design for web-sites, with particular attention on usability and accessibility, moreover on what is under the shell: the code, strictly standard.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

4 comments

  1. Yvo

Trackback e pingback

  1. Usability: How to write for the Web | Your Inspiration Web
    […] must first know how to give  the right text formatting, in order that reading is effectively […]

Leave a Reply

Current day month ye@r *