Skip to content

Archive for February 22nd, 2007

Web Typography (part 2)

Thursday, February 22nd, 2007

A few days ago, I brought up some typography tips that web designers can take from print design. However, readers on the web have different tendencies, meaning that you can’t completely follow every rule from print typography. Here are a couple rules that change when you move your printed text to the web.

Font size

Your text on the web should be much larger than in print. This is mostly due to low resolution of your monitor. A character in print can show the same amount of detail at a much smaller size than your computer monitor. And to make things worse, users tend to sit pretty far away from their monitors in comparison to where they might view a printed publication. The day of small text on the web is over. When deciding a font size for your website, go big.

Line length

Line length is the number of words you have on each line of text. To give you an idea , columns in newspapers tend to average 6 words per line. This short line length keeps readers from straining their eyes and neck, left to right, as they read. However, the web doesn’t work this way.

Like I said, the font size on a website must be much larger. That means even a line length of 6 words will require users to move their eyes and neck as they read. Since we can’t really eliminate the user’s left to right reading strain, we solve a different problem. We can reduce the amount of vertical work the user must do by increasing the line length.

The number of words per line you should have on your website is widely debated. The only thing you can really be sure of is that your line length should be more than you generally see in newspapers or magazines.

More to come

The last topic I’ll dicuss for this series is CSS and some ways it can manipulate web typography. There are some CSS tricks to improve readability on your site, as well as some ways you can hurt it.