If you, a well-trained and highly experienced code slinger, called me one day from your car, travelling 80 MPH away from your mobile phone tower, and said "Mr. JFKBits, I'm designing some web pages for a customer, do you have any design advice?", and based on the way your voice crackled and faded I thought our conversation would be over in seconds, I would shout into the phone "DON'T USE TIMES ROMAN".
If I had a little more breathing room, I would add "use a sans-serif font, like Arial or Verdana".
This answer would have surprised the pre-web me, who had been told the Times font was the best choice for readability. And I still think it is, for books.
There are a lot of design principles that engineers can learn, such as "repetition and variety" and "it should lead your eye around the piece", but I'm still working on how those translate to web design. For now, this is my advice. If you want a web page to look like it was professionally designed, rather than hacked together by an engineer, then you want this right up in the head:
<style type="text/css">
* { font-family: Verdana,Arial,sans-serif; }
</style>
The reason for this is simple: Times is the default font, and any web page using it comes off looking like it was modified from My First Home Page featuring the "under construction" animated GIF.
But don't just take my word for it, look at what other people are doing: ups.com, ford.com, amazon.com, apple.com, wsj.com (Wall Street Journal), google.com. All these commercial web sites, picked from the top of my head, rely primarily on a sans-serif font.
For some entertaining and actually useful reading about fonts, see Criteria for optimal web design (designing for usability) by Michael L. Bernard. This work cites results showing "Overall, Verdana was the most preferred font, while Times was the least preferred font". I like the fact that the article appears on the web in Arial.
I've been experimenting with this advice "use sans-serif fonts" in my own work, and I'm amazed at the results. I'm convinced part of the reason is that it's not the default, the choice of first-time web page creators, as noted earlier. Another possible reason is that most graphical interfaces appear to be based on sans-serif fonts. But the bottom line is just do it, make it Arial, make it Verdana, make it something other than the default. (This is where my extremely left-brained friends take me too literally, pick Comic Sans for their county's public defender's web site contract and wonder why the client is unhappy with the unprofessional appearance.)
And yes, you may be wondering how I can say all this and have my blog appear in a serif font. Tell me honestly: do you think the blog looks bad? I picked one of the Blogger templates, and I think it looks all right. There's enough going on to set it apart from the default. For one thing, the font family is Georgia, not Times Roman, and it's set in a slightly smaller point size than the default. The watermark image and the stylized hyperlinks (no underlines) also work together to give the whole thing its own feel. Obviously this combination is a lot more complicated than my 3-second advice ("DON'T USE..."), so if you want to break my rule and still come up with a pleasing design, you're on your own.
7 comments:
I viewed this entry in Google Reader, which uses a sans-serif font, and it looked fine. Only when I opened the actual entry to post this comment did the serif fonts appear. I did find the sans-serif font easier to read on the web (perhaps I was swayed by reading the blog entry, though)
So why do sans-serif fonts look better? Is the web-browser layout? Is the the computer screen? (If so, will this change when using e-paper?)
Font issues aside, I think this blog looks better than the default blogger template.
In the article, I mention that the "system font" for native applications (e.g. the window manager, the browser program itself, mail reader) is sans-serif. I started looking "outside the box" at the appliances and electronic devices around me, and was startled to find that labels for buttons and functions are likewise dominated by sans-serif fonts. Serif fonts can be found in the logos, e.g. the make and model names, but it looks like anything that has a functional purpose is sans serif. Similarly, I wonder if brochures and catalogs, the print versions of a lot of corporate and organizational web content, are also sans serif, and hence line up with the online counterpart.
I don't like sans-serif because I live in Ill. See the problem?
Hmmm. That's the first sans-serif font I've seen that distinguishes those. Interesting.
There's at least one problem with the wild-card style (using "*") to give all elements a sans-serif font, and that is that it also applies to tt ("teletype text"). Tt is generally rendered with a constant-width font, and is a way to signify code snippets and other computerish terms (/dev/null). If you have a style telling it to render with Arial, it won't be differentiated from the surrounding text as by default it would be.
There are probably other elements that you'd affect with this wild-card style, so you'll have to take care and probably need to do a little more as-needed styling.
>> This is where my extremely left-brained friends take me too literally, pick Comic Sans for their county's public defender's web site contract and wonder why the client is unhappy with the unprofessional appearance.
You are inadvertently promoting nonsense. Naturally I refer to your use of the term "left-brained". In future use a term such as "literal minded" that doesn't support an incorrect notion about brain function. It's upsetting to see how far this has gone, because people are using it to promote further nonsense and obtain money. I can't fight ignorance one blogger at a time, but I do my best.
Anonymous: You obviously have something to share but aren't quite spelling it out. Can you provide a bit more information on correct notions of brain function?
Post a Comment