The use of Typography in Web Design
Posted: 17/07/2012 11:06:59 Tags: Design, Typography
With the use of services like Typekit and Google Fonts increasing, the previously limited set of options for web designs has expanded rapidly. Where previously we had just a few, reliable web-safe fonts to choose from that worked on both a PC and Mac now we have Futura, Droid Sans, Museo Sans, Open Sans, Oswald... and they're just a few sans-serifs now available safely.
But as they say, with great power comes great responsibility. Just because you can now use 20 different fonts on your website, and want to combine three different serifs on one page doesn't mean you should.
In this blog post, I'm going to try to address some of the most common errors in web typography - most of which just need a few tweaks in the CSS to remedy.
Size Matters
You Don't Pay per Pixel
So there's no need to set all of you body copy to 9px. As a general rule, body copy should be between 12 - 16px. If it's a blog or long article, the bigger the better.
Headlines
As mentioned in my earlier post, a website should be 'scannable' - most people aren't going to read a website word-for-word on the first encounter. They're looking for information (most likely) and just want to know if your site has it. Whether it's the latest fashion in bright pink dog accessories or advice on mortgages, your headings need to be clearly defined.
For example, if your body copy is set to 12px, your H1 needs to be bigger than 13px and bold, ideally. Smashing Magazine give rough equation to help as a general rule of thumb here.
That said, there's no set in stone scale for headings, but once you've picked a size and scale - stick to it and keep you text consistent.
Line-Height
Line-height is the line height. Literally, the height of the line. Similar to leading, for printers, which is (basically) the space between the lines.
Line height should depend on the size, style and face of font in use. The line length (professionally known as a length of measure) can also have an impact - if you have a very long length of measure, the line-height should be bigger.
Because of the number of factors involved, there's again no hard and fast rule, but generally speaking it should be around 140%-150% of the text size and again, once you’ve picked a scale, stick with it.
Hello, White Space!
The pure amount of times I've had to ask somebody to increase the margins around text areas is astonishing really. White Space is not your enemy - unless you or your client has a documented record with an Arch Nemesis called Dr. W. Space, in which that's a person and still not your website.
White space helps draw attention to the text by forcing the reader to focus in - so next time a design has a lovely boxed bit of text, add some more margin! Let your text (and visitors) breathe.
Font Combinations
Something I spend quite a long time doing is working out font combinations that work for a client. As mentioned earlier, I don't approve of using two sans-serif fonts on the same page if they are very similar. If they are suitably different, I might reconsider. For example Raleway is a very thin and quite a rounded font that could be used for headings whilst another Sans-Serif takes care of the body copy.
As a rule of thumb, I don't use more than three - a headline font, a body font, and an optional third font (usually a handwritten or otherwise strong personality one). Sometimes, I excluded promotional banners in a slider from this rule. As part of a slider, they're not on the screen for too long and whilst they are on screen, they need to attract attention quickly. They also tend to be seasonal or sale based to a degree, which might not fit with the house style.
Design Shack has some great inspiration for Google Font combinations in you need inspiration - they can be found here.