SXSW: Web Typography Sucks
Perhaps one of the best sessions I attended at SXSW 2007 was Web Typography Sucks by Richard Rutter and Mark Boulton. In conjunction with the Grids are Good session and the world premiere of the documentary Helvetica, the Web Typography Sucks session re-enforced the idea that we as web developers/designers must not forget the understated role of typography and graphic design on the web.
With that in mind, Mark and Richard also reminded us that typography is more than just about using pretty fonts, but rather it’s about using the right characters. For example, using proper quotation marks rather than primes(tick marks) or when to use an em vs an en dash.
Probably the best anecdote from the session was about The Sun newspaper in England which is akin to People Magazine; basically celebrity fluff. Richard pointed out how The Sun was written so that an 8 year old could comprehend it. Despite of the low barrier of comprehension and less than Pulitzer Prize worthy content, all of the articles have correct character usage. Richard explained that everyone, from the writer, to the editor, and even the printing press operator care about the correct usage of typography.
This got me thinking: why don’t we care about typography? Working in Information Resources, our jobs revolve around communication. So why don’t we pay closer attention to typography which servers to facilitate good communication? Is this a by-product of the computer era? I’ll have another blog post about this later.
Richard and Mark continued with their presentation, highlighting the importance of vertical flow (something we desperately need to fix in the portal) and how typography influences grid design and how those grids were calculated.
There was also a call to developers to really take advantage of CSS and start defining font stacks properly. Case in point, by default in Dreamweaver the font stack looks like this:
p {font-family: Verdana, Arial, Helvetica, sans-serif;}
What’s the problem with this you might ask.
- Arial is not a suitable back-up for Verdana. Verdana is a much larger and wider font. Use Tahoma instead of Arial
- IMO: Arial is the font for the cheap designer. Helvetica is a much more adaptable font, and in specific Helvetica Neue (pronounced: no-oy)
So, let’s rewrite the above CSS rule in two distinct flavors: for Verdana, and for Helvetica.
p {font-family: Verdana, Tahoma, sans-serif;}
p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
I don’t believe Helvetica or Helvetica Neue ship by default with Windows, so why specify it ahead of Arial when a super majority of your target audience is probably browsing on a Windows machine? Progressive Enhancements! It costs next to nothing in bandwidth to add an extra font to that font stack (which will be cached in most instances) so you might as well specify the nicest font possible so those who have it installed, or use a Mac, can enjoy a nice font family and those who don’t will still continue to see the world in Arial (those poor souls).
As soon as the audio of this session is posted, I’ll put up a link, but in the mean time you can browse the presentation slides and find other resources on Typograhy
March 19th, 2007 at 12:08 pm
Screw all your fancy fonts. The world got along just fine with Courier for last 50 years, why buck the system?
oh, and AOL was never cool.
March 19th, 2007 at 2:09 pm
Don’t forget to add a “buy neue now” button to your pages so users have the option to shell out $30 to see the page properly…
A broader question might be why hasn’t a consortium of typographers designed the ultimate suite of web-friendly fonts to be released under creative commons or GNU and lobbied for inclusion with the major operating systems?
Were any freely available fonts recommended for web page development? I realize $30 isn’t much for Helvetica Neue, but web fonts aren’t remotely close to the top of my font purchasing list.
Is there a browser or plugin that will allow you to subsitute HV Neue for any mention of Helvetica in a style sheet?
March 19th, 2007 at 2:19 pm
@Peter: In your CSS declaration, simply listing Helvetica Neue ahead of Helvetica will give it a higher precedence to those who have it (probably a small population) and the rest will have Helvetica or Arial. I’m sure you could write a browser plugin to achieve the same thing, but the point is that we as developers and designers need to understand these issues and address them ourselves. The concept of Progressive enhancements provides the greatest experience to those with the capabilities and still a really good experience to everyone else.
As for web-friendly fonts under CC or GNU… well, from my understanding… Helvetica, for example, has been around for 50 years and not much improvement has been made. Some people consider it to be the pinnacle of san-serif fonts. Which is a tough feat, but that shouldn’t prevent type designers from trying. From what I heard at SXSW, Microsoft Vista includes some new fonts that were designed by some of the best typographer minds in the world… unfortunately they all begin with the letter C and are difficult to remember… and they only really look good with the ClearType technology in Vista. Which doesn’t really satisfy your question, but does go to show that people are working to improve the legibility of fonts on screens (web, mobile, TV, etc).
I’d also like to clarify, that Helvetica or Helvetica Neue wasn’t recommended as font we had to use. Rather, they presenters wanted us to realize that WYSIWYG editors are giving us default font stacks that do not make a lot of sense. If you want a font like Verdana to display, don’t list Helvetica or Arial as a substitute, because the fonts have different characteristics. If you want something that looks like Helvetica or Arial, my feelings are you should just go ahead and define the best possible fonts for those to enjoy who have them.
March 20th, 2007 at 7:12 am
@Jay: Bravo. You sir, are the Hemingway of your generation.
@Peter: It’s a chicken n’ egg thing with vendors. Microsoft and Apple have both paid lots of money to bundle what they feel to be the best set of fonts for their particular user base. There is a lot of overlap, naturally…but they aren’t going to just up and say “oh, hey…let’s use these free un-tested fonts.” But to re-emphasize one of the points Scott was making, keep it in the family when degrading gracefully — in other words don’t mix serif and sans and all that other typography mumbo jumbo
My personal feeling is still that typography is a holdover from the days of print, where control was absolute — down to the paper stock you printed on. That kind of control is gone. Forever. That’s not to say that we shouldn’t do our best, just that expectations can’t be carried over from the days of Gutenburg.