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.

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.

1. Read these books, keep them on your desk.
   Head First HTML with CSS & XHTML
   Don’t skim through this book, read it… cover to cover, and do every tutorial one at a time. The copy is terribly cheesy and the tutorials don’t have you building an entire site, but if you do each one in small steps you will find yourself pretty far very fast.

   Designing for Interaction
   This book is a great introduction to User Experience, Interaction design and Information Architecture. It clearly articulates the concepts in a way that will have you applying.

   Designing with Web Standards
   This book will sum it all up and bring it all together for you. Its “why” all the stuff you are about to do is so important.

2. Read sites and blogs about web design.
   Bookmark stuff that you do not understand but hope to eventually understand. Some that I reference frequently are:
   A List Apart
   Cameron Moll
   Dave Shea
   456 Berea Street
   Veerle Pieters
3. Attend Events to learn & make Friends. Lots.
   There are tons of web related events but the ones I have found most helpful have been Refresh DC ( or Refresh in your area), Barcamp, and SXSW. Make friends and add them on Twitter and Facebook, pay attention to what they are talking about and why. You might even find that your new web friends are actually super cool real-life friends, and have other things in common with you like music, 30 Rock, and typography.
4. Design & build something. Start small.
   Build a one or two page site, for yourself, for your dog, for your dad. Try not to use Dreamweaver’s design view, or code hints. But you will. Everyone does. I did. After I did, I realized why I shouldn’t have, so maybe that is a step in the process. But …don’t. I really mean it. Why? Because if you don’t need to depend on Dreamweaver you will become a better designer faster. BB edit and Textmate (my favorite) are all much better alternatives. I realize lines of code may be very intimidating for some designers, and the last thing I want to do is scare you away from building the site, so… I don’t care what you use, just build something.
5. Ask your new friends to look at what you built, and take notes.
   They might not say nice things. They may actually tell you that they got sick of waiting for your images to load or got frustrated over your navigation (not that that is what anyone told me). Thats fine, thats actually good… because it is better to hear it from your friend who can explain to you how to fix it than never hear it from future users who get frustrated and click away from sites you design.
6. Download the web developers toolbar & Firebug
   When you see a site you like, peep the CSS & HTML. At first you may not understand what you are looking at, but get in the habit of just taking a look. As you continue through learning HTML and CSS you will begin to see good versus bad markup. When your site is doing something funky, use firebug to isolate the problem and work it out. Its just a good habit to get into looking at markup.
7. Google everything.
   Dave Shea said that in a SXSW CSS panel a few years ago and I don’t know why I needed to hear something so obvious from someone on a stage, but its a pretty common sense thing that designers don’t always think to do. If you are having a problem with something, someone else probably already had the same problem, and chances are they blogged about it. Sometimes it is hard to even know what to Google, thats when you hit up one of your web friends on AIM and ask them what you should google, then you google it. Bookmark it, tag it, and refer back to it.
8. Build what you built again, and build it better.
   This step is the key. If you are satisfied with what you built the first time around web design is not for you. The learning process happens when you rinse and repeat, every time you design and build a site you get better. Take what you learned from the books, from sites from google, from your friends, from things you did wrong but fixed in firebug, and build the exact same site again. This may sound like a drag but it is the most necessary piece of the puzzle.
9. Become passionate about the Web.
   It takes a LOT of time to transition from print to web, you can’t just do it because you feel like you begrudgingly HAVE to… If you are a passionate print designer its not hard to focus that same passion to the web. If you can design for print you can design for the web, but like anything, it takes work to get there. There is no button to push that will convert your InDesign document to a website, there is no magic pill you can take to make you wake up and know HTML. Just like it takes a lot of work to build a print design career it takes a lot of work to make the transition to web, you have to be motivated to do it. For me it took a change in lifestyle, that may not be the case for everyone but it was the case for me. Just depends on how good you are at juggling work & life.

This post was written in response to the overwhelming questions from the design community on how to transition from print to web that came up at a recent ADCMW event. I am not claiming to be the mac-daddy badass of making the transition, but this is just my advice coming from someone who went to school for print and made the transition to web without any additional schooling or classes. Any suggestions or additions are welcomed in the comments. I also have a whole host of links in my resources section.

John Boardley of “I Love Typography” has started a Flickr Pool where you can share you favorite letters of your favorite typefaces. It is fantastic to browse all the unique letterforms displayed as ornate pieces of art, and super fun to create one for yourself. Throughout the group there are a number specimens that make elegant desktop wallpapers.

Check out the Flickr Group by clicking here, and check out my letters:

Click here to Download 1920 x 1200

Click Here to Download 1024 x 640