Image made using Wordle
There are a number of key building-blocks that I feel should always be included in quality web design. Starting with the basics, today’s post is dedicated to one of the truly great powers of not just web, but graphic design in general: Typography.
Gotham? Isn’t that where Batman lives?
Type has often been overlooked in web design in the past, mainly due to the lack of support for fonts by web-browsers.
This is why we’re all aware of fonts like ‘Arial’ and ‘Times New Roman’, and should appreciate the horror of ‘Comic Sans’ (a.k.a. the nemesis of all graphics professionals) but are less familiar with ‘Gotham’ or ‘Lobster’ (though you’d most likely recognise them).
Nowadays we have no excuse for typographic ignorance; the vast majority of web browsers support rich font processing, and many of your competitors will be thinking about it. So modern web designers need to know their ‘Neo-Sans’ from their ‘Museo Slab’ - the choice of type is just as important for the screen as it is for print.
Create your palette
Typography is as crucial a consideration to the design process as choice of colour and imagery. It is a defining factor both aesthetically and in terms of usability.
Just as you pick a colour scheme at the start of the design process of a website, you should be choosing a palette of fonts.
Think along the lines of a 2 or 3 font pallette: The more you choose the harder it will be to make them work together, the same way that you’d struggle to blend together a large combination of colours. Think:
- Do you want the fonts to compliment each other?
- Do you want them to contrast or jar against one another?
- Serif or sans serif?
- Are you going all out with a bold display font, or keeping everything subtle?
We can apply as many moods to a font as we ever could to colour, so all your design goals must be considered when putting a palette together.
Consider if the font portrays the values that you are looking to represent in your website. The style of the text in your site will carry this through as much as the content it conveys. A font can represent any number of personalities: energetic, cheeky, corporate, modern, retro, angry, slick, brash, funny etc, and can provide texture or excitement to a plain design or calm one that is complicated or bold.
How the fonts are chosen and combined depends on the requirement of a specific design. The feeling a palette conveys should reflect a theme or mood - which suits the customer brief! In short, it’s all about the vibes!
Hoefler & Frere-Jones Type Foundry advise the use of one central theme in all of the fonts in your palettes, but to let all of the others vary. So for example, as long as your typeface evoked trustworthiness or a corporate feel, you can do what you like with the rest.
The more distant the moods in your typographic palette, the riskier the design will be.
Think of the ways type will be used in your site: There will be general body content, sub-headers and navigation, plus the need for bold and descriptive headings. Perhaps you could use a big bad display font sparingly on each page and combine this with a more subtle, san-serif font in the body of your content, to carry through your modern business values. Maybe introduce a third hand-script or serif font to contrast the two of them.
[Tweet "The more distant the moods in your typographic palette, the riskier the design will be."]
Work a few of these font elements into your design and play with them until you have a combination that works together and meets your overall design objectives. If you look at the design of websites that you like, by and large you’ll find that the values of that company or organisation have been thought of and applied to their choice of type.
Just my type
So the moral of this first note on a web design building block is to consider your choice of font with as much thought as you would colour, layout or photographic style.
Creative type-faces aren’t to be marked “arty-farty” and shunted back into the realm of pretentious print design; Type palettes can and should be used as a powerful building block in the web design process - they can make or break the look and feel of your website. Make sure you have one!