Theory
Typography
Web Design
Don’t forget the type
by Carol Green on 25/01/2012
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.
Test sites
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.
Another one here: http://www.160over90.com/
Clever site design, great typography, and some truly impressive work.
Here’s one I came across the other day: http://hellohappy.org/beautiful-web-type/ – some cool typography and a great example of what can be achieved with the tools available.
Thanks Peter, I am working my way through webtypography.net, one. principle. at. a. time. It’s a great resource – bite-sized pieces, perfect for the web.
Wondering whether people can add some links to their favourite sites (from the POV of typography)?
I’ll start: http://methodandcraft.com/ – love the typeface (Skolar – https://typekit.com/fonts/skolar-web), body-copy size and clear hierarchy. Probably more margins between paragraphs than I would have used, but it works.
I agree with the article’s main point, that many websites use poor typography. But perhaps this isn’t that surprising, given that there are many print designers out there making poor typographic choices as well.
I think web typography is fast becoming a discipline within its own right, especially with the introduction of @font-face and css 3. Even a designer with a deep appreciation of traditional typographic principles won’t simply be able to transfer these to on-screen reading, although they will have a head start on those who think good typography amounts to choosing a nice typeface.
I’ve always thought of css as being similar to the typographic specifications drawn up by typographers for printers, in the days before desktop publishing, which has helped me make the transition from designing for paper to screen.
One very interesting source of information on web typography can be found at http://www.webtypography.net, where the authors are attempting to apply Robin Bringhurst’s ‘The elements of typographic style’ to the web.