Tuesday, November 7th, 2006

Web Design is 95% Typography

Category: CSS, Editorial, Usability

<>p>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)

Related Content:

Posted by Dion Almaer at 4:37 am
22 Comments

++++-
4 rating from 38 votes

22 Comments »

Comments feed TrackBack URI

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!

Comment by teletubbie — November 7, 2006

Now that is what I call an intelligent comment. Read before you write, man.

Comment by teletubbie2 — November 7, 2006

[...] Web <b>Design</b> is 95% Typography [...]

Pingback by My Favorite 20 Resources » Blog Archive » Late breaking news — November 7, 2006

The text blocks are not well alined.

Isn’t spelling important ;-)

Comment by pedant — November 7, 2006

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.

Comment by Julian Gruber — November 7, 2006

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:

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.

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?

Comment by Jon — November 7, 2006

Give you clients good administration with WYSIWYG editor and the perfect typography of his pages is history.

Comment by Martin HruÅ¡ka — November 7, 2006

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.

Comment by ARWolff — November 7, 2006

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.

Comment by Scott Schiller — November 7, 2006

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.

Comment by Andrew — November 7, 2006

Three typefaces? That’s luxury. A good typographer only needs one typeface. In one size. Without bold or italics, either.

Comment by don hosek — November 7, 2006

[...] (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”; } [...]

Pingback by Web Design is about typography at Blog . Jiboneus — November 7, 2006

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.

Comment by Dominic Mitchell — November 7, 2006

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.

Comment by teletubbie2 — November 7, 2006

Fully agreed! Typography is the key to good design.

Comment by S Rimell — November 8, 2006

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

Comment by silly_sad — December 11, 2006

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.

Comment by Rob - web page tools — February 21, 2007

Keep up the good work!
Thanks it helps me a lot…

Comment by Tapeten — May 18, 2007

Absolutely agrre with you !!
Very nice and useful post.

Thanks

Comment by Walidov — July 30, 2007

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.

Comment by Tapeten — October 5, 2007

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.

Comment by BookWise — November 13, 2007

That’s luxury. A good typographer only needs one typeface. In one size. Without bold or italics, either.

Comment by Maxon — August 12, 2010

Leave a comment

You must be logged in to post a comment.