asimpleframe

Ampersand NYC: Michael Johnson & Mark Boulton

This article is the first in a special series covering my notes from Ampersand NYC: The Web Typography Conference.
See also: Part 2, Part 3 & Part 4

Last Saturday I attended Ampersand NYC: The Web Typography Conference. Being a “one-day event for knowledgable web designers and type enthusiasts,” it felt like a conference designed just for me. I couldn’t have been more excited to attend (a big thanks to Scripps for sending me) and nerd out with fellow type geeks.

The conference was held at The TimesCenter, an upscale venue in the heart of the Times Square District. The lineup was comprised of eight speakers, all well-respected names in web and type design. Each speaker had a slot of forty-five minutes, bringing the day’s total lecture time to about six hours. The talks were diverse and interesting – full of helpful information and thought-provoking ideas. It was a lot to absorb in one day.

The purpose of this series of articles (of which this is the first) is to distill the conference into some key takeaway points. I’ll write about two speakers per article, following the order and structure of the conference. These notes are in no way comprehensive. Rather, I will briefly summarize each presentation and list several highlights that I found particularly relevant or interesting.

Michael Johnson: Type as Brand, Brand as Type

The first speaker of the day was Michael Johnson of johnson banks. Johnson’s talk served as an introduction to the day, exploring in broad strokes the relationship between type and brand, while showcasing examples of his own work. Be sure to check out the summary of his talk on Thought for the Week. His key point was that webfont technology now enables brand and type to live on the web as never before. To use his words: “The gate is now open…”

Verbal and Visual Brands

Johnson views brands as both verbal and visual. They are verbal – meaning tone of voice (i.e. the words that are used). They are visual – meaning how they look (i.e. typography, color, photography, etc.). Focusing on the words a brand uses to communicate (tone of voice) and the way those words visually appear (typography) shapes the brand at its core.

Linking Brand and Type

Historically, the typography of a logo often had little or no relation to a brand’s general typography. Johnson’s approach is to unify them. Linking them together “takes some of the heat off the logo to do everything.” It allows brands to speak consistently across today’s many channels. While the web used to limit this form of expression (as Verdana, Georgia, or Arial), webfonts now allow brand and type to be linked together online.

Do Your Best Now

Though brand and type can now be linked as never before, it doesn’t mean conditions are perfect. There are still limitations and areas where compromise must be made (such as kerning). To this, Johnson offered some sage advice: use what you’ve got to do your best now.

Mark Boulton: Typography in Responsive Design

The second speaker of the day was Mark Boulton, founder of Mark Boulton Design and co-founder of Five Simple Steps. In his talk, Boulton discussed his approach to selecting and using webfonts. He offered many practical insights on how to go about the process, citing his studio’s work for CERN as a primary example.

CMS’s and Typography

To begin, Boulton described how “responsive design has fundamentally changed our process.” Instead of creating pictures of websites (Photoshop comps), work centers around building prototypes in the actual environment (the browser). This directly impacts typographic decision making. In his words:

You can’t make good decisions about typography if you don’t understand where it’s coming from and how it’s structured … The CMS has quite a bit to do with typography.

Real content inevitably reveals problems with a design that lorem ipsum obscures. By focusing on real content earlier in the process, it “brings the worry forward,” revealing issues when they can still be quickly and easily addressed.

Pressure-Testing a Font

See how a font performs in real situations where you will need to use it. Boulton’s preference is to start with the paragraph element and move on from there. What is your most critical content? Where does your type need to work the hardest? Make sure your font works well there first.

Find the Sweet Spot

It’s also important to find the sweet spot of a font. Where does it really sing? For example, Verdana sings at small sizes for body copy (because that’s what it was designed for) but doesn’t look good as a large headline font.

Many vs Few Typefaces

One small point that Boulton made stood out to me. With the advent of webfonts, we now have infinitely more choice. When there were only a few choices, we became very familiar with those typefaces and learned to do a lot with a little. Now, with a plethora of typefaces at our disposal, will we lose this knowledge? My takeaway from this is to remember to impose limits. Choose a few high-quality webfonts and get to know them really well.

Up Next

The subsequent pair of presentations at the conference examined webfonts through the eyes of two type designers – namely, Jonathan Hoefler and Luc(as) de Groot. Continue reading.