What I know about typography

Whilst I am a ‘professional’ web designer in so far as I get paid for designing web sites, I am not a professional typographer. However, like so many other design related topics, I have become fascinated with typography and I have spent a considerable amount of time reading, researching and playing with it.

To save everyone some time, and in an attempt to ‘raise the average’ so to speak, I have written this article on web typography. So here, in no particular order, is what I know about typography.

You shouldn’t adjust the letter spacing
There is some debate on this one. But the general consensus is that for display type, you may need to adjust the kerning between certain letters but for body type, assuming your using a quality font, you should trust that the default spacing is as legible as possible.

As further evidence of the “trust the typographer” theory, In the book “Grid systems in graphic design”, Josef Müller-Brockmann says “The designer is well advised … to insist on normal spacing between letters”

You should not justify your text
When you look at a page from a distance, justified text might look better. You may also notice that some magazines and newspapers used justified text and it looks and reads fantastically. However, when it comes to web sites and documents published by average joe computer user you should left justify text.

Current web browsers and most word processors do not do a good job of justifying text. Properly justified text is properly hyphenated and the line length and font size are carefully set to produce the best results. You do not have this kind of control over the text in a web page so you end up with rivers and rediculous letter spacing that slows reading down considerably.

Keep your line length between 35 to 65 characters
Recommended line length is 35 to 65 characters, or seven to ten words. Anything shorter than 35 characters and your readers will tire from scanning the text, anything longer than 65 and your readers will have trouble efficiently moving from one line to the next.

Fortunately for people with poor eyesight, but unfortunately for you, most web browsers allow users to play with your carefully set font sizes. If your using pixels or percentages to set the width of your containers then you have absolutely no control over line length.

There is a way out though, and that is setting the width of your columns in ems. Doing this will ensure that now matter how much bigger or smaller the end user sets their font, the size of the column will always be proportional.

The problem with this method is that most images are rastered images. There are vectored images out there which you could also size in ems, but support for these formats is limited. An option is to embed your images in flash files. You will still loose quality when the image is anything other than its original size, but for now, its the only real option.

Appropriate leading depends on your line length
I have seen articles on blogs recommending that you to set your leading at 1.5 or 1.6 times the size of your font. They are not necessarily wrong, but you do need to take into account line length. Generally speaking, the longer your lines the more leading you need. If you apply too much leading on short lines the text will become disjointed and your readers will notice.

Do not mix similar type faces
In the book “Grid systems in graphic design” by Josef Müller-Brockmann (which, btw is worth its weight in gold; every designer should own this book) Josef says “under no circumstances should two similar typefaces be mixed”

Watch for widows
Once again, this is a very hard thing to do when it comes to web sites. Even if the user doesn’t resize the text on their browser, there is no way to know which of your predefined fonts they are using, what dpi their screen is set to, what browsers they are using, or if there are any other factors effecting the font sizes.

To minimize the risk of widows you can set container widths in ems and specify sensible ‘backup’ fonts, but this doesn’t guarantee anything. On little hack that can help is using Shaun Inman’s ‘widont’ trick. This adds a non-breaking space between the last two words of the specified text. Although it’s PHP, at it’s core is a clever regular expression, so it’s quite portable.

Select sensible font sizes
This whole web 2.0 craziness has led to some interesting trends. One trend is overly big font sizes. This is only slightly better than the tiny font sizes that were popular in the late nineties. Font sizes need to be carefully selected. Fonts that are too big or too small will tire the reader.

For most typefaces, 10pt seems to be the smallest readable size, whilst 12 or 14pt seems an acceptable size for body type.

Select a sensible typeface
Another area where web designers draw a short straw is typeface options. Whilst there are thousands of fantastic fonts available, there are very few that you can safely assume are installed on your users computers. Flash users have some options as far as embedding goes, but there doesn’t look to be any light at the end of the tunnel for more ‘traditional’ web developers.

So, even though you might have found a more suitable font, you are limited to the likes of arial, verdana, lucida and helvetica for body type – It is generally accepted that sans-serif fonts are more legible on screen than their serif counterparts.

Use a sensible hierarchy
When you divide your page with subheadings you need to ensure it is logical.
As a side note, remember to style your h tags for headings and subheadings. Not only does it result in cleaner, more accessible markup but search engines will give you much more loving.

Keep your rhythm
Unfortunately this isn’t so easy on the web, but thanks to tools like syncotype and CSS frameworks like blueprint decent horizontal rhythm is becoming more accessible to the weekend designer.

This is all related to grid theory, and the heirarch mentioned above. You need to be very careful when choosing font sizes and leading.

Perfect web page typography may well be impossible
When working with html and css, you have very little control over type. You may notice that most font foundries use flash for their web sites as it allows that little bit of extra control (that, and they can embed their fonts to show to the world)

But we should try all the same
After saying that, there is still a lot that can be done and if you want people to read your content then you need to do as much as you can to make it easy to take in.