A well designed web page

This webpage is a good example of one that's easy to read and looks nice.

Code

This page is coded in HTML 4.01, because I'm lazy and can't be bothered to self close single tags for XHTML. Either of these are prefectly good choices for document encoding for web pages. XHTML having the added bonus of course of being XML compliant too.

Importantly, the code is valid. Valid code means that browsers will consistently display the page between vendors. Obviously there will be a few differences due to the nuences of different HTML rendering engines.

The design and markup of this page are completely seperate. This is very important for accessibility reasons. Not relying on HTML formatting also gives much greater flexibility in the design of the page, floating tableless layouts aside.

Colours

The colours of the page are simple, striking and not overused. The colours are grey #333333; orange #ff9900, #cc6600; and blue #0066cc.

Having a good contrast between the text and background, without overpowering the end user, is pretty important. If they can't read the page or it hurts to look at, they're going to go elsewhere.

Fonts

The font and background have a strong contrast, aiding readibility. The font isn't too small or too large. Headings are much larger so that they stand out. A lot of new webdesigners don't realise that fonts are pretty fickle, overlooking how fonts work and making a complete hash of their design.

The way that fonts work on the web is pretty simple. If you wish to make some text a certain font, you have to have two things:
  1. the correct code on the webpage
  2. the font installed on the viewers computer
The second of those two is the one that everyone often forgets: The font must be installed on the viewer's computer.

There are not many fonts that are installed by default on someone's XP computer - the font list is similar for Macs. Microsoft don't have a list for Vista yet, but I'd imagine that it's similar to the XP list. The list numbers about 50. Those are the only fonts that you can almost guarantee are installed. There are a couple of differences for the Mac platform, I'll get to those later.

Of those fonts, however, not all of them are suited well for the web. Times New Roman is a good example of a font that does not display well on-screen. This study into the readability of fonts concludes that by quite a wide margin, that 'Serif' fonts like Times New Roman are much harder to read on a screen than 'Sans-Serif' fonts like Arial. This is because the finest detail your any computer screen can render is a pixel, and pixels are rendered at about 72x72 per inch. Compare that to at least 300x300 per inch when printed on paper. The serifs tend to get in the way of the rest of the text on computer screens.

Lastly - there is the considerations of the design of the page to be taken into account. I'll give the example of a site that I have put together for a friend's World of Warcraft guild, currently hosted on my server space. Its design aim was to blend in well with the fantasy setting of World of Warcraft - hence the dark colours, parchment background and serif text. Compare that to another work in progress at the moment, a used car dealership and garage, where the look is much more clean and modern. As a general rule: serif fonts are better for old fashioned looking design; sans serif fonts are better for cleaner, more modern looking design.

Taking into account all of those considerations, picking a font that looks good, is readable and is a sure fire bet that the end user will have installed can be a bit tricky. To make matters more complicated, some of the fonts have different names across different platforms. However, after applying all of the above design constraints, one is left with a very narrow selection of fonts that can reliably be used:
It might sound a little constrictive, but in reality all of them are decent fonts. Like I said above however, not all of them are so good for the body-text of a website.

The fonts that one should really avoid using for body-text on-screen are Times New Roman / Times, and Andale Mono. Their readability is fine on-screen when used as titles (and as such appear infrequently and tend to be larger, facilitating some space for the serifs), but they woefully fail as body-text.

Palatino Linotype / Book Antiqua is, however, quite readable for a serif font on screen. It is the first choice font that I have used on the Union of Mercenaries example I gave earlier. To be safe, this font really ought only to be used at a size of at least 13 pixels.

Georgia is better than Times New Roman and Andale Mono but not quite as good as Palatino Linotype / Book Antiqua. An acceptable substitute to the above. I've used this as the second choice font for the Union of Mercenaries example. As a minimum the font should only be used from 14 pixels or more to ensure a decent legibility.

However, at the useful end of the scale in usefulness on the web is Verdana. It's a comparatively wide font that was designed to be readable on a computer screen even at obtusely small sizes. 8 pixel high Verdana is still legible. Tahoma is a similar font, except it is narrower and the letters are closer together.

Arial / Helvetica is not quite as readable because as Verdana because it's rather narrow; and is also rather disinteresting to look at. It is a clean and modern font though - and it's readability issue can be mostly rectified a bit with clever CSS coding.

Armed with all of the above information, I can make informed choices about what fonts to use on websites.