First Thoughts on Typography for Your Website

The subject of typography at your website is a large one, and I'm not trying to cover it. I'm assuming here that you're not doing the design work yourself, and that what you need is enough information to recognize whether you have a problem, to choose a designer who has the skills you need, or to keep the updates you do yourself from making your site look bad.

Let's start with a good example and a bad one. The example above, from the work of Jay Jaro, shows basic things to look for in good typography:

• The left margin is even, and it's large enough.
• The decoration at the margin is balanced; the proportions are pleasing.
• The right margin, while ragged, is not excessively or distractingly ragged.
• The spacing in between letters and words is smooth
• The spacing between lines is enough for easy reading.
• The spacing between graphic headings and text headings and the main text is well proportioned.
• The decorative headings are still search-friendly text.
• When there is an uneven line, it's intentional and part of the design (in this case, the titles use a fun font that looks hand-drawn, and the title curves like a tiger's tail when it says "Take the Tiger by the tail").
• The differences in colors and fonts are enough to be interesting but not enough to interfere with reading.
• The design is appealing and in keeping with the goal of the page.

The second example, from someone who will remain nameless, has not succeeded in meeting that standard. The right edge is way too ragged, and the words are very crowded (note the top left corner of the sample piece -- sometimes there are no spaces between words at all, and there's a line containing just one word.

The graphic headings cut the columns in half. The spacing between the graphic headings, the text headings, and the words are unbalanced. The use of color and line is uninspired. And the graphic headings are images, so we lose some search advantages, too.

If you see this sort of problem at your website, don't despair. It just means that you need a designer. Find someone whose work is more like the first example than like the second one, and ask him or her to take the text and redesign it.

But what if you use a content management system, and you add content yourself?

Here's another bad example. We're fixing up this website -- not a redesign, since the owner likes the look, but a fix of content and usability, with some updates to the code and the look. This is an example where we're seeing some problems in the part the client does himself.

He's chosen light text on a dark background, which is fine unless you think you might have some older customers or visitors with limited vision. He's also chosen justified margins. That means that the program automatically adjust the spacing to make the margins even -- but look at the size of the spaces between the words!

You can only pick justified margins if you're willing to fool around with your wording and font sizing and so on to make it look good. In general, you're better off just choosing left-justified, where the words line up on the left.

If you really want to use justified margins, do as Josepha has done and keep an eye on it -- if it doesn't look good when you put it on the page, go back and change your words to make it look nice.

Finally, resist the temptation to have lots of variety. This example has trouble with spacing and margins as well, but much of the daunting effect of the page is the result of the variety of colors, fonts, sizes, and borders. There's nothing wrong with a little bit of variety, but the rule of thumb should be only to use something different if you have a reason to do so.

In the example at the top of this post, the main text is in a simple, easy-to-read font, black on a light background color. The designer then used another color in the text headings: bold, in a darker shade of the background color. The decorative titles at the top of the page are completely different; they, and the whole color scheme of the page, are based on the major illustration. In the bad example just above, we have different colors all over the page with no apparent plan or intention. There is no illustration, and no color scheme.