Archive for the ‘typography’ Category

Little Things: Home Depot's Quicklinks

Check this out: http://www.homedepot.com

Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

There are a lot of negative things I could say about HomeDepot.com, like the unintuitive architecture etc. But instead I’d like to mention a VERY minor detail that I think 99% of designers would never think of. Let’s face it, the entire Home Depot experience, virtual or otherwise, is overwhelming. Take a look at the quicklinks on the left hand side of the site. They’re there to give you smarter access to the high-demand product areas of their daunting product selection.The type size hierarchy is gorgeous, the color variance ads a nicely priortized foil to the signature orange they could be over-doing (but they’re not), and the almost retro usage of the link underline is unmistakably usable.

But here is where I totally geek out. Notice how each category of links has two lines. Now, notice how the first line always ends with a comma. Why is that, you ask? Well whoever designed this menu (props) took the time to add a simple attribute to the links in this definition list to disallow the links from wrapping onto a new line. Essentially, this CSS author added the following attribute to the definition data type selector:

dd a { white-space:nowrap; }

This allows each line to end with a complete link. Why would anyone bother doing this? This is the usability quivalent of a print-designer manually setting type to clean up any awkwayd hyphenation. To put it another way, consider the user’s mentality when viewing this list. Am I looking for “Toilets, Tubs & Whirlpools?” or do I just want “Toilets?” Well, without this attribute, “Tubs &” would probably reside on the first line potentially causing confusion about where the which link is which and where each ends. I know I’m making to much of this, but I’d love to think that someday, someone might spaz over my attention to detail like I’m geeking out over this right now.

  • Comments Off
  • Filed under: technique, typography, usability
  • Ban Trebuchet

    You’re probably aware of the anti-comic sans movement among designers and assorted type snobs (see ban comic sans). But while we’re hating on god-awful typefaces designed for Microsoft (notice a trend here?) let’s toss Trebuchet into the mix. Despite gaining popularity in the “aren’t I cheeky?” blog era of the web for its universal availablity (see: ubiquitous mediocrity), Trebuchet MS is contributing to dumbing down interactive type design.

    Trebuchet MS

    • Trebuchet’s clumsy weights allow little room for elegance.
    • Its awkward, schizophrenic features (“g”, “l”, “&”, “$”, “?”) distract the eye’s natural rhythm and decrease readability.
    • Drastically inconsistent x-heights (“A” vs. “x”) establish jarring vertical agreements.
    • The ampersands (“&”) is a ligature of a bad “E” and a stumpy “t”. That’s just savage.
    • You can’t just throw in a half slab-serif whenever you feel like it (“i”, “j”). Were you raised in a barn?

    While I’m all for experimentation and destinguishing yourself from the competition, this font has been abused in recent years. And while I may have been able to overlook its childish qualities in small doses, the time has come for someone to stand up against type that sucks. I simply can’t overlook it anymore. And I urge you to write your congressman and/or local web designer to reclaim our dignity and stop abusing this heinous face.

  • 2 Comments
  • Filed under: rants, typography