Website Content & Fonts

Here we're not looking at what your words say, so much as how you present them to your visitor and what impact that presentation has.

For example, have you ever been to one of those "cool" (at least that's what the owner thinks) sites with colored text on a dark background? Do you find it difficult to read? Don't worry. It's not your eyes.

It is difficult to read!

What about yellow text on a white background? If you're sitting there thinking I'm just being ridiculous now and that no one uses yellow on a white background, your mistaken. They do – I've seen it myself.

The point here is that no matter how "nice" you think it looks, if you want your text to actually be read – imperative if you're selling something – you must make it easy on the eye.

Whatever the color combinations used, dark-colored text on a light background is easier to read than light-colored text on a dark background. You'll probably get away with breaking the rule for the odd label or note, but that's all.

Textured backgrounds are the same as dark ones or worse – avoid them. For a business site, black on white or cream, etc., is always the best way to go.

In additon, keep your main text aligned to the left. Centered text is harder to read, plus it looks messy and unprofessional. You'll probably get away with centered headlines, at least for the main page heading, but subheads usually look better if they are also left-aligned.

I doubt these two really need mentioning, but don't set your text size too small nor too large and DON'T SHOUT AT YOUR VISITORS BY WRITING IN ALL CAPITAL LETTERS ...

Differences in Font Faces

Choose a sensible font that most visitors will have installed on their PC, only then will the page look the same to them as it does to you. Include at least one other similar font as a back-up alternative. This can either be included in each of your font tags or preferably in a style sheet, depending on how you design your pages.

For example, the fonts I chose for the body text on NowSell.com are Verdana, Arial, Geneva, Helvetica and sans-serif, in that order. If the user's browser doesn't have Verdana installed it will look for Arial, if it doesn't find this it will look for Geneva and then Helvetica.

If for some reason the user's browser is still unable to find the specified font it will look for any font in the sans-serif family (these are all the fonts without – sans, a little 'foot' –serif, on the ends of the letters).

Why does any of this mattter?

Ensuring that your pages appear the same to visitors as you see them gives you more control over the image they have of you or you company. That's very important for business, as confirmed by this study of The Effect of Typeface on the Perception of Email, which would appply equally to a website.

You may have noticed that I particularly referred to the "body text" on NowSell.com above, and that's because Verdana is not my first choice font for non-body text areas. This is due to another important point you need to bear in mind when selecting your preferred font sets:some fonts take up considerably more room than others because of wider letter-to-letter spacing (known as tracking).

Look at the font of the text you're reading (Verdana) and compare it to the font of the headings on this page and in the left column (Arial). Can you see the difference? Though Verdana is a nice looking font, I find the character spacing too wide for headings, particularly in navigation bars, so I remove it as a choice.

In a similar vein, Geneva takes up much more space than Arial, whereas the size of (the admittedly less attractive) Helvetica is just a little smaller, so I decided to leave Geneva out too.

Both Helvetica and Geneva are Mac fonts, and you should be careful of the order you place them in your font tags. If you specify Arial, followed by Geneva, then any Mac user that doesn't have Arial installed on their system (admittedly few these days) will see the larger Geneva font.

Large differences in the size of fonts viewed on each of the two platforms lead to complications if you make extensive use of tables. For example, when this article was first written, the left column navigation bar on this page used to be plain text at <H5> in a table cell (graphics avoided for SEO and download speed). This will display fine on either platform and any browser when viewed with either Arial or Helvetica.

However if viewed with Geneva, the substantial amount of additional space this font consumes would result in some headings breaking onto the line below (continuing on the next line). Building the tables to suit the size of Geneva, would result in poor presentation for Windows uses, with lots of empty space and an untidy appearance.

Differences in platforms, further complicated by the different browser standards, mean that site design is by necessity a compromise (unless you're prepared to build and maintain several versions of your site, either statically of by use of different stylesheets). However, since the majority of my audience are Windows uses, I would be foolish not to make them my primary focus, whilst employing Helvetica as the best (if not the most beautiful) alternative for the minority of Mac users who don't have Arial installed.TypeTester is a good free online tool that enables you to compare Mac and Windows fonts at different sizes and see them side-by-side on screen.

(If you're reading all this in the default font and wondering what I'm talking about, you must be using a browser older than version 3 of Explorer or 4 of Navigator. These earlier browsers don't support CSS - Cascading Style Sheets. Because of the huge savings in code and increased flexibility they offer, this is the method I choose to implement font selection on NowSell.com Since only a very few people still use these browsers, the pros were greater than the cons. Sorry!)

Also avoid using more than two or three font faces per page (titles excepted), just because you can. It looks untidy and amateurish. You shouldn't need to use more than four font styles throughout your entire web site.

Small Windows Fonts Sizes On Mac.

Windows users have a screen resolution of 96 dpi (dots-per-inch), whilst Macs are usually at 72 dpi. What does this mean? It means that if you use very small text, it will appear tiny to a Mac user and they can't read it. Text at any size will always appear somewhat smaller on a Mac.

Obviously, when Mac users come across this kind of thing on a website it annoys and alienates them. Surfers have so many choices that you can't afford not to cater to as many as possible. Failing to do so not only reduces you're own audience, it increases loyalty to your competitors!

Incidentally, I feel compelled to interject here that I'm still continually amazed at the terribly quality rendering of text on Windows PC's. It looks naff no matter what application you're in – on a Mac text is just as neat, clean and crisp as you'd find in a quality book or magazine. The only thing that amazes me more is that so many people put up with it.

Another reason to avoid tiny text is that some search engines (most notably Alta Vista) penalize pages with small text, because they view it as an attempt to spam the engine.

In addition, with the "built for the Internet" iMac being the #1 selling PC since it's launch, Mac users now probably account for around 10% of surfers. As a group who, according to Nielsen/NetRatings, have an above average income and spend more time online than their PC using counterparts, that's something that most ebook publishers (free or otherwise) also ingore at their cost.