Tuesday, November 7th, 2006
Web Design is 95% Typography
Category: CSS
, Editorial, Usability
This is a touch off-topic, but important for those that want to build killer web applications :)
The iA folks have written a post on Web Design is 95% Typography (including a follow up part two).
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.
95% may be a touch inflammatory of course, but I think there is an important point here.
I think that one of the reasons that Wordpress did so well is that they cared about the UI, and one of the major pieces of care was in the typography. As soon as WP came out, the default theme made Movable Type (of the time) look immature. It also had the now popular BIG FONTS.
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 alined.
- Too many font sizes.
- Pictures are badly placed and disrupt the ease reading.
Before you go to bed tonight…. remember…. is your line-height set correctly!
(In a somewhat related note, if you are anal about fonts, there is a new Dina Programming Font)
Typography is 95% nerd-crap-talk…so go away with this shit!
Typography is for print. the browsers are too incompatible to
show all the same right typo-style…so: DONt WASTE MY TIME
WITH THIS SHIT!
Now that is what I call an intelligent comment. Read before you write, man.
[...] Web <b>Design</b> is 95% Typography [...]
Isn’t spelling important ;-)
I think Typographie IS important for Webdesign, because although the design is important too the main content of a site still is the text. And if the text is not readable the whole design is totally useless.
This is exactly the topic that creates a huge divide between designers and programmers. A designer will happily throw in rare_downloaded_font.ttf into their pretty photoshop layout then sell the client.
Now it’s the programmer’s fight to explain why their website can’t use their chosen font unless the copy is downloaded as an image.
I think this article articulates this issue clearly:
What would happen if I took the designer’s mac and stripped it down to 3 basic serif, sans-serif, and monospaced fonts? We may see better typography?
Give you clients good administration with WYSIWYG editor and the perfect typography of his pages is history.
The main discipline of shaping written language, is grammar. Spend all the time you like arguing about the relative merits of serifs, colors, weight, leading and kerning; but, at the end of the day, the strength of your semantic construction determines your message’s impact. Neither a vision-impaired person’s screen reader, nor a PDA with a monochrome, LCD display, nor Google’s spider gives a good damn about how pretty your words look.
While nailing a nearly-perfect rendition of a PSD mock-up by a designer, fonts included, is usually quite difficult, it’s certainly easier these days than it was in previous times given that letter-spacing, line-height and so on are universally applied by the various browsers.
In response to Jon I offer the solution to the ignorant-designer-uses-rare font situtation.
http://www.mikeindustries.com/sifr/
Works like a charm, although there are still some limitations, but for every font that you can’t embed in flash, there is typically a font that is similar to it you can. Of course I do not suggest using this for your copy, but headlines, snippets and the such, it’s perfect. Still tho, if your designer is using Trajan for body copy, you probably need a new designer.
Three typefaces? That’s luxury. A good typographer only needs one typeface. In one size. Without bold or italics, either.
[...] (found via Ajaxian) LINK [ Web Design is 95% Typography ] Technorati Tags: design Interface Typography User Interface Web Design // Used for showing and hiding user information in the comment form function ShowUtils() { document.getElementById(”authorinfo”).style.display = “”; document.getElementById(”showinfo”).style.display = “none”; document.getElementById(”hideinfo”).style.display = “”; } function HideUtils() { document.getElementById(”authorinfo”).style.display = “none”; document.getElementById(”showinfo”).style.display = “”; document.getElementById(”hideinfo”).style.display = “none”; } [...]
I came into web design/programming from the graphics side, originally as a professional prepress designer. It’s easy to focus on the interface and application flow when we talk about usability but I agree, typography does play an important role in a user’s experience. All the best modern sites these days have really open layouts with lots of white space around the body text.
@don, that reminds me of the Monty Python skit…
3 typefaces? You were lucky, I had an 8086 with ASCII text and a monotone screen. The only way I could get a second typeface was if I typed in ALL CAPS…
:p
[...] Web <b>Design</b> is 95% Typography [...]
The typefaces are one of the most pleasant surprises I got when I switched to a Mac. The default Windows ones are unbelievably ugly. The bitstream stuff under Ubuntu was nice, though.
It seems the tech side is as ignorant and arrogant about this as the design side when it comes to usability. Typography in terms of readability is key to user experience. Have you never noticed how much easier it is to read from a well set book?
“Good readability doesn’t count as long as the grammar is correct” is like saying: “I don’t care if the picture is sharp or not, as long as it’s Star Wars.”
And that’s what the article is about. Not fancy fonts. Fancy fonts are usually a sign of bad design anyway. Give us Arial, that’s all we need.
Fully agreed! Typography is the key to good design.
I always override website font :-)
I prefer to read the most readable font i have installed — not a font that a desiner decide to amuse me with
I found using Wordpress to design my web sites a great time saver and with plugins for automatic sitemap generation and SEO optimisation and easy changing of themes its such a web design time saver. If fact i just made a template from the theme i’m currently using and after veiwing the souce code i just saved as html and with a bit of copy and pasting moved all the content on my older html pages to the new template now my older pages all look the same as the blog template. On a new site this isnt a problem but this one has been around a while before i used Wordpress. Still have a load of article pages to move over but i should be able to automate some of it with a few block text replacer programs i have.
Keep up the good work!
Thanks it helps me a lot…
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
Absolutely agrre with you !!
Very nice and useful post.
Thanks
Keep up the good work! thx
________________
Free Software | Top Share Site | موبایل ، کامپیوتر
This article, in my opinion, is right on the money. Proper typography helps and aids accessibility and useability, and the poster (who went by the name teletubbie) is obviously not very well educated, or is simply a troll here. At any rate, typography is important and I think this IS one of the reasons Wordpress still remains popular.
Then, I have to add, that people should get decent web copy writers in when they design their pages. You can have all the best design in the world, but if it’s stock loaded with grammar and spelling errors… and also sounds just plain unexciting… you’ve lost the audience as well. Hardly what you want!
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
If fact i just made a template from the theme i’m currently using and after veiwing the souce code i just saved as html and with a bit of copy and pasting moved all the content on my older html pages to the new template now my older pages all look the same as the blog template. On a new site this isnt a problem but this one has been around a while before i used Wordpress.
I searched a long time for such an great article. Thank you very much.
I think typography can be only 95% if it is BAD typography. Such as 20 pt times new roman on a nicely designed site can make the site 95% bad. But you take that same site and use a normal arial 10 pt font and it will make it 95% better.
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work
Publishing is publishing… on paper or on the web, so I agree that design is 95% typography. I think you are right on the mark about WordPress. It is the one platform you don’t need to fight every step of the way.
If fact i just made a template from the theme i’m currently using and after veiwing the souce code i just saved as html and with a bit of copy and pasting moved all the content on my older html pages to the new template now my older pages all look the same as the blog template. On a new site this isnt a problem but this one has been around a while before i used Wordpress.
Now you got me working 7 days a week. I’ve been reviewing too many portfolios lately and I think what you’ve pointed out are the essentials. Thanks for this quick rundown. Hopefully, we may be able to improve our products and services with your list as our guide.
There are many useful informations in this great article! Thanks!
I completely agree with you. In one of the workshops I attended, the speaker reminded companies who are fond of hiring outsourced designers. They were told not to rely much on the portfolio but to hire someone who takes into consideration the three important factors in a good design – usability, typography and accessibility.