Hasta La Ideas

Last week, I joined Frank Chimero, Tiffany Wardle, and Jason Santa Maria for a panel at the SXSW conference.

Now that web designers suddenly face the challenge (and delight) of choosing fonts from an ever-growing selection, we thought it’s a good time to recommend some basic principles for making wise type choices.

The slides from each of our four quick presentations are below, as well as audio generously provided by SXSW. If you’re short on time and feel like you know the fundamentals, skip ahead to the second half of the session — I think the Q&A is as useful as our prepared stuff.

Of course, an hour is hardly enough time to deliver what one can get from the first day in a good Type 1 course, and as I listen to the audio I cringe at all the crap I missed or said poorly, but I think we did a decent job of introducing some concepts that will launch young designers more confidently into the new typographic web.

If you attended the panel and have any questions that you didn’t get answered or simply need help finding the right font, feel free to contact me here or on Twitter: @typographica or @font_id.

Slides

Audio

Or view the slides at full screen to autoplay the audio.

Resources

Related Links

• Typedia: Type News, Webfont Alternatives
• Practical Examples: Typekit, Fonts in Use
• Helvetica in U.S. Retail
• Frutiger in Airports, Heathrow
• Hoefler & Frere-Jones webfonts?
• Hinting: Peter Biľak, Tim Ahrens, Microsoft, Beat Stamm
• Test webfonts before you buy
• Serving Typekit font weights and styles to Internet Explorer
• Readability
• Recommended typefaces here at Typographica
• FontFonter
• Combining typefaces: four techniques from H&FJ, with Helvetica, sans/serif
• Kerning, the game
• WebFont Loader (announcement)
• Font vs. Typeface
• Font identification resources
• Type Camp!

Recommended Books

• “The Elements of Typographic Style” (Bringhurst), Applied to the Web
• “Thinking With Type” (Lupton)
• “Detail in Typography” (Hochuli)
• “Stop Stealing Sheep” (Spiekermann, Ginger)
• more

Webfont Providers

• Typotheque
• Typekit
• Webtype
• A comparison of Typekit and Webtype
• FontShop
• Fontdeck
• Fontspring
• MyFonts
• Fonts.com Web Fonts
• Google Web Fonts (free)
• Font Squirrel (free)

Typefaces Used and Mentioned

• FF Meta Serif (Typekit)
• FF Tisa (Typekit)
• National
• Trade Gothic
• DIN Next Rounded (alt: FF DIN Round)
• Adobe Garamond (Typekit)
• Skolar (Skolar)
• Proxima Nova (Typekit)
• Chaparral (Typekit)
• Hellenic Wide (Typekit)
• Georgia
• Lucida Sans/Grande
• Titling Gothic
• League Gothic (Typekit)
• Founders Grotesk
• CamingDos (Typekit
• Bauer Bodoni
• Myriad (Typekit)
• Bello (Typekit)
• Le Monde Journal (Typekit)
• Facit
• Mrs Eaves
• Verdana
• FF Milo Serif
• Futura (alternatives)
• Times New Roman (alternatives)
• Gill Sans (alternatives)
• Trade Gothic (alternatives)
• Helvetica (alternatives)
• Museo Sans (Typekit)
• Benton Modern RE
• Minion (Typekit)
• Frutiger

Our Favorite Typefaces of the Moment

• Tiffany: Founders Grotesk, Tiempos
• Jason: Chaparral, Titling Gothic
• Frank: National, Minion
• Stephen: anything from Commercial Type

Turn your volume up and check it out.

We have been working for months on this site and it’s finally here. We’re proud to say that not only did we do all the artwork including character development and interface design, we also wrote and performed all the vocal acting (including fart noises), that you’ll find on the site.

Big thanks to our partners: web developers One Method, sound gurus TA2 and animator Julian Brown who helped immensely in bringing the site to life. Cheers!

This is a New Zealand based web company that I came across a couple weeks ago, and their work just keeps popping up all over the place. Definitely have a look at their site (different, to say the least), and make sure you play around with the 26000 Vodka one (mind blowing).

It's not always easy for traditional art directors to pick a web designer

I had a two-fer today. Not only did I find an interesting new blog, the blog from web design firm DSGN + DVLP called the chronicle of a designerd, I also read one of the entries and learned of a course that the blog author — Daniel Schutzsmith — had been teaching at School of Visual Arts called Web Design for Art Directors. Now I don’t know if the course is still being offered — the link provided in the entry only leads to an error page, not to a page offering a description of the class — nor do I think that I personally would be interested in taking the class. I do, however, think the course is a great idea.

With interaction design now such an integral part of almost every marketing, advertising, branding and communications strategy, many art directors and creative directors are grappling with the challenge of of needing to step out of their comfort zones and at times lead projects that involve significant digital components. Years ago, these creatives would have been secure in the reality that such tasks would fall on the web team down the hall and that they would be relied on to lead projects for which they had been trained and had years — if not decades — of experience but today that is not the case.

So where to begin? For someone who doesn’t do this every day, how can they evaluate the skills of web designers? How do they evaluate interactive design strategy to decide which is best for their client? An even better question is, where does one easily find the information they need to bring them up to speed in digital design 101, not from an entry-level designer’s perspective but from the perspective of a senior creative?

For this there are no easy answers. A course is a good idea because over the length of a semester concepts, terminology and case studies can be presented without overloading the course participants. I even think a digital course wouldn’t be a bad idea either. Not everyone is in NYC where they would have the ability to take courses at School of Visual Arts. Also, digital courses would indirectly provide an extra case study for the course, which could illustrate the potential of digital and interactive techniques.

During the early to mid-90′s, I essentially gobbled up every book, magazine article, web tutorial and internet discussion I could in order to make the transition from traditional design to print. How great would it have been if there was some sort of resource that could have helped me along? If anyone out there is currently putting something like this together, I’ll gladly help spread the word!

.chris{}

Hormel Brand Interactive Kitchen

Recently our team, in conjunction with our partners at Hormel Foods, launched the new Hormel Brand web site. We were challenged with the task of both creating an engaging and memorable interactive experience while also giving information about the wide variety of products housed within the Hormel Brand.

The resulting site features prominently on the home page, an interactive kitchen where users can zoom around and explore areas of the kitchen where they can learn more about Hormel products. We even included an MP3 player where users can preview and download musical mixes to play in the background while they entertain friends and loved ones and serve meals made with delicious Hormel products.

I’m grateful to be lucky enough to have a ton of great clients and client projects to work on every day but this was one of the most satisfying for me for a number of reasons, not the least of which is the fact that we really tapped into the deep reservoir of creative resources at our disposal at Burson-Marsteller. From visual designers, to copywriters, to Flash animators/developers, to developers, to project managers, etc. This project represents a phenomenal effort by everyone involved and I was proud not only to be a part of it but also to have such wonderful clients who truly partnered with us to create something really special.

.chris{}