95% Typography? Reactions
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. 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.
Sensationalist and unfounded!
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 improving my writing, my book, as well as my work. I learned more from the readers’ reactions than from many smart books.
Am I the only one saying so?
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 Grid
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.
Usability alone won’t do
In 2004, design by fire started a little contest: Design eye for the usability guy or how to make useit nice. Via N. Derksen. Here is Cameron Moll’s suggestion: 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, you are without no doubt the dude 2.0 - and your company does amazing stuff, 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 used to read wisdump (ex whitespace) weekly. I don’t read it anymore because 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)
Why am I talking about books all the time?
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
“still adjust it later on”
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 we will 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 have no idea about 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 regards 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, its product design.
UPDATE: I just noticed that another, maybe sharper follow up has already been written by someone else. Look at how beautifully George Everet, typographer, blogger and grandpa(!) cleans up:
The article focuses on typography as information architecture, something which a lot of people have disagreed with before. And the comments that follow the article pretty much disagree as I do. Type is only 90% of web design. The rest is using images and color theory. I haven’t ignored graphic design, something several of the critics of the article mention. Graphic design is typography, derives from typography, and can’t exist without typography. If a designer is good at using type they can design.
Way to go grandpa!
11.5.2006
20:33
Nice one. And now go for part III, Oliver…
11.5.2006
22:41
I was pleased that my prior comment was of use to you. I think I did “get” your prior post, though. It seems you have improved it quite a bit since I saw it last.
I agree with your statements “… make the text as easy to read as possible,” and “typography is not about choosing fonts.” (My complaint was that you seemed to focus solely on fonts in your prior note, after making the case that “typography is not about choosing fonts.”)
Most of my criticisms of your current thoughts boil down to an issue of theory versus application. Specifically, I think that “web designers” and typographers who try to assert their ideas too forcefully in the web medium end up annoying some users, and we find it rather condescending when that happens. But the solution to the problem may not be acceptable for everyone, with the platform we have now. I say a properly designed site should be simple, leaving the font selection, spacing, width, layout, etc. mainly up to the user. Of course, people who actually have to make money in the website business must make these choices for their users (who often don’t configure their font settings to match their preferences) and must make their decisions work well “on the maximum number of devices through which it can be accessed.”
In some cases, or in the hands of an under-skilled “web designer,” this still leaves some minority of users (on unpopular browsers or platforms) looking at a mess, or worse, at a “your browser is unsupported, go away” message.
Unfortunately, it seems to me that the ratio of skilled to unskilled web designers is rather small, and the ratio of Typographers who work on the internet to all web designers is vanishingly small. I wonder if you would agree with this statement? Anyway, until this situation improves, I’m not leaving font selection up to the whim of the website.
Looking for common ground here, I propose that the proper (but difficult and unlikely) solution is a better platform than HTML/CSS that more readily meets the needs of the typographer, the web designer, the information architect, the graphic artist, without taking control away from the reader, and without looking horrible in the hands of an amateur publisher. I’d love to read a website that is as beautifully typeset as (say) a Knuth Mathematics textbook or a professionally-designed flyer… so long as I could still crawl it with a script, or display it on my cellphone, or turn it quickly into plain text.
In any case, I as a programmer would be interested to hear a “Master Typographer’s” answer to the question, “If you could create a rich hypertext medium completely from scratch and a browser for it, what would it look like?”
Best of luck to you on your book.
11.6.2006
13:59
Thanks, Mike. Actually, you totally get it. I’d love to see that Knuth Mathematics book too. And yes I did improve the first article. Lots of spelling mistakes there, and some clarifications were needed. In its body it is still the same. But input from dedicated and pragmatic people like you helped me clarifying what I really intended to say. Thanks to everyone for that.
As for your last question, “If you could create a rich hypertext medium completely from scratch and a browser for it, what would it look like?”
I never seriously thought about that until now (I was too busy trying to figure out how to deal with the current one), and I won’t pretend that I’d have a better plot than the actual HTML/CSS combo that I could shake out of my sleeve, but I know that people who think more about that, sure do. You should ask Bodhi, a high end progrogrammer with a good eye for typography and pictures.
But I do know, that part of the problem is the font rendering of stupid Windows - or Linux for that matter. Fonts on the Mac are rendered as they’re supposed to be, they’re smooth, well spaced out, well kerned, the anti-aliasing is delicate and that makes them easier to read.
I am still waiting for that Mac ad where the PC is Times New Roman all pixelled and torn and out of focus next to the Helvetica (standard on Macs, doesn’t exist on PCs), promoting its superior font rendering. “Hello I am a Mac.” - “…and I am a PC.” No voices, no faces, no sound. Just the clicking of a keyboard. And then: “95% of the time we spend on the computer, we read.”
So if we blame the designers for bad design or fonts that are too small, we also have to consider that they use Macs developing the designs. Websites that look awful and are hard to read often are readable and nice on a Mac. That is no excuse , but we shouldn’t blindly blame them, as it is really painful to look at Windows if you have a delicate eye for typography. Hopefully Vista will change that.
Of course we agree that a webdesigner has no other choice than testing his designs on a PC, because unfortunately that is where most people will see our work.
So here is a good tip for young web designers from a dedicated Mac user: When defining the CSS of a website, do it on a PC. If it looks okay there, it will blow you away on the Mac.
I believe that developing on a PC could lead to better results, because you are working in such a hostile environment, that you have to give your best to make it work. Which, as we’re talking about quality work, has never hurt.
We have a couple of PC at the office to check our work (called “dirtyPC1″ to 5), and I recently use a PC at home as well. And everytime I have to read something on this machine it’s like going to the gym.
11.6.2006
23:35
Come on, win XP is not that bad, a few tweaks and furthertaking software and it runs like hell. Unfortunately it’ll never be a clean mac, that’s right.
11.7.2006
00:09
I am just talking about the font rendering. The interface as such is horrible too, but that’s another story.
11.8.2006
09:09
Quick question for anyone. What is the name of the the grid layout book which was pictured twice in this article?
I fell in love with it immediately.
11.8.2006
11:12
Grid systems, by Josef Mueller-Brockmann, in itself a work of art.
11.8.2006
21:03
Steve rules!
11.9.2006
08:17
Great follow up - should have at least waken a few people up!
11.9.2006
18:48
[…]Web Design is 95% Typography，iA用了这么一个耸动的标题来强调’字’在网页设计中的重要性，提醒我们注意这样一个的事实：网络上95%的信息是以文字的形式呈现的，因此’字’是用户界面的根本元素，其选择和布局排版在网页设计中绝不容忽视，文章中还列举了一些设计人士常见的失误，颇值得一读[…]
11.10.2006
08:04
11.14.2006
00:57
Nice articles. Not sure if I agree 95%, but who am I to quibble. Typography is very important when it comes to Web design.
A few minor details. I think the text as UI thing was something the guys at 37 signals were the first people to talk about. Also, on the Design Eye For The Usability Guy bit. I actually did the “Web design” there with help from the other guys. Cameron, if I remember right, worked on the print in PDF form. Anyway as you can see by my write up I did much more than tackle the typographic end of things. Depending on what “Web design” means to you (and to many it means xhtml/css, semantic code, content, layout, etc.) if you spend 95% of your time and effort on typography you’ll have very little time left for the rest.
But I think I agree with the overall spirit of what you’re trying to say.
11.14.2006
08:22
Keith, Thanks you for your nice words and putting things straight. I am sorry for getting that wrong. Especially your authorship on the Design Eye For The Usability Guy bit. Very nice work there Keith!
I corrected the text as suggested. I tried to find that “treat text as UI” snippet on 37 signal’s blog but couldn find anything. Guess I will have to ask Cameron directly where he got it from.
I think “treat text as UI” is what I mean by the 95% formula. It is more a method that a measure. We both know that the last 5% of our work take 80% of the time. Attention to detail is the hardest most time consuming part of our job.
95% - It is intended to wake people up, like I woke up when I first read “Great designers treat text as UI” in Cameron’s presentation and then looked ad Khoi’s website, and then looked at my typobooks and read that “Typographer’s don’t need no font choice. Renaissance typographers had one font and did the most amazing work.” That hit me like thunder and lightning. And this wake up is what I try to transport with the 95%. In terms of just designing I always did spend 95% organizing text as UI. I just didn’t realize that the right method in doing so is typography. Following typographical rules everything suddenly falls in place.
It is a mystery to me why I didn’t realize that before. I worked with wireframes and grids for a long time and spent hours and hours on CSS. What a moron I was to not see the similarity between old school typographical grids and IA/ID wireframes, CSS and even the final skinning. Tell me if I am wrong…
Of course there is much more to web production than design. Yet recently I do develop CSS and layout wearing a typographical glasses. And the first thing I do looking at websites is: Is the body text easy to read? The next question is mostly: Why not? If you ask me, that designers use hard to read fonts on their websites is paradox if not a scandalous.
Note that your spirit is the kind of spirt I am glad to share.
11.23.2006
17:23
Thank you for putting into words what I’ve only just begun to struggle with!
This is something harder than all the arcane programming I’ve ever done: drawing the reader’s eye where I want it to be, when I want it.
6.8.2007
21:47
Web Typography will advance by a mile once web browsers other than IE begin supporting the CSS2 specification for embeddable fonts. In this case, designers will be able to leverage their font investment and present web pages using fonts that they’ve chosen, not the ‘best guess’ ones that people ought to have on their machines (I have no default fonts like Tahoma/Verdana/Arial on my machine).
11.6.2007
15:50
Your article has references to a number of typography books that I do not own and have not read. You are right: most are exensive! However, one’s mileage varies on the linksn to these books: most point to Amazon and allow one to order the book in question. However, the link to Emil Ruder’s “Typography” doesn’t go to Amazon, or to anywhere remotely useful. Here is the actual URL behind the Ruder link: http://wisdump.com/9rules/making-nothing-but-a-name/ This link points to a website that’s about devising brand names or some such trade—adorned with several links to get-rich-quick-without-working schemes.
11.6.2007
16:02
Thanks Don,
Somehow this post got erroneusly deleted and the wrong link sneaked in because during the panicked reconstruction process. The mistake is corrected now.
Oliver
Ps: Yes, they are expensive, but Mueller-Brockmann is definitely worth its price, tenfold.
1.11.2008
09:33
Well, what about this page then… Would you call this a design success? It’s readable but would you read it…that’s the question. In terms of information getting across it’s a no go.
When watching a monitor we don’t expect text (or perhabs in a sub title form) Classic typography laws do not apply, they should be re-written for a new medium…
A screen isn’t compatible with a book or paper, a different style is needed, obviously.
2.20.2008
09:06
Thanks for guiding. All the things espically for typography. The drwabacks you have discussed, are very common to me. You must complete your book. I am waiting. Thanks again
4.22.2008
04:57
I think this is why I am hanging out for Mark Boulton’s new book. I’ve yet to manage a successful vertical grid based on the typography, using CSS. Perhaps it is more achievable with CSS3?
I agree entirely with you. The beginnings of design start with the written word, and the font choice, the x-height of that font-choice, the leading, and so forth. Content really is King.
One thing I think is different about the web medium is line length. Some typographers recommend line lengths between 40 and 60ems, but I think, on the web, even with increased leading, it is probably half that. I do think that the emitting rather than the reflection of light will have some effect on general guidelines.
5.9.2008
13:54
You have no idea about the medium.
No. You really don’t. Nobody does, actually. You see the web contains digital information that’s going to be rendered in one of an infinite number of ways. One user may have set their browser up with custom stylesheets to bump up font sizes, use a different default serif or sans-serif font, maybe change colors as well. You have the users that don’t read the text, be it a blind person or a search engine bot crawling the site to index your content. You’ve got a million different screen resolutions. What might appear as white-space on a large monitor disappears on a smaller one with a lower resolution. Or maybe the large monitor user has bumped up their OS DPI so that fonts scale up to meet their higher resolution screen. Meanwhile your images don’t scale.
The point here is that every article (including these) that I read in which the author preaches about typography and getting web developers educated in the field all come with a very big, very wrong assumption: That the web developer controls how the text is rendered on screen.
The simple fact is, we don’t. We can certainly do our best to steer browsers in the right direction, but the perception of control is just a perception.
When you start focusing on the presentation of information you loose sight of the information itself.
“Is this information well written?” “Is this information pertinent to the subject I’m covering?” “Is this information important or superfluous?” “Is there too much information?” “Is there too little information?” “Is the information well structured?”
None of these deal with typography.
All of these are more important than typography.
Typography is visual representation of data. It does not deal with data itself. To try and say typography is 95% of web development is short sighted and elitist.
Web development is about managing information. Collecting, organizing, and structuring the data is, by far, the majority of it. Typography is only just the visual presentation of the information.
“JUST?!” you say.
The problem with a majority of web developers is they see the web as a visual medium. Perhaps the majority of users do process this information visually (actually, when you start to factor in web crawlers, screen scrapers, RSS feed readers, and other decidedly non-human consumers, it may not be a majority after all!), but if you treat it as JUST a visual medium you’re going to paint yourself into a corner.
The web browser is going to quickly evolve into something quite unlike the browser you’re using right now. It’s going to become an information processor. You will give it web sites to monitor. It will process the pages and reorganize the data into a format you define to make your consumption of that information easier.
You don’t go into a restaurant and just wait for the food to be given to you. You have choice. You choose what you consume and how you consume it. We don’t do this on the web. We force users to consume the information the way we tell them to. This will have to change. We will give them just the ingredients (the information, the data) and they will choose how they consume it. At which point typography from the developer’s perspective becomes completely irrelevant.
The point is simple: Web development is 100% information management. 99% of that is creating, organizing and structuring that information. 1% is presenting that information. Typography is 95% of that 1%.
5.13.2008
18:46
racemous unenclosed hexacapsular crosspath entomb elinor bellite angora Style Cufflinks http://www.cubbyholecandle.com/
日本語