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.
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.
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.
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.