Typography is the Foundation of Web Design

When I was in college my typography teacher was trying to explain to me how I should beef up some Univers in a project. After unsuccessfully  dictating to me instructions over my shoulder she asked if she could sit down and use my mouse. With a few simple clicks she demonstrated to me how to make some boring type elegant. What did she do? She right aligned the type, added a ton of line height,  took it from Roman to a sexy extra black, and added some character spacing. This simple 2 minute process taught me something very important about typography…. concepts such as hierarchy and emphasis are sometimes better  demonstrated than explained.

Typographic Redesign

Keeping this in mind I wanted to put together a presentation that could really illustrate my three pillars of web Typography “legibility, hierarchy, and expression” and disprove the idea that typography is just what font you pick. Given that there are only a handful of legible typefaces that are supported consistently across all of the major operating systems the online space is perfect place to prove that typography is so much more than a font.

To illustrate this I chose a website that desperately needed a typographic makeover and redesigned it using only typography & texture to highlight the type. While such a redesign is not realistic in the industry the point was to show the power of good typography and what a difference it can make. Since there was no actual client involved I designed it from the point of view that I had as a user when I first stumbled upon the site: I was looking to purchase a Spa gift card for my sister in Richmond, while I lived in DC. To make it realistic I challenged myself to keep the logo and only make slight modifications using type and texture.

I gave this presentation at Refresh Baltimore, Refresh Pittsburgh,  & Mr Brown’s Web Class at Damascus High School. It was an honor & a ton of fun to have these opportunities, & I appreciate the folks that made them possible.

This nice gentleman took a great set of photos on Flickr of my preso in B-more if you would like to check them out.

Some URLS I mentioned while giving this presentation are:
Grid Calculator
Jacob Nielsen’s F-shape Pattern
A List Apart

Two consistent questions I got when doing this presentation were:
Q: How long did the redesign take you?
A: I tracked it at about 12-14 hours, however I was also taking screen captures throughout the process to document it.

Q: Is this the same process you would have gone through if there were images or illustration involved?
A: No. The process I went through here was to illustrate specific concepts in typography. The process I would go through for a traditional client project would be different and would depend on what goals they are seeking to meet with the design.

The original website can be seen here

You can see the final Redesigned comp displayed here.

»And you can download the PDF of the presentation here.

Update: I was sad to hear that the day after I posted this redesign the company that the site was for went out of  business, which is why you may not have been able to view the original website. Ironically, my sister showed up at the spa to use her gift card and found the doors locked. I have replaced the link to the live site with a JPEG screen shot that I took before it went down.

4 Comments

  1. — November 24, 2008

  2. — November 28, 2008

  3. — December 11, 2008

  4. — February 24, 2010

*
*