Toward a Philosophy of Webfonts: A Lecture at Beyond Tellerrand, Berlin

If you’ll be in Berlin next week, I hope you’ll join me and my fellow speakers for Beyond Tellerrand, the design technology conference that’s quickly become a favorite locus for interesting design thinking. Equal measures of visual design and web technology always combine for an inspiring and provocative couple of days.

I’ll be talking about webfonts, and a critical framework that I’ve found useful in understanding their intentions and assessing their quality. And if all goes well this week, I’m hoping to have the opportunity to introduce some new features that we’re developing for Cloud.typography, our second such announcement this month. —JH

Cloud.typography Browser Support Now Goes to 11

Cloud.typography now supports even more integrated browsers, like the ones built into web development tools and mobile apps.

Cloud.typography is designed to identify the type of browser viewing a web page, and to respond with exactly the right kind of fonts. This offers advantages in terms of both render quality and filesize: IE6 for Windows gets the additional help it needs to render small type crisply, and Safari for iOS gets fonts that aren’t encumbered by excess data. Now, we’ve supplemented Cloud.typography’s long list of browsers and font types with a safety net, designed to deliver industry-standard woff files to any browser it doesn’t recognize. As a result, you’ll now see webfonts in new places, from the browser built into the Google app for iOS, to the preview tool inside Coda, the great web development app from Panic.

Best part: there’s nothing you need to do. All of these updates are already online, and delivering for every Cloud.typography project. Enjoy! —NW

What’s Cooking

Menu typography at discover.typography

If you’ve ever dated a graphic designer, this has likely happened to you. You’re seated comfortably at a charming restaurant, presented with menus, and you watch as your companion scans up and down the entrées. Menus are flipped over, brows furrow; eyeglasses are lifted as eyes squint at the details. You catch an occasional “huh” that suggests the discerning judgment of the true connoisseur, and think you’re in for a treat. “See anything you like?” you ask innocently. “I like the italic small caps on the wine list,” comes the response, “but they used Arial for the bottom two lines.” It’s amazing we get invited anywhere.

Lunchtime at H&Co tends to provoke these conversations, and with no civilians in attendance, we’re free to nerd out. We’ve been thinking a lot recently about the different typographic idioms that restaurants use to telegraph what’s in store — how the folksy barbecue joint distinguishes itself from the faux French bistro, or the more-Brooklyn-than-Brooklyn sandwich shop — and have been looking for ways to help designers communicate a restaurant’s culture without resorting to shopworn clichés. No wood type with the pulled pork, or belle epoque frippery with the poached eggs: you can definitely use modern, relevant, and satisfying typography, and still set the right tone.

You’ll find a few of our suggestions at What’s Cooking, a collection of thirteen typographic menus (plus a few amuse-bouches), today at discover.typography. These autumnal settings are a follow-up to Save the Date, our summertime celebration of the invitations that turn into cherished keepsakes once the first chill of fall enters the air. We hope you’ll enjoy them both. —JH

New from H&Co: Tungsten Rounded

There’s a wonderful materiality about rounded letters. Their lighter weights have an engineered quality: for me, they always bring to mind the controlled movements of a router, steadily cutting channels in brass or steel and leaving behind a spray of metal shavings. Their heavier weights are the stuff of the roadside, both the vacuform plastic letters that advertise gas stations and motels, and the painted signs that herald this week’s prices for groceries or liquor. Applying these tactile qualities to our suave Tungsten family gives us Tungsten Rounded, a new family of six fonts that’s at once earnest, energetic, and wry.

A common dilemma when working with rounded typefaces is what to do when two adjacent letters overlap. For the signpainter, the tiny divet created by two intersecting curves is quickly dispatched with a brush, but the letters in a typeface usually go unsupervised:

In Tungsten Rounded’s heaviest weights, we addressed this problem with a set of 151 alternate characters, designed to interact in more predictable ways. An OpenType feature automatically engages these characters when needed, to ensure that all of the 548 potential collisions are managed correctly, from common pairs like AX, to truly exotic ones such as .

Made with Cloud.typography

Football as Football

How six designers in Minneapolis crashed the American sports vernacular with the grandest graphic traditions of European football.

As the World Cup winds down, many Americans will turn from the excitement and agony of football to another beloved pastime: football. American football, to be precise. This year, six Minneapolis co-workers have combined these obsessions with their love of design into a single experience called Football as Football, which reimagines the logos of American football teams in the heraldic language of the great European football clubs. Watch as the mascots and monograms of the NFL take on German, English, Spanish and Italian accents: the design is both hilarious and spot-on.

While the crests are the star of the show, their designers lavished just as much care and attention on the site that presents them. “We wanted a brand for the project to wrap around the experience,” said Garrick Willhite, one member of the team. “We started with an icon, that lead to a logo, that guided the overall look and feel.” To support its vivid and varied imagery — and typography that includes fonts as far afield as Gotham and Hoefler Text — the team chose our Knockout family to use for the site’s webfonts. Originally inspired by sports ephemera, Knockout’s strong and athletic character makes it an apt choice for the project, and applied in a studied and subdued way, it supports the art instead of competing with it — just as a good team player should. —NW

Made with Cloud.typography

Thank You!

