On Thursday, November 14, 2013, Jonathan Hoefler, the H of H&FJ, spoke at Parsons Tishman Auditorium about his company’s recent launch of Cloud.typography. AIGA/NY Fonts for the Web with Jonathan Hoefler gave listeners an inside look at Hoefler & Frere-Jones’ approach to typeface design, and the process of moving typography to the web.

Hoefler began with an image the first bicycle, designed in the early 1800’s. It had no pedals — the rider pushed with his feet — and its wheels were repurposed carriage wheels. The bicycle didn’t truly become popular until 1888, when the invention of the rubber tire made bicycling much more palatable. Hoefler thought about this early bicycle as started the web font project, because he, too, he wanted to improve the format of an existing idea.

As he began thinking about designing web typefaces, Hoefler asked himself one fundamental question: “Why do we design typefaces at all?”

For Hoefler and H&FJ, the answer seems to be, “to solve problems.” Hoefler shared a few examples of H&FJ print typefaces that were designed to serve specific needs.

Hoefler Text, for example, was created to give today’s designers access to the the expansive range of glyphs used by 16th-century typographers. The typeface included small caps for all weights, along with numerous alternate characters, ligatures, ornaments, and swashes.

Didot, designed for Harper’s Bazaar, was drawn with different styles for use at different type sizes. This allowed small text to read easily, while display text maintained the extreme thick-thin contrast that characterizes editorial fashion design.

Knockout was designed to solve a very specific problem for Sports Illustrated’s designers: page layouts needed to be completed long before the editorial team provided final headline copy. By producing a typeface that comes in nine different widths, H&FJ made it easy to lay out pages with dummy copy. Designers could later choose a text width that fit the final headline into allotted space.

So if a good typeface solves problems, what problems need to be solved on the web?

One challenge that web font designers face is clarity, especially at small sizes. Hoefler and his team knew that they would have to change their letterforms slightly to make them look right on the screen. “We were concerned about how much we could change before a typeface becomes unrecognizable as what it’s meant to be,” Hoefler explained. “It turns out to be quite a bit.”

The H&FJ team built a font editor into Safari, so that type designers could view the fonts in a ‘real’ setting. This software allowed the designers to “turn knobs” rather than re-drawing individual glyphs, and view how an adjustment to one letter looks when applied across an entire family.

Another problem Hoefler wanted to address was the lack of families and features in many existing web fonts. His team included every weight, width, and style of each typeface in the web version, and ensured that these displayed well on screen. They also included the full set of glyphs and features for each typeface. Because bandwidth is another challenge of the web design world, Hoefler’s team made it easy to turn families and groups of glyphs on and off from their front-end library.

Finally, Hoefler showed a few examples of H&FJ fonts in use in the “real world” of the web, on sites such as Kottke.org, Delta.com, the MoMA’s online Magritte exhibit, and designer Jessica Hische’s website.

As he scrolled through the end of his slideshow, Hoefler seemed to be doing something other than simply showing off his final product. He enjoyed seeing what these designers had created with HF&J typefaces, and was proud to have given them tools to use in their work. As Hoefler said at the beginning of his talk, “it wasn’t the bicycle that changed the world. It wasn’t even the pedals. It was the tire.” Cloud.typography is Hoefler’s attempt at giving web designers a less bumpy ride.

Additional Information:
Hoefler & Frere-Jones
Cloud.typography

Event Details:

 AIGA/NY Fonts for the Web with Jonathan Hoefler

Event Photos:
Click here to view all photos from AIGA/NY Event Name on Flickr.
To view additional photos, or to contribute your photos, visit our AIGA New York Flickr group.

Special thanks to contributing writer Karen Vanderbilt for the AIGA/NY Fonts for the Web with Jonathan Hoefler event recap and photos. Karen can be found at karenvanderbilt.com, @k_vanderbilt and Studio Kudos.