Web Design is 95% Typography(informationarchitects.jp)
informationarchitects.jp
Web Design is 95% Typography
http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
20 comments
Typography is precise, but slow in terms of comprehension.
That's actually one of the things that worries me about Windows Phone 7's UI - it's very heavily text-based, which facilitates first-time usage (no getting things wrong there, unless your text really sucks), but punishes expert/frequent users.
Text takes up a disproportionate amount of screen real estate compared to, say, iconography. They are also harder to scan, their location harder to keep consistent (due to document flow), and given that most people's memories are visual first and linguistic second, harder to remember and make an impression upon.
On small devices, loading your page up with text is generally a bad idea. Obviously unavoidable in certain circumstances (say: reading an article), but there are a lot of things out there in the design world that isn't typography.
That's actually one of the things that worries me about Windows Phone 7's UI - it's very heavily text-based, which facilitates first-time usage (no getting things wrong there, unless your text really sucks), but punishes expert/frequent users.
Text takes up a disproportionate amount of screen real estate compared to, say, iconography. They are also harder to scan, their location harder to keep consistent (due to document flow), and given that most people's memories are visual first and linguistic second, harder to remember and make an impression upon.
On small devices, loading your page up with text is generally a bad idea. Obviously unavoidable in certain circumstances (say: reading an article), but there are a lot of things out there in the design world that isn't typography.
I actually think that text has a fairly high information density rate compared to iconography. The perfect example of this is the command line. Power users tend to prefer a terminal because it is more concise than clicking around in a gui. I think that the problem lies in the fact that we have very few universal icons, especially for something like a phone interface. This means that while an icon for 'unread mail' would be smaller than the text describing it, no one would know what it meant without a description. Since there is no real limit to the actions we want our phones or computers to perform, text seems to be the way to go. Of course, some actions (e.g. save, cut, paste) have icons that have been in use for so long that it might be fair to call them universal. You can see an example of what I mean in most mac os x applications, where the buttons generally have icons with labels.
Disclaimer: I work for microsoft, but nowhere related to the phone team.
Edit: My point is more about interfaces than design. I know nothing about typography.
Disclaimer: I work for microsoft, but nowhere related to the phone team.
Edit: My point is more about interfaces than design. I know nothing about typography.
I suspect that writing text to convey information to the computer (command line) has very different trade-offs than programs presenting information textually to users, and lumping them together probably misses important details.
Also, textual interfaces usually make it easy to say, "now group that set of operations and give it a convenient name" (scripting), while graphically interfaces usually don't, and users are stuck with whatever individual actions the UI designers added to menus.
Neither tendency is inherent in using text or graphics, but it usually works out that way. I've wondered about this for a while, but text vs. graphic interface discussions ("keyboard vs. mouse", which often overlap) usually miss that distinction, much like they do "approachable to new users" vs. "efficient for committed long-term users".
Also, textual interfaces usually make it easy to say, "now group that set of operations and give it a convenient name" (scripting), while graphically interfaces usually don't, and users are stuck with whatever individual actions the UI designers added to menus.
Neither tendency is inherent in using text or graphics, but it usually works out that way. I've wondered about this for a while, but text vs. graphic interface discussions ("keyboard vs. mouse", which often overlap) usually miss that distinction, much like they do "approachable to new users" vs. "efficient for committed long-term users".
I also find typophiles annoying. I've given some thought to the matter and I think that it's a combination of two factors:
1) Fundamentally typophiles are geeks, and "typophilia" is no different than any of the myriad other intellectual obsessions that geeks will develop.
2) Designers are accorded much more respect than traditional geeks, in part because it's much easier for the layperson to appreciate their work. (designers also tend to be better dressed, better looking, and more sociable than other geeks).
So in a certain sense it comes down to jealousy - here are people doing the same basic thing I do, but they're perceived as cool whereas I'm perceived as perhaps a little odd. That said, it doesn't help when they refer refer to my people as "flash boys and neck beards".
1) Fundamentally typophiles are geeks, and "typophilia" is no different than any of the myriad other intellectual obsessions that geeks will develop.
2) Designers are accorded much more respect than traditional geeks, in part because it's much easier for the layperson to appreciate their work. (designers also tend to be better dressed, better looking, and more sociable than other geeks).
So in a certain sense it comes down to jealousy - here are people doing the same basic thing I do, but they're perceived as cool whereas I'm perceived as perhaps a little odd. That said, it doesn't help when they refer refer to my people as "flash boys and neck beards".
I wouldn't class designers as geeks to be honest. They use a particular subset of computing technologies to achieve a goal but are hardly limited to the digital medium. To call them geeks is to tar them with the same brush.
Sure, some designers may be computer savvy and may in themselves be designers who are also geeks, but being a designer neither requires the traditional qualities of a geek.
Sure, some designers may be computer savvy and may in themselves be designers who are also geeks, but being a designer neither requires the traditional qualities of a geek.
I don't think geeks necessarily mean computer geeks.
I am compelled to link to Dorothy Gambrell's tidy comic detailing the difference between geek, nerd and dork.
http://catandgirl.com/?p=1341
http://catandgirl.com/?p=1341
1. Typohiles are megalomanics
2. We should read minds, but that would be megalomaniac
3. Let's just be a user then
No. Users are people with an opinion. User experience designers are those who deal with all those user opinions and try to find the best compromise. User experience designers are engineers.
http://www.informationarchitects.jp/en/can-experience-be-des...
But that's not what the article is about.
No. Users are people with an opinion. User experience designers are those who deal with all those user opinions and try to find the best compromise. User experience designers are engineers.
http://www.informationarchitects.jp/en/can-experience-be-des...
But that's not what the article is about.
Seriously. I think typography is the subject with the highest ratio of (stuff written about it on the Internet):(importance).
I'm tired of people citing Khoi Vinh’s Web Site as the best web design in the world just because it's simple, typohraphical, monochromatic, and grid-based.
Face it people! if all the internet looked like this it will be boooring, not beautiful. It's part of subtraction's aesthetic and hardly works anywhere else.
I love Khoi's site, but I simply can't stand any other that uses his theme (http://basicmaths.subtraction.com/) because they look so dull, impersonal and pretentious.
Where's the David Carson of this generation?
Face it people! if all the internet looked like this it will be boooring, not beautiful. It's part of subtraction's aesthetic and hardly works anywhere else.
I love Khoi's site, but I simply can't stand any other that uses his theme (http://basicmaths.subtraction.com/) because they look so dull, impersonal and pretentious.
Where's the David Carson of this generation?
Face it people! if all the internet looked like this it will be boooring, not beautiful.
If all the internet looked like any one thing, it would be boring.
If all the internet looked like any one thing, it would be boring.
[deleted]
I would rather be bored by the design and amazed by the content than vice versa.
I'd prefer to be amazed by both.
The article is from 2006, man.
I agree, it's all a bit flat. Everything gets the same weight. It the design equivalent of over-engineering; you don't know where to start.
Not only that, but Basic Maths makes assumptions about the size of the rendered text which aren't universally true.
On my display, that means you get horrible artifacts like the words in the "Information Graphics" tag at the top overlapping each other.
That's not good design. That's ugly and non-functional. The same is true (in fact much more so) of Vinh's own homepage.
HN, for all its plainness, is much better designed.
On my display, that means you get horrible artifacts like the words in the "Information Graphics" tag at the top overlapping each other.
That's not good design. That's ugly and non-functional. The same is true (in fact much more so) of Vinh's own homepage.
HN, for all its plainness, is much better designed.
Agreed. Most theme designers ignore the different scenarios under which their theme will be used. Most theme shops optimize their demo installations so it looks perfect, only to disappoint the buyer when it's installed.
Is that the theme designers fault, or the person deploying their theme?
In the case of Basic Maths, there's examples of it on the designer's own demo page, depending on your browser settings.
Some people might say this is the user's fault for overriding the original font choices.
I'd say not all fonts are pleasant to read on all machines (except Macs where they generally all come out nice), and expecting the user to stick with ugly aliased ones for the sake of your layout is unprofessional :-P
Some people might say this is the user's fault for overriding the original font choices.
I'd say not all fonts are pleasant to read on all machines (except Macs where they generally all come out nice), and expecting the user to stick with ugly aliased ones for the sake of your layout is unprofessional :-P
Web design is 95% Typography to typophiles, 95% graphic design to graphic designers, 95% usability to UX experts. In short, people look at and notice what they are interested in, but to the average punter each of these things makes a much smaller contribution.
Don't forget 95% functionality to programmers :)
In my experience, web design is 5% drawing the design on a napkin (or mocking it up in Photoshop or whatever), and 95% trying to make CSS do what you want. :-(
And 95% copywriting to 37signals.
An exaggerated headline is 95% of getting traffic.
A witty retort is 95% of a comment.
The context of this statement is important, I think. Back in 2006 web sites were all about Flash, widgets, fancy graphics etc. All Oliver was saying is that these things are unimportant if your text is unreadable.
And by typography he means a lot more than whether it's georgia or helvetica.
And by typography he means a lot more than whether it's georgia or helvetica.
The context is important. A lot of popular websites are still unreadable messes (thank you Instapaper & Readability) but it was more prevalent when this article came out, when many web designers thought “typography” on the web was just choosing a typeface—any typeface that wasn’t Times New Roman—and changing the default leading.
Web design (and I'm saying that as the owner of one of the worst designed sites in the world) is compromise.
Design, form and function compete for limited space and try to advance towards that goal by picking the perfect mix between conflicting goals. It should look good, it should work and what text you've got should be readable.
But not all websites center around the written word, and user experience is not just reading text on a website.
Hint: Less text is better. So good Web Design is to avoid having the problem that 95% of your web design centers around typography or any other single metric.
It's the total package that matters and typography is but one (minor) element in there. If it isn't just the right font but it is readable you're already 90% there, the remaining 5% may or may not be important to you.
I know great sites that use 'courier' or some other minimalist approach and I know sites that suck that have been designed by the best in the industry, they look great but they're like super nice wrapping on a shitty present.
Strike the right balance, don't worry too much about any one factor, especially not typography. After all, the screens we have are direct descendants from the 8x6 dot matrix fonts of not that long ago, the availability of information is what drove this industry, not the availability of high resolution display for typographical purposes.
We don't call them graphics displays for nothing, pictures still paint a thousand words.
Design, form and function compete for limited space and try to advance towards that goal by picking the perfect mix between conflicting goals. It should look good, it should work and what text you've got should be readable.
But not all websites center around the written word, and user experience is not just reading text on a website.
Hint: Less text is better. So good Web Design is to avoid having the problem that 95% of your web design centers around typography or any other single metric.
It's the total package that matters and typography is but one (minor) element in there. If it isn't just the right font but it is readable you're already 90% there, the remaining 5% may or may not be important to you.
I know great sites that use 'courier' or some other minimalist approach and I know sites that suck that have been designed by the best in the industry, they look great but they're like super nice wrapping on a shitty present.
Strike the right balance, don't worry too much about any one factor, especially not typography. After all, the screens we have are direct descendants from the 8x6 dot matrix fonts of not that long ago, the availability of information is what drove this industry, not the availability of high resolution display for typographical purposes.
We don't call them graphics displays for nothing, pictures still paint a thousand words.
It's not that "less text is better", actually, depending on your page and what you're trying to sell more text is often better. If you can write a long, engaging sales pitch it's much more likely to convert users than a short one, because those that read it all have will have already invested time and effort in your site or product and want to get something out of that investment. The key is in finding the right balance - don't overwhelm the user with a giant wall of text, give the already "pre-sold", impatient users an easy way to convert and let the more cautious users keep reading and scrolling down. Typography plays it's part in establishing the content hierarchy, but to say it's the most important part of the design is pretty silly - it's one of many important parts. The actual physical arrangement of page elements is far more critical. (Of course, awful typography can ruin a site, but so can many many other factors)
The followup (Part 2) is here:
http://www.informationarchitects.jp/en/webdesign-is-95-typog...
I think one should extend the scope of classic typography slightly to understand where the author is coming from.
To me it makes perfect sense. If you can't structure your text right to get the message across, then fancy designs and widgets won't help you either.
This article's weird off-center placement on the right side with empty space on the left made me feel uneasy. That's 64% a layout issue.
That didn't bother me as much as the quirky use of red for links which seemed to go against the theme of the article (having typography support the content).
[deleted]
[deleted]
I, for one, found it extremely readable on my iPad.
I have to admit that this page looks very good, unlike many other articles that claim to know the secret to web design. It would be even better if it weren't right centered.
This shocked a lot of flash boys and neck beards back in 2006.
But nowadays...
Luckily, I had a chance to prove it many times.
But nowadays...
Luckily, I had a chance to prove it many times.
Or in the case of this article, 100%.
People can bang on about typography all they like, but any browser that won't let me override the designer's choice of fonts with ones that actually render nicely on my display won't get used.
(I'm looking at you Chrome)
Over here, font fanaticism is (sensibly) restricted to images.
How can a web designer have any idea what will look nice on a display with completely different visual characteristics to his own? Especially if the OS has a completely different font rendering library to boot.
(I'm looking at you Chrome)
Over here, font fanaticism is (sensibly) restricted to images.
How can a web designer have any idea what will look nice on a display with completely different visual characteristics to his own? Especially if the OS has a completely different font rendering library to boot.
This article is not about fonts.
Let me explain this slowly.
From the article: "Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance."
If you lay out your text in a way that only works right when viewed in the typeface and font size that your own browser is using, then you'll fail in terms of readability, accessibility and usability.
The Vinh pages that the article holds up as a shining beacon of good typography are particularly bad in this regard.
On my display at work, they are mangled in various amateurish ways, presumably because my browser is using sufficiently different fonts from the designer's. Words overlap where they shouldn't, or run past the edges of the elements they are supposed to be contained in.
It's not a browser standards problem, this is an up-to-date Firefox, but with font overrides in place in order to make sure that I don't have to suffer because of fonts that render poor on my monitor and OS.
I contrast this with HN itself, which is a great example of typography that works pretty well no matter what fonts you're using.
Is that clearer?
From the article: "Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance."
If you lay out your text in a way that only works right when viewed in the typeface and font size that your own browser is using, then you'll fail in terms of readability, accessibility and usability.
The Vinh pages that the article holds up as a shining beacon of good typography are particularly bad in this regard.
On my display at work, they are mangled in various amateurish ways, presumably because my browser is using sufficiently different fonts from the designer's. Words overlap where they shouldn't, or run past the edges of the elements they are supposed to be contained in.
It's not a browser standards problem, this is an up-to-date Firefox, but with font overrides in place in order to make sure that I don't have to suffer because of fonts that render poor on my monitor and OS.
I contrast this with HN itself, which is a great example of typography that works pretty well no matter what fonts you're using.
Is that clearer?
[deleted]
This article, back in the day, got me started exploring minimal design.
Web design to meet the users' needs might be as much as 50 percent information architecture. When I go to most websites, I'm looking for information, not eye candy.
No it's not.
He's correct. 95% of the time it's Times New Roman, Arial, Helvetica, or Verdana.
People who say X is 95% of Y are 95% wrong.
60% of statistics are false.
The truth is, design is complicated because it is not (yet) a science. Typography is important, but it is not king. What we really need to do is get inside the user's head and model their thought process. This is probably impossible, so we should do the next best thing: learn empathy. Be the user. Not some one-trick pony.