The Accessible Web #4: Text and typographyMarch 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

It’s amazing that something as simple as how the body text looks on the page or screen can help or hinder with reading. Font selection, spacing, line length and the alignment of the text can all make a massive difference.

Font selection

Sadly there isn’t much choice in font selection on the web just now, since with most browsers the font needs to be on the user’s computer. This pretty much limits you to a small list of fonts including Verdana, Times New Roman, Arial/Helvetica, Gill Sans and Lucida Sans.

Font selection should still be taken with care; fonts have their own character and very often Verdana and Times New Roman are overused (and should only be used as fallback).

Contrary to typography rules for paper, you will likely be better off choosing a sans-serif font for your body text. This is because the relatively low resolution of a computer monitor will make those fonts with serifs a little harder to read than those without them. Having a serif font for the header will however often make a nice contrast.

Leading and kerning

Leading (pronounced to rhyme with heading) is the amount of space between two lines of type: the name comes from the thin block of lead originally used to increase the space. Kerning is the space between two letters.

Both leading and kerning can affect how quickly and easily the copy can be read: too big a leading and the reader will struggle to read down to the next line. Too small a leading or kerning and the letters and words might be hard to distinguish. If you’re unsure, you ought to leave these to the defaults.

Line length

Again, speed and ease of reading is affected by line length. If the line is too long then the muscles in the eye and neck need to be used, which is tiring for the reader. It also affects how easily you can find the next line: the eye has to travel a relatively great distance to go back to the start of the line.

Alignment

In Latin languages, body text should be left aligned; any other alignment will be confusing for the reader. Right and centre aligned text is fine in some cases, such as the tag and category information that is displayed at the bottom of this post.

Justified text should never be used: using this alignment means that gaps appear between words and so ‘rivers’ of space will form. This can be disconcerting for those with dyslexia and so they will find it hard to read the copy.

Tags: Dyslexia, Typography
Posted in Tech Usability, Web design