This post is about web typography and it's recipe of four fundamental ingredients. Typography is cool, hip and artful. Therefore it's a shame that it's basic requirements are almost never met by web designers.
If you ever made a nice risotto, you know that this recipe takes a lot of care and effort to make it taste just right. Put to much water to quickly and it becomes blobby, put to little to late and it turns out dry and tastes like cardboard. The same go's for typography. Apart from content, typography can make or break your website.
Typography for the web has come a long way since web 0.1. In these old days typography for the web was not an important thing. Today things are different. Not only do we have modern browsers that support images (yeah!), but we have the opportunity to make our pages come to life through great typography.
Contrast
Pale pink text on a pale blue background, is very cool for an old school t-shirt, but it doesn’t read well. Text is there to be read. Make sure that it contrasts enough with the background to achieve that. If you’re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You’ll soon see if you have enough contrast. Robert Bringhurst, a very cool typographer writes: "...typography exists to honor content". Are we honoring the content if we design our pages in such a way that the content is difficult to read?
Personally I dislike to read long stretches of reversed out text (e.g. white text on a dark or black background). It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.
Size
This one is easy. Don’t set body text below 11px and, if possible, make it bigger. Remember, what’s legible on your 65" High Definition Plasma monitor, might not be so on a 15" MacBook. If in doubt, make it bigger!
Hierarchy
Varying type size is one of the best ways to differentiate content. Colors and pretty boxes might help, but different sizes of type throughout your pages will show your readers the importance of your pages. If you have readers that are in a hurry, they can quickly pick out the important bits and might stay longer and read on.
Hierarchy can be achieved in other ways too. I've just mentioned using different sizes of type to achieve it, but you can also use different styles. For example all-caps or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.
Space
Let your type breathe. Don't be afraid to leave blank spaces in your pages. This white space will help focus attention on the text. Next, remember line-height. A good rule of thumb is line-spacing that’s at least 150% of your text size. (e.d. 12px font-size and 18px line-heigt). Good type designers put a whole lot of effort into the micro white space that sits inside type. They spend countless hours attempting to achieve a balance (vertical rhythm) between the lines of text. Likewise, we should take time to consider the macro white space, the 'voids' that shape our blocks of text.
Conclusion
Remember, these are not rules, but rather guidelines. However, follow them and your site will have that thing that makes user like you website very much instead of just a nice one.
The next post will be about the research I did on what CSS technique to use. It will show some different approaches with their pro's and con's.
This post is inspired by a great blogpost on the website iLoveTypography.
Comments