Typography: Styling Text for the Web

Typography is a dark art, that often arouses great passion. Here’s what I do:

Font Size

I like websites with large text. In my opinion, the font-size is too small on most websites. Small text is harder to read. These days I use the BeeLine Chrome plugin, which makes webtext far easier to read.

Copy-writing is often an afterthought. The graphic design is tackled first. So graphic designers fill text-boxes with dummy Lorem-Ipsum text, – i.e, text written in Latin. Perhaps many companies never try reading the text, before they accept the graphic design.

40 year old eyeballs receive half the light of 20 year old eyes, which means twice as much work. 60 year old eyeballs get just 20% – so work five times harder than the youngsters. As you know, an eye test tests your ability to read ever smaller letters at a distance.

If you read a book at arms’ length, then book publishers reckon the optimum font-size is 12 points, which is 16 pixels on a screen. A younger audience, with better eyes, might be ok with 10 points, which is 13 pixels. 10 points is fine for older people with their nose stuck into the book.

Hence my fonts change with screen size, assuming 96 pixels per inch:

• 12 pixels for small screens like mobile phones. These are around 480px wide these day, and people are happy holding smartphones close to their eyes.
• 13 to 14 pixels for tablet sized screens, up to about 1200 pixels;
• 15 to 16 pixels for laptops to about 1388 pixels; – 16 pixels is the default text size on most browsers, and presumably browser developers should know what’s best
• 16 to 18 pixels for large screens

Line Length

The optimum line length is between 50 to 75 characters per line. It’s tiring to read longer lines. If your lines are a 100 characters wide, your carefully crafted text won’t get read.

Font-Size and Line Length

Getting both the font-size and line-length to work is tricky. I’ve created some jQuery that measures the main content boxes’ width, and sets an appropriate font-size.

Tie Headings to Paragraph

The heading should be closer to the paragraph it titles, rather than the preceding paragraph. Readers then know what the following paragraph is about, and can choose to read it, or not.

Don’t Center Text

The eye is used to travelling left along a line, then back to the right and down a line. Centered text, which has a ragged left and ragged right, upsets this habit

Javascript show/hide

Sometimes you’d like to provide detailed information for interested readers. However, most readers don’t want great detail. One solution is a button for interested readers to click, which opens the detail: e.g:

Read More