By Carol Green, Courtesy of Design Assembly
The world wide web is no longer in its infancy, yet still I regularly visit websites whose typography is all up the wazzoo.
This may be due to several factors:
History: Until only a couple of years ago, web type was so restrictive it would regularly make print designers’ heads explode. Remember pre-CSS when you had a choice of only 7 fixed font sizes, with no leading or kerning controls? While it’s still not perfect, and is still a long way from affording the fine control that print designers enjoy, there have been some radical improvements of late.
Access for all: Anyone can make a website – they may not all call themselves ‘web designers’ but they have, nonetheless, designed websites. Many web designers are self-taught. Others are print designers starting to delve into the nerdy world of web design. Yet others are developers ‘doing some front-end dev’.
Changing technology: Anyone who is involved in web design will recognise the ferocious speed at which software is updated, standards change (and improve) and innovations are made. Just when you think you’re up with the latest CSS-3 standards, someone introduces you to a new technology.
Lack of focus: Web designers each have their own passion. Yours might be writing clean code, wrangling CSS or creating amazing images. Mine is semantic HTML, which means I don’t spend as much time thinking about typography as I should.
So what do we do about it?
Educate ourselves, our collaborators and our clients.
I regularly work with print designers on look-and-feel for projects. And they are a picky bunch. While they are usually really specific about what they want in terms of typography, they don’t always have the technical or contextual know-how to make the switch to web typography. I try to explain to them why default web text is so big, why it’s OK to scroll, and why they might have to take a deep breath and live with the widows. They don’t always understand or agree, but usually we can compromise.
Focus on typography
Web design is 95% typography. It’s all about communicating information. If your typography hinders easy reading of the information, your communication has failed.
Testing is a given, right? But don’t just do cross-browser and cross-platform testing. Use the zoom controls in your browser and see how that breaks your site. What does your typography look like on a phone? On a tablet? Show your site to other people and watch them read your text.
Read my rules-of-thumb, think about them, then use them or disregard them
16px: Try to keep the default size for body copy where possible (I’m still working on this one)
Leading: Default leading is too tight. Increase line-height by about 140–150%.
Font choices: Delve into the murky world of @font-face at least once for each project. Send collaborators (or clients) to FontSquirrel or Typekit at the start of a project (depending on the budget). Refuse to make image text.
Contrast: Use #333 instead of black for body copy on white. It hurts less.
Correct marks: It’s all in the detail. Use proper quote marks (“ and ”) and proper dashes (– and —). Someone will notice and will care.