Web Design is 95% Typography

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Information design is typography

Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites:

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.

With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”.

Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago:

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.

Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?

Too few fonts? Resolution too low?

The main—usually whiny—argument against typographical discipline online is that there are only few fonts available. The second argument is that the screen resolution is too low, which makes it hard to read pixelated or anti-aliased fonts in the first place.

The argument that we do not have enough fonts at our disposition is as good as irrelevant: During the Italian renaissance the typographer had one font to work with, and yet this period produced some of the most beautiful typographical work:

The typographer shouldn’t care too much what kind of fonts he has at his disposal. Actually the choice of fonts shouldn’t be his major concern. He should use what is available at the time and use it the best he can.

Choosing a typeface is not typography

The second argument is not much better. In the beginning of printing the quality of printed letters was way worse than what we see on the screen nowadays. More importantly, if handled professionally, screen fonts are pretty well readable.

Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography.

Treat text as a user interface

Yes, it is annoying how different browsers and platforms render fonts, and yes, the resolution issue makes it hard to stay focused for more than five minutes. But, well, it is part of a web designer’s job to make sure that texts are easy and nice to read on all major browsers and platforms. Correct leading, word and letter spacing, active white space, and dosed use of color help readability. But that’s not quite it. A great web designer knows how to work with text not just as content, he treats â€œtext as a user interface”. Have a look at Khoi Vinh’s website, and you’ll probably understand what that means:

Slightly more famous examples of unornamental websites that treat text as interface are: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. Control over typography is not just a basic design necessity, knowing how to treat text as a user interface is the key factor for successful Web design. Successful websites manage to create a simple interface AND a strong identity at the same time. But that’s another subject.

UPDATE: As it raised so many eyebrows, hands and questions I decided to write afollow up to this article.

Where to start: Resources

On the Web

1. Web typography In order to “allay some of the myths surrounding typography on the web”, he has “structured his website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS”.
2. Five simple steps to better typography The kind of typography he is talking about “is not your typical ‘What font should I use’ typography.” A good read for those who believe websites are usable when leaving font size and line spacing to default while letting the text width expand to wherever.
3. Khoi Vinh Co-founder of behaviordesign. Currently design director at NYTimes.com. Extremely talented man.
4. Rod Graves Communication designer. Sublime work: “Typography is a definite focus for me. Typographic grids and hierarchies usually form the foundation of the visual languages I develop.”
5. A List Apart Communicating via typefaces. Fonts and layout. Designing for readers. Legibility. Typefaces, graphic design. Problems of typography on the web. Controlling web typography: size, font, color. CSS methods, browser problems, user problems, and workarounds. Make sure you read this article as well.
6. Association Typographique Internationale ATypI (Association Typographique Internationale) is the premier worldwide organisation dedicated to type and typography. Founded in 1957, ATypI provides the structure for communication, information and action amongst the international type community.
7. Thinking with Type The on-line companion to the book Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students
8. Typetester Compare screen type
9. Typophile Typophile is a member and sponsor-supported community. Since 2000 Typophile has been guided by open collaboration and the idea that we’re all always learning. They serve 3+ million pages monthly.
10. Typohile Wiki A user-created encyclopedia of all things type and design-related. Users create and edit Wiki entries with the aim of becoming a collaborative, useful, balanced and relevant resource.
11. The Next Big Thing in Online Type Bill Gates wants computer users, well, Microsoft users, to have a more enjoyable on-screen reading experience — so much so that he made improving reading on the screen one of his top five priorities.

Books

1. Emil Ruder, Typographie Emil Ruder’s Typography is the timeless textbook from which generations of typographer and graphic designers have learned their fundamentals. Ruder, one of the great twentieth-century typographers was a pioneer who abandoned the conventional rules of his discipline and replaced them with new rules that satisfied the requirements of his new typography.
2. Kimberly Elam, Grid Systems: Principles of Organizing Type Although grid systems are the foundation for almost all typographic design, they are often associated with rigid, formulaic solutions. However, the belief that all great design is nonetheless based on grid systems (even if only subverted ones) suggests that few designers truly understand the complexities and potential riches of grid composition.
3. Muller-Brockmann, Grid Systems: A visual communication manual for graphic designers, typographers and three dimensional designers. From a professional for professionals, here is the definitive word on using grid systems in graphic design. Though Muller-Brockman first presented hi interpretation of grid in 1961, this text is still useful today for anyone working in the latest computer-assisted design.