How to Make Your Text More Legible
I don’t get asked this too often – in fact I can only think of a couple of times I’ve been asked this – but I take typography very seriously and I feel like preaching.
The idea (of course) is to make it easier for your words to be read so here are a few tips and some code.
1. White space. Leave plenty of white space. Fancy nouvelle cuisine restaurants allow for white space between edible elements (food) and they charge more for it. Clean design is always more readable. The easiest way to set white space is with the “margin” attribute in CSS.
2. Size. Oddly, large characters are less easy to read up close. They are useful for catching the eye at a distance (this explains headlines) and a larger size sets a title apart from the rest of the text, but other than that, keep your character sizes small. This is more true for long runs of text than short runs (also explains headlines.) The “font-size” attribute can control this. I normally set this to 95%. Browsers usually default this to 110% when displaying. You can also try using “ex” or “em” but these somehow feel less intuitive.
3. Narrow columns. Reading all the way to the end of a line of text then trying to figure out where the next line begins makes reading more difficult. There is a reason newspapers are divided into columns. Try not to have more than 80 characters per line of text. The CSS “width” attribute controls this. I usually set this in pixels. 400 pixels makes a nice column size for 9 pt character sizes.
4. Leading. (rhymes with “Wedding” – as in the heaviest non-radioactive metal) This refers to the space between lines of text. It’s called that because old fashioned hand manipulated typesetters would add strips of lead between rows of text (don’t you love trivia like that?) Try not to bunch up your text by allowing at least the ‘x’ height of the font between lines. Looser can be nice but too loose would be ridiculous so try not to exceed the font height for most cases. But in some forms it may actually look better to be looser than that but you better know why you are doing it. The CSS attribute “line-height” can control this. Note: If you are tempted to just add line breaks between lines bear in mind that is a bad idea since you are breaking up a paragraph and not allowing it to flow, and if you change type you may have an awful surprise.
5. Font. This may seem obvious but it isn’t. All of the standard fonts are designed for readability but not all of them do well on monitors. Times Roman was designed for newspapers (specifically for The Times of London) and is notoriously bad for monitors. Arial works well but is also too ‘defaulty’ looking and makes a page less interesting (euphemism for boring). I tend to use Verdana (which is actually SU’s font) since it was designed to be easily read off the screen. Georgia is a good standard if you want to use a serif font. Some good alternatives which are not strictly standard are actually my favorites.
- serif: Palatino Linotype
sans-serif: Century Gothic
Those two are not strictly standard web-safe fonts but they are installed in many platforms, including Windows XP. Newer Mac users will not be able to see Palatino but you can raid an old Mac if you are interested. You can also buy it from Linotype if you feel rich and are desperate. Same goes for Helvetica. You can use the < font> tag if you want to but I prefer to use the CSS attribute “font-family” (they work the same way.)
6. Kerning. This refers to the space between characters. You cannot do true kerning on a web page but you can control the space between characters. (True kerning uses an optical relationship between characters but we won’t go into that here.) As a rule increasing character space in sans-serif fonts makes them easier to read. Unfortunately it also makes the period (full stop) that much space away from the end of a sentence, but you can’t have everything. You can control this with the “letter-spacing” attribute. I normally set this to 0.05 em. When I use Palatino I normally just leave it alone since that is one font that rewards you just by being itself.
One last bit of advice that has nothing to do with readability. Avoid using more than three typefaces on a page. And use the third one only with good reason. You will normally see one font for titling, another for regular text and another for commentary text such as in a side-bar. And when I say typeface I include font size variants within a font. 10 pt Arial is a different typeface than 12pt Arial (if you must use Arial.)
I use the same code here as in “How to draw a box in your posts” and feel free to have fun playing around with the attributes.