How important is typography in web design? Very. Your website is an extension of your brand, and its typography dictates the personality. A customers perception of a site can be transformed by typography. If we take our site as an example, you can see how a few quick updates to the font type can dramatically alter the feel of the message.
Many businesses have clear guidelines in place for the use of their brand elements. However the majority of brand guidelines I’ve come across have detailed guidelines for print applications, but little or no consideration for application on the web. Often fonts designed for print don’t render well on screen. Legibility considerations are different too, Serif fonts are easier to read in print, (all newspapers use serif fonts), but on-screen sans-serif is more legible.
If your brand uses a serif font for body copy in print, translating this literally to the web may not be the best idea. For headlines, serif fonts can look great, but for large amounts of body copy on the web, sans-serif fonts are generally regarded as the best choice.
Choosing a font
Gone are the days when we were restricted to less than 20 ‘web safe’ fonts. Modern web design allows for almost any font to be embedded into your site, assuming you have the correct usage rights, (more on that later). While there are many other factors to consider when designing for the web, font choices can have a massively powerful impact. The font choice needs to reflect the personality of the brand, is it strong and bold or light and airy? How do the characters flow in a paragraph or as a headline?
Often we chose a different font for headlines and body copy, as you can afford to be a bit more creative with a headline font. If going down this route, you need to make sure that the chosen selection of fonts compliment each other. The interplay between two fonts can create its own mood, and mixing fonts can create a more unique and recognisable treatment when used consistently. A picture paints a thousand words, and the typography masters at Hoefler&Co have illustrated here how different font combinations can create very different moods. There are no set guidelines for mixing fonts, this will depend on trial and error, and can be one of the most crucial points of the design process.
Web designers need to consider practical issues surrounding font choices too. How the font will render in browsers? How it will work in the flow of a paragraph? If the site is translated, will the font be able to cope with special characters and ligatures? Are the necessary styles and weights available for the font? You’ll likely want to use bold and italic text in the content of your site, not all fonts come with specifically designed styles for these.