The art of typefaces

To most people, text is text. To me text is an integral part of the overall design. Look at it this way, text is the medium in which most website content is delivered. It needs to look nice, fit in with the websites design and most of all it needs to be readable!

With typefaces there really are no set guidelines as far as design goes, the main issue is making sure the typeface you have selected ‘works’ with your website design. I’m going to go over some best practises it pays to follow when selecting fonts and typefaces.

Jump in after the break, this is going to be a fairly detailed post and it might just amaze you how much actually goes into selecteing the correct and best fonts!

Sans Serif with Serif

This is the most common principal when creating font combinations on websites. Use a sans serif header with a serif body typeface. This example below shows how well this works. On the left the typefaces Trade Gothic Bold No.2 (header) and Bell Gothic (body). They look nice together and produce a very readable section of text. On the right the same header typeface is used, but this time a different body typeface, Sabon, is used.  This gives the body text a very different feel. An almost clinically sterile appearance.

Avoid similar typeface classifications

Using the same classification of typeface can cause unwanted tension between blocks of text. For example using different types of slab serif can result in a somewhat conflicting design verging on the obtrusive. Check out the image below you can see how the fonts almost fight each other for attention. Its best to try and avoid using the same classifications if you can help it.  That’s not to say it always looks bad, you may well find combinations that work.

Font Weights

A common way to cause design issues which directly impact upon readability is to muddle up font weights. Font weights should be used to guide readers around the content. Its not hard to get right, but if you get it wrong it sure will look bad. Titles and headers of content blocks are usually in bold, this makes them stand out and the reader knows its a title. Take the image below. On the right you can clearly see the title, its bold big and brash. Yet on the left it fails to create the impact a title commands!

Variety of typographic colours

Typographic colour is the combined effect of font weight, size, stroke width, leading, kerning and a few other factors. What this basically means is the overall image a block of text gives.  Look at the example below, if you squint the left hand side looks mashed together, you can’t work out just whats going on.  The text all bleeds into each other creating one hell of a mess. Now look at the right. You can make out the different sections of text quite easily.  even if you can’t read it you still know where the header is and the content.

Its crucial that designers get this right, it guides the user around the content and without guidance text with its liniar nature becomes obsolete.

Conclusion

There are no set in stone rules you need to follow when it comes to typefaces.  The danger is becoming so bogged down in selecting fonts you neglect the other design aspects creating websites commands you to respect.  These few guidelines will help speed up the font selection process and further streamline your design efficiency!  If you have any questions then fire away in the comments below.