Site   Web

August 3, 2010

Consider Font and Page Size When Writing for the Web

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.


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
www.lanier-infomedia.com

12 Responses to “Consider Font and Page Size When Writing for the Web

    avatar Andy says:

    Interesting article, on a subject not normally discussed very much. As well as Verdana as a readable on-screen font, we also use Arial, Tahoma and Trebuchet MS – as they are ‘Web-safe’- on our Site. The only font colours we use are red (for top Headlines) and dark blue for Sub-Heads, with black body text.
    I agree about the ‘upside-down pyramid’ approach to copy too. You have to immediately grab attention and interest the reader with the main benefits of the offer ‘up-front’ otherwise you’ve lost them. Bullet points, Copy panels and Sub-Heads are also important. Our current feature article on Web-writing and Copy Planning on our Site goes into how to use these, in further detail, in this month’s Site ‘Update’.

    avatar John C Algar says:

    A most interesting, and to a certain extent welcome, article, even though much of what Clinton R. Lanier wrote has to be tempered against those with varying levels of sight disabilities.

    When I first created my main site way back in 2001, there weren’t any guidelines regarding suggested font size and font type let alone other aspects of website design as regards webusers who had disabilities (sight or otherwise), although much has changed over the last 9 years, especially (in the UK) since the likes of the Royal Institution for the Blind (RNID) and the Disability Discrimination Act (DDA) have provided guidelines for web-designers etc (not that many web-designers, even now, take on board that there are millions of sight-impaired web-users throughout the world).

    Font size is very important, and personally I use either the equivalent to 12 point, and sometimes that for 14 point (OK, so I know that it’s possible to enlarge and reduce fonts using either an operating system’s magnifier or a Browser’s ‘View’ options, but why penalise those who have sight problems? If (for better sighted individuals) fonts appear too large, then (their being more able-bodied) they do have the option to View at a lower size!

    Again, font type is (to excuse the pun) “in the eye of the beholder” that which is best to read, and personally I prefer Arial (incidentally, when I looked at the Source code for the SPN article, I was amused to note that it had been written in “{font-family:arial,sans-serif}” and not the type faces (i.e. Verdana or Helvetica) suggested in the article!

    All in all, a most useful article, but from a person whose eyesight at 63 ain’t the same as it was at 53 (or earlier) this is just a plea for anyone considering reducing font-sizes to stop and think that not everyone is as well-sighted as you, so do please think very carefully about the needs of others, after all, surely you want your visitors to return time and again, and not abandon your site because they can’t read what’s been written!

    These are all valid points, and I think that folk generally do take into account the medium when writing for the web these days.

    I would agrue though that scrolling down a page is actually preferable to skipping backwards and forwards through several pages when reading a single article. (I’d have given up on the first page, and never got to the end of this article if it was split up.)

    There are good reasons, too, although these are based purely on my own personal browsing habits. Firstly, it makes it easier to copy or print an article to take away and digest offline if it’s all on the one page.

    Secondly, it is far easier to scroll back up the page to reference an earlier piece of text than it is to try to remember on which of the eight sub-pages that particular section of text was sitting.

    Thirdly, if you are constantly skimming the article for pertinent information, it can’t be just me who finds having to constantly re-load pages unnecessarily irritating? Click. Wait. Read for two seconds. Click back. Wait. Read and realise the information was on the other page. Click. Wait. Get bored. Leave the site… :)

    I read the article with interest and then clicked through to the author site. How disappointing! Text not visible and words cut off. True the use of what looks like a dirty window to look through is clever but is it clear? Does it make reading easy? No, not for me, so although I will take the article at face value I won’t be asking the Prof. for help.

    I think he needs to practice what he preaches. His website is in need of repairs. The article is great though!

    avatar Shirley Bass says:

    Hi Clinton, Good to see you and Las Cruces on SiteProNews! I’m in Deming.

    I was grateful to know that Veranda is a good font for viewers to read. I have built my website on that font. (My host just updated their software, so I have to go back and make adjustments, but it should be veranda…if you look).

    Thanks for the nice info and a great article.

    Shirley Bass

    avatar Martin says:

    Interesting that the urban myth that fonts with serifs are easier to read on the wriiten page continues to spread.

    This theory was developed many years ago – note I said theory. I can’t remember the name of the person who developed this theory, but it has since been debunked many times. Apparently, he fudged the research as it didn’t come up with the results he wanted.

    Sans serif is just as easy to read on the written page as serif type fonts.

    But I do agree with the rest of the article – sans serif is definitely better on line.

    It is also important to check the facts before putting anything online – once it’s been published you’re at the mercy of what could be millions of viewers.

    […] read this article in its entirety, click here. Tags: copywriting, Web 2.0, web 2.0 agency, web 2.0 marketing agency, web copywriting, Web […]

    avatar seo copywriter says:

    Wholeheartedly agree. But most importantly we need to think about who’s reading the end product. I can’t tell you how many 60+ sites I’ve seen in typeface so small even my 12 year old can’t read it properly!

    avatar Siskiyou Web Design says:

    Interesting point in the post about the Author’s Website, font-type is small and Header Text is blotted out to match the site design. Text is difficult to read. That said, the font type and sizes are good starting points, but I also go to 14pt in many cases, just works for legibility better. Font-type and size are points for Accessibility which all designers should pay attention to for user experience.

    I have to agree with Jaquie Cooper’s comment above. The dirty window template is simply irritating on the author’s site and you cannot even read the contact info in the banner because of the design.

    Having said that, I agree with most of what is written in this article. To add another point, more and more as our population ages, I put a simple javascript function at the top of the page that allows readers to + or – the font size. Many people find that 10 and 11 pt type is just too darn small.
    I use this simple one from Dynamic Drive
    http://www.dynamicdrive.com/dynamicindex9/textsizer_dev.htm
    – very easy to use

    avatar crlanier says:

    Thanks for the comments, and I must admit my embarrassment at my own site. When I wrote the article above I was asked to provide a website: at the time my site was current and I was consulting: thus it was my business. I rarely consult and I made the cardinal sin of web-people by letting my site fall into disarray and disrepair. Its down now and won’t be back up. Martin, you are wrong that the serif v sans-serif is simply a myth. It is not. Read The Legibility of Print published way back in 1963. Much of findings have been upheld in other studies I’d be happy to provide you.

Submit a Comment

Your email address will not be published. Required fields are marked *






You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 3,851,743 bad guys.

css.php