Secrets of Great Website Typography
March 03, 2009 filed under: Website Design
Typography is important in any medium but on a website it can be the difference between professional and amateur. Below are my secrets for great website typography.
Be aware of website safe fonts
The biggest limitation with website typography is the limited number of fonts that can be used. Currently, fonts cannot be embedded into a website. This means that you are largely at the mercy of the fonts installed on your users machine. You should stick to the list of commonly installed fonts to ensure your content uses the fonts you define.
Avoid using images as text - use replacement techniques instead
Using images as text was a popular way to use a font that is not listed in the list of common website fonts. Don’t do it. Doing so creates accessibility concerns and also hurts your search engine rankings. If it is text, make sure it stays text in your code. The better alternative is to use image replacement techniques. These allow you to use text in your code but then replace it with an image on the screen so users see the font you desire. SIFR and FLIR are two that I have used and like. This technique should be used sparingly (headlines only!).
Use no more than three fonts
OK, now that we have the big technical limitations out of the way let’s focus on the practical. I tend to use no more than three fonts when working on a website (and often only two - one for headlines and one for content). Do not get carried away with the number of fonts you use. This quickly gives your website a scattered, non-uniform feeling that is best avoided. Instead of using many fonts, try variations in size, style (italic / small caps) and weight (bold) for the two or three fonts you do choose.
Adjust line height and letter spacing
In the print world these are known as leading (line height) and kerning (letter spacing). By default browsers use very tight line heights. I always increase the line height to add white space to the screen. Doing so encourages people to read your content by making it appear less dense. With letter spacing I tend not to adjust the main content but will experiment with headlines. Try both increasing and decreasing the letter spacing of larger text. You’d be surprised how this subtle change can positively affect the overall design.
Experiment with color
Nearly all websites will benefit from adjustments to font colors. Sure you can use black for all your text but how uninspired is that? I will frequently soften black to a dark gray. It is a very subtle difference but one that gives the letters a softer, easier to read feeling. When it comes to headlines experiment with bolder color choices. Now, I’m not suggesting screaming reds and neon greens but using colors that match your logo and color scheme in your headlines will go a long way to setting your website apart.
Keep font sizes adjustable
Modern browsers are doing a better job about making sure that font sizes remain adjustable no matter how they are defined; however it is still a good idea not to define your font sizes in pixels. Instead set your font sizes using an em unit or a percentage. Doing so will ensure that your website will respond when users try to increase or decrease the font size, regardless of their browser.
Maintain contrast between your background and your fonts
Just because your eyes are good doesn’t mean your users’ eyes are. Keeping a high contrast between your background and your fonts is important. Black fonts on a white background provide the maximum contrast. I’m not suggesting sticking with this combination, but keep contrast in mind while you experiment with colors. In general I use a white (or very lightly colored) background and a much darker color for the fonts. On a related note, stay away from light text on a dark background. It is much more difficult on the eyes.
So there you have the secrets of great website typography! Use them well and you will give your website a very professional visual appearance and a solid technical foundation that your users will appreciate for such things as font-resizing and accessibility.