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.


8 Comments on “How to Make Your Text More Legible”

  1. fgfdg says:

    the text in this column is too small. really.

  2. anonymous says:

    I agree with the first poster. This text size is definitely too small. The narrowness of your column gives each section too much of a “text wall” feel and makes it nigh unreadable. Plus putting a pure white background is really harsh on the eyes and for a website should be avoided. White on paper is fine but in a transmissive medium like a monitor it can be overload.

    • Sebastian says:

      Thanks for your suggestion on the text size and the colors. I actually don’t use any code in this theme so maybe you can suggest it to the theme author as well here: http://5thirtyone.com/grid-focus

      Many other professional designers (who choose to say who they are) suggest that dark text on white backgrounds as well a narrow columns improve readability.

  3. Achron says:

    The columns are terrible on this page. The irony that you’re preaching to others on how to make their own pages more readable is hard to overlook when I’m forced to read this squished column even at a very high resolution simply because you’ve dedicated over half the page space on the right to random crap that no one is trying to actively read. Brush up on your own readability lessons before trying to teach.

  4. James Smith says:

    As a professional technical writer and document designer, I have to say you give very good advice.

    One thing I would add, despite what that idiot woman Robin whatsername said, you DO want two spaces after a period. This provides better visual separation between sentences and is the original reason for doing it.

    Just because someone says something, doesn’t make it true. They have to be able to give a logical reason for their statement. This is something you seem to have done quite well.

    Also, I agree that one size larger on your font would make a big difference. Going from say, 1o point to 11 point makes more improvement than one would think.

  5. Letha says:

    I think this is one of the most important information for me.
    And i’m glad reading your article. But wanna remark on some general things, The website style is great, the articles is really excellent : D. Good job, cheers


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s