An avalanche of comments, hundreds of applauding blog entries, honorable mentions from cooler and more sublime and hotter and higher places, forum discussions, translations in Chinese and partially in Italian and even blunt plagiarism was incited by one of my recent notes on Web Typography.
In order to not answer to each commentator individually, I decided to write a summary that answers most of the raised concerns, accusations and questions. As a result I think that managed to make things a little clearer.
Justin: My issue is quite simply your title. I don’t disagree that typography is important in web design, but you are implying that non-typographic concerns are unimportant. That is sensationalist and unfounded.
I didn’t intend to be loud or (un)popular. Until recently, mostly friends and clients were reading my notes. I had about 100 visitors a day. This article found its readers almost by itself. Within 30 minutes after posting it on reddit I had 1,500 users on my websites. That is not a given. Reddit is a tough place. From then on it all went by itself. Because it came from the guts, because it was passionate. Internet users appreciate that. And it must have had some truth to it…
I am writing these entries with the goal of publishing a book on usability and branding one day. And I am really enjoying the input, as it helps me improve my writing, my book, as well as my work. I learned more from the readers’ reactions than from many smart books.
Joran: Type as interface. Such an obvious idea. So obvious everywhere. Google. Etcetera. Yet it’s obviousness is only articulated by some, i.e. I.A.
“Text as user interface” is a concept and notion coined by Cameron Moll. From the many positive many reactions I got, it’s become clear that I am not the first and not the only one to think so.
The 95%-idea first came to my mind while designing. I realized that even after defining the information architecture in detail, frantically pushing around boxes and changing colors for days is an inefficient method. In order to find a nice grid, into which I could fill the usual modular navigational and content elements, I should start with the text mass and organize it with a grid that guarantees optimal readability.
Most websites try to get text across, and most websites fail in that regard. And the “cocky designer” website fails as much as the usability specialist’s with its unfriendly text Sahara.
In 2004, design by fire started a little contest: Design eye for the usability guy or how to make useit nice. Via N. Derksen.
In the mean time, Nielsen finally seems to have dropped the 100% scaling of his old articles and added whitespace to his new articles. Where usability gurus usually fail:
- The text lines (measure) are too long
- 100% scalable is not a reader friendly solution: Don’t make me think, ok, but don’t make me resize my window either
- Lack of whitespace
- Lack of active whitespace
- Linespacing is too narrow
- The text blocks are not well aligned
- Too many font sizes
- Pictures are badly placed and disrupt the reading ease
Where designers fail: Scrivs, so you’re the dude 2.0—and your company does good work, but what were you thinking when you downscaled the font size on wisdump? I know that I can scale it up with a simple key combination, but I don’t want to. I am too lazy to adjust the font size. Common art school graduate’s mistakes are:
- Text-background color contrast
- Lazy handling of titles and subtitles
- Text sizes
- Text blocks that are not split up into enough small, scannable, digestible parts
- Indiscernible links. Visited and non visited links are not discerned
- Text is not treated as an interface but as decoration
- It’s not clear if the text is a navigational element, a link or plain text
- Fancy navigations marking the center of attention (content is the center of attention, content deserves the most love from the designer)
Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience.
Web designers are not reading enough books. We are hunting for interesting snippets and quick solutions via Google and Wikipedia and Alistapart. Yet typography is an old school discipline that requires a lot of studying, repetitive concentrated effort and looking at printed materials. Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal reading experience.
And typography is not so much a matter of taste as of rules and the method of applying them. There are clear rules for leading, spacing, kerning, and measuring font sizes. And if you know and apply these rules, the text will look better and will be easier to read. And if you know and apply them well, you have the right to work against one or the other rule as well.
Yes, these books are expensive, but they can make us much more money, as they will make our clients happy right away.
femmebot: Hmm, if we’re taking basic design elements, I’d say it’s more 95% (if not more) grids, not typography.
While researching how to methodically define a reader friendly grid, I realized that defining grids is a typographical issue in the first place. Particular revelations were Ruder’s book and Mueller Brockmanns book.
Mike: Sorry, web design is not 95% font selection.
I agree, Mike. But you didn’t quite get it. Master typographers don’t get tired of repeating that the main rule of the typographer is to make the text as easy to read as possible. I was pleased to read that what they describe as the typographer’s job is what I understood being the information designer’s job. “So after all, information design is not something we made up”, I thought. I said it before: Typography is not about choosing fonts.
Making the text easy to read is the design method I was looking for
As an experiment I followed this one rule (make it easy to read) for an afternoon, when ‘realigning’ the iA website. I realized that making the text easy to read is the design method I was looking for. In a medium that usually makes it very hard to read you have to know the original rules of typography by heart. The rest (colors, line or not, boxes, what picture and how big etc) falls into place by itself.
Even though we all know that reading is what we mainly do on the web, we thought that online we could snub the rules of typography. Some said that due to different platforms, annoying resolution issues and lack of fonts there was no point to even start to care for typography. What a cheap excuse! What a severe misunderstanding of the medium. We don’t need to make sure that a website looks the same on all platforms!
Some think we need to use 100% flash to ensure that the site looks the same on all platforms. We don’t need to make sure that a website looks the same on all platforms! Again: What a severe misunderstanding of the medium. What we need to do is make sure that it is as easy to use and as easy to read as possible on the maximum number of devices through which it can be accessed. In Japan, it is a given that a professional website works on the cellphone.
We were too lazy
Nowadays we don’t need to fully define the grid before we set the type, we can always “still adjust it later on”. Instead of using the new possibilities, the new ease of defining a solid typographical grid, the commodity of laying out on the screen, and the possibility to adjust later on made us lazy and sloppy.
Instead of using the precious know-how that has been accumulated, tested and cultivated over the years and adapting it to the web, designers are playing around with boxes and colors and lines and flowers and funny ornaments, like kids, to be later on dictated to by hard headed artless usability nerds in beige trousers and pocket protectors how to deal with text, structure and color.
Because it is so hard to read online, the web thirsts after the typographical wisdom from people like Tschichold, Ruder, Mueller-Brockmann, Weingart, Bringhurst more than any other medium. And it is the numbers and facts of the typo bibles that should be aligned with the facts and numbers of the usability prayers. Then and only then will we start making websites that are easy to read and easy to click.
Why 95%? Why not 97? Why not 80?
95% stands for a method: Focus on typography, ask yourself, which text is functional, which text is passive, systematize them, order them hierarchically, simplify, create an interface, the rest will add up automatically. Until you have resolved the readability issues, don’t even think about changing colors, thickening lines, pushing pixels, choosing pictures. Start by designing grids on paper (this tip comes from a computer addict).
Justin: What got me angry, specifically, is John Gruber’s comment on Daring Fireball, linking to this article. That’s how I found out about this article in the first place. I read the guy’s blog every day, and there he is, basically saying that what I (and many others) do everyday is wrong. He used your article title and beat me with it as though it were a stick.
Maybe changing the title was a mistake. Looking at the state of web design today, and the wasted know-how we have about typography, that is what should make us angry. Maybe the title was a mistake after all. Instead of saying 95% of web design is typography, I should have kept the original title: “Webdesign is all about typography. Period”. That was probably the most efficient way to express what needed to be expressed. And then again, to leave a 5% margin for good taste can’t hurt. And as in the tech world 95 is a number occupied by Microsoft.
I agree: 95% is a punch in the stomach of many fancy web designers (and usability parrots), but a deliberation for a few designers and for many more users. I’ve been called four, seven and eight star words, a hero and an idiot, just because of my little article. Well, I learned how to deal with it: Adapt quickly, ignore impoliteness, take everybody seriously. That’s my advice for all designers, not only the fancy ones.
You don’t understand the medium
It’s true: Most people still do not understand the medium. Clients with random Internet experience often have the misconception that a website is like a cheap TV-ad that leads their customers directly into the store. All I have to say here: Explain to them what the medium is about. It’s about information. It’s not about shopping, it’s not about advertisement, it’s not linear. It’s about communication in one of its most competitive forms. Communication and not effects—that is what we should be concerned about as designers.
But then again: When a designer goes for 1024 and fixed width with his designer’s blog, if the designer optimizes his design for his audience, if a designer disrespects some major usability rule, even if he uses full on flash with a funky navigation—that’s fair enough. It doesn’t mean he doesn’t know what he’s doing. It’s not efficient, but that’s his choice. If he does the same for a website with a wider audience, then maybe he disrespects the medium. In any case, there is no need to insult people that are passionate about what they do.
The designer has to organize his design with regards to the message, i.e. the text he needs to transport—and with regard to the audience he expects it to read. Theoretically, it’s not much different from good paper design. In practice, we have to be much more aware of the medium than the paper designer. Our medium is very tricky. Even though we design for the screen: Websites have nothing to do with TV. That’s as true for this website as for yours or for Youtube. Even though we can choose among millions of colors, it’s not art, what we do, it’s product design.
