In Web Design

Consider Font and Page Size When Writing for the Web

By Clinton R. Lanier (c) 2010

Font type and size. What boring elements, but what important ingredients in any written communication. We often don’t notice font, even when we can’t read it: it’s almost completely transparent.

Writing for the web however forces us to use a completely different set of rules, and those rules created for hard copy writing don’t really apply any more. For example, when writing for print you should really use a Times-like font when writing, because the slight serifs (the small marks at the end of each leg of a letter) allow the reader to quickly separate and identify the letters more quickly than any other letter. This is part of the meta-information of a document: it facilitates meaning without meaning something itself.

However, the rule is different for the web. Researchers have found that sans-serif fonts, specifically Verdana or Helvetica, work the best. People can more easily read on the screen when using these fonts. Thus, when setting font type, these are perhaps the best used.

Actually many specify “verdana, sans-serif;” just to be safe. In such a case if verdana is not available, the available sans-serif will be displayed. This might be a trend, after all web design is design after all, but research has demonstrated that sans-serifs seem to enhance understanding when reading online information.

Maybe it has something to do with how we read online. We scan for information, when we find that information we concentrate on it, and then move on. We tend to skip to topics sentences throughout a page. Thus, perhaps words in san-serifs stand out more. And because we aren’t reading an immense amount of text, we don’t need the same strategies we use when reading hard copy documents (with which we typically read much more than we do online anyway).

With regards to font size: larger is not better! Large fonts make for awkward reading, and it is difficult to use the space effectively to find the information we’re looking for when the words are too big. A font size of what would be equivalent to 11 pt typically are the best. Sans-serif fonts tend to be larger, so scaling it back down from what we would normally use on hard copy (12 pt) is needed anyway.

You can use bigger font sizes, of course, for headings and titles, but try to limit the amount of larger font sizes used: it actually detracts from understanding and it’s hard to see the entire screen easily when the font size of any element is large.

Using colors with text is tricky. Web designers used to erroneously think that bright colors would attract people to read something. They also felt that some type of rainbow effect was useful or would be catchy somehow. It was actually more kitsch than catch.

The rules of contrast apply especially to screen. Light background and dark font need to be used to effectively communicate. Because we scan screens for information, you need to use effective contrast to highlight information. We will quickly miss important information that blends in with the background.

The size of the page, and the amount of text on it are also extremely crucial to aiding people in their task of finding and understanding information. As we graze over a web page, we are scanning back and forth for specific pieces of information. Thus, long paragraphs tend to hamper our attempts. The more information we put in a paragraph, and the longer it is, the more people have to scan.

This will cause a couple of things to happen. People will either get frustrated and leave, or they will not find the information they need because it’s buried under a layer of text they don’t need. Thus breaking up the paragraphs into smaller, more manageable chunks of information–usually by subtopic–is necessary to help people find information.

Many experts recommend what’s called the upside-down pyramid approach to organizing information. Unlike hard copy writing strategies, where we introduce a topic and gradually get to the point, we want to quickly give the important information at first and then fill in the details. Readers will first read the important info, perhaps the first or topic sentence of a paragraph, and then determine what they want to read next.

Also, the length of a page can be a detriment to design. Long, scrolling pages are harder to navigate as well, according to many studies. Users would rather skip to the next page, just like when reading a book, than scroll through a bunch of information they don’t need. We don’t use things like papyrus scrolls anymore, after all, so it’s hard for users to adjust to finding information in that manner.

To enhance the amount of information the user gets, we need to also try to constrain the viewing information as well as the amount of information we are giving. Thus, the viewing size in which the primary information is given should be reduced. This makes the reading task more familiar to users because, again, it’s more like reading hard copy, which is how we were originally taught to read: small pages with small bits of information. We weren’t originally trained on the landscaped rectangles we use to view web pages on, thus it just doesn’t seem natural.

Writing for the web isn’t hard, it just takes a different set of considerations than writing for print.


About The Author

Clinton R. Lanier is a professor of web design and technical communication in Las Cruces, NM. An expert in web design, usability, interface design and technical communication, he regularly consults as a web designer and communication consultant. Contact at

Recent Posts