One of the great joys of designing typefaces is seeing them in the wild, and discovering what new voices people have coaxed out of your work. A year ago today, we launched Cloud.typography, and had no idea that we’d be presented with these delights so deeply, so rapidly, and so often: for twelve months, we’ve watched designers sign up for the service one day, build things the next, and deploy their sites the following morning. We’ve seen our letters come to life in ways we’d never imagined, on the sites we use every day, and in new settings that push the boundaries of possibility. It’s been a deeply gratifying experience for everyone who worked to build Cloud.typography, so we owe you our thanks for making our work a part of yours.

Thank you to the designers and developers who have put Cloud.typography to the test, using all the features we labored over, and reaching deep into the furthest recesses of our font library. Thank you to the organizations who have trusted their communications to our fonts, from the institutions who use our webfonts to bring their identities online, to the new businesses who have found their voice using H&Co fonts. Thank you all for a wonderful first year together — we are so looking forward to the next! —JH

New from H&Co: Nitro & Turbo

In contrast to our last release, a hundred-style family inspired by tiny engravings on vintage maps, today we’re introducing a two-style family of forward-looking, stadium-sized letters: meet Nitro & Turbo.

The irrepressibly energetic Nitro grew out of a commission from Michael Bierut at Pentagram, to create an original typeface for the New York Jets. An unusual project, Nitro started not with a moderate weight roman, but with a black italic, usually the most peripheral member of a type family. Instinctively we felt that Nitro could benefit from a companion design, but what? What additional style could offer a visual counterpoint, while sharing the design’s explosive energy and unstoppable momentum?

In place of a companion roman or a set of lighter weights, we decided to explore one of typography’s less obvious directions: the backslant. Like every project that begins with an unvoiced “how hard can it be?”, the answer came back, “harder than you think.” Backslants are eye-catching because they confound expectations, but tricky to draw because they go against the natural motion of the hand, the pen, and the alphabet itself, making them a design challenge as formidable as it is irresistible.

The result of the project is two fonts, the forward-leaning Nitro, and the backward-leaning Turbo. Both fonts have the versatility of a good hot pepper: they add a useful dash of fire to a surprisingly wide range of recipes, and in the right setting, they’re fantastic on their own.

A New Way to Discover Typography

Something new from the designers at H&Co.

A font’s shapes might be designed, but its personality is discovered. It’s only in its natural habitat, surrounded by other typefaces, that a font truly develops a unique voice. For the designers at Hoefler & Co., designing with a font — even while it’s still being drawn — is a vital part of the creative process: seeing how a font performs, especially in the company of other typefaces, helps us better understand its character, articulate its purpose, and perfect its voice.

Starting today, we’re going to be sharing some of these explorations on a new site at discover.typography.com. You’ll find typography that’s inspired by the things that delight us, and typography that reveals the techniques we’ve learned for achieving different moods. Discover.typography is a new way to experience type, an environment that makes it easy to identify typefaces, see them up close, and get to know their many subtleties. Check it out, on your phone, tablet, or computer, and let us know what you think! —JH

Use Fonts on iOS!

Now you can install H&Co fonts on your iPhone and iPad, and use them in applications that support fonts.

Great mobile apps like Pages, Numbers, and Keynote make it easier than ever to use your iPad and iPhone not just to consume content, but to create it. Typography, a long-missing piece of the puzzle, just got a lot better: starting today, your iOS 7 devices can use all the Hoefler & Co. fonts you’ve ever purchased, and you can install them directly from this site. Free.

Using Safari on your iPad or iPhone, head over to your Font Library page. You’ll see a list of fonts you’ve licensed for your computer, each with an add to device link that installs them directly into your mobile device. Managing fonts on iOS is easy — you’ll find more information about it in our FAQ. Enjoy!

Pages on the iPad, using Tungsten, Gotham, Sentinel, Surveyor, and Whitney.

Made with Cloud.typography

Videri Chocolate Factory

A colorful and unexpected palette of webfonts helps three chocolatiers deliver their most piquant flavors online.

It was the shared dream of Sam, Starr, and Chris that brought about the Videri Chocolate Factory. From the historic Raleigh Depot in downtown Raleigh, NC, the three operate a retail storefront, a factory floor, an outdoor café, and now a website where an animated collection of webfonts from H&Co helps them tell their story.

Videri’s diverse font palette includes Landmark , Verlag, The Fell Types, and Indicia.

Finding a way to express the company’s personality with typography was a top priority for the the team at PRPL, the digital creative agency tasked with creating the site. “I wanted to create a type system that felt friendly and organic, but also would feel at home in a factory setting,” said George Kedenburg III, lead creative at PRPL.

Kedenburg chose a vivid collection of fonts for the project, relying not only upon hard-working ScreenSmart fonts for text, but some rare and unexpected choices for display typography. Verlag and Sentinel ScreenSmart are used throughout the site, while headlines feature a mix of our more exotic typefaces: the dazzling Landmark Inline and Dimensional, the textured Fell Types, and the rubber-stamped Indicia font from our Numbers collection.

At small sizes, Sentinel ScreenSmart keeps the text perfectly crisp.

PRPL assigned distinct roles to each typeface, and used the Cloud.typography character set panel to carefully control what each webfont includes. (The Indicia typeface is used for all the numbers on the site, from prices in the shopping cart to the digits of the company’s phone number.) Refining each font’s character set not only helps reinforce the site’s brand guidelines, but helps keep webfonts lean, and quick to download. “That’s something I don’t think we’ve ever done, or thought would be worth doing,” adds Kedenburg. —NW

Your project exceeds the 1,000k limit, so your changes have not been saved.

Try adding fewer fonts, fewer styles, or configuring the fonts with fewer features.