When initially imagining WebDesserts I knew I wanted it to be somewhere in the middle of playful and professional. I want the site to be welcoming and friendly but I also wanted it to seem trustworthy (muahahaha!). So I wanted the playfulness to be a bit subtle. I kept this in mind when I set out to find the Typefaces I wanted to use for WebDesserts

The New Yorker The New Yorker is a good example of professional typeface for the body text with a touch of playfulness in the header.

Gathering Tools

When I go looking for Typefaces there are usually websites I reach for first. Typekit is probably my favorite font host out there. Their interface is beautiful. You can try out many of the fonts right there in your browser or even on your desktop. The staff there has also done a wonderful job of curating the list of typefaces into helpful searchable categories such as which typefaces work well as headings or which are better suited for anthologies.

Once I've found a Typeface or two that I like, the next website I'll usually grab for is Typecast. Typecast works with multiple font vendors such as Typekit, Fonts.com, and Google Fonts to allow you to preview fonts on the web in their final environment. This is especially useful considering that desktop rendering doesn't always line up with the rendering of a browser (more reasons to drop photoshop and prototype in the browser!). You can either have Typecast generate some text samples for you, edit it yourself with a WYSIWYG like interface, or even edit the css if you want to handle the styling the old fashioned way. I find it's a great service to go and try a typeface out or even a service out before committing.

I'll refrain from making this whole post one giant ad, but really, you should check these guys out.

Narrowing The Choices

So let's define some requirements before we go any further. First, we have our style requirements that we mentioned earlier. I also have a few other requirements in mind, so let's list those out:

  1. Typefaces need to be professional, yet playful
  2. I'm looking for something in the middle of a modern and traditional feel, so I'm mostly going to be looking at slab-serifs.
  3. I'd like at least one of the Typefaces used to have a decent selection of typefaces with multiple weights so that I have some breathing room to play around with.
  4. An entertaining italic that's not too overpowering would be nice.

I played around with a good selection of typefaces and I eventually narrowed it down to 3 that I really liked.

Header Comparison

Chaparral is a well known Adobe typeface. It is one of those typefaces that has a font for every occasion. The variants designed for headings such as "Display" and "Caption" generally have more character, while the variants meant for body copy are generally a bit more tame. I really like Chaparral Display. It adds beautiful, subtle curves and slants all throughout the typeface.

Kinesis 3 is another Adobe typeface that is actually rather new. This typeface is pumped full of character. I fell in love with it as soon as I saw it. Notice the curves on the "D" and "s". I also really enjoy the style of it's ascenders and decenders.

FF Tisa Compared to the other two FontFont's Tisa is much more tame. It also has a limited selection of variants, limiting itself to the old "regular, bold, italic" triad. But it's even weight makes it perfect for body copy. It also has a very nice italic that has just enough character to easily distinguish it without being too overpowering.

Making the Hard Decisions

So after some heavy consideration I decided to toss out Chaparral, it's a great and versatile typeface, but even it's Display variant didn't have as much character as I would have liked. For body text I felt that Tisa was roomier, thicker, and ultimately more readable than Chaparral Regular.

I decided to go with Kinesis for my headings, and possibly mixed in for things like captions and blockquotes. The strong character of Kinesis felt a bit too distracting for me for the body text, so (if you haven't figured it out by now) I will be using Tisa for that.

Bringing It All Together

I threw together a quick mashup of what these Typefaces might look like together. I will still have to work out the details of what goes where, but I think we're off to a good start.

WebDesserts Typography Preview