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

Made with Cloud.typography

Navigator Logistics

Endearing animations and meticulous type strike just the right tone in this small site for an international company.

When Navigator Logistics, a forwarding service company in Finland, brought on designer Nigel Payne to update their site, the collaboration resulted in a fresh design full of crisp typography and lively illustrations. “Right from the get-go, I knew the site’s illustrations were going to be in a limited color palette, and line-based,” said Payne. “I wanted a typeface that paired nicely with the technical blueprint style, but also had a little fun about it. Gotham Rounded felt just a little younger than his older, more sober brother, Gotham.”

Payne built the site around a compact palette, using just two weights of our Gotham Rounded ScreenSmart family. Though ScreenSmart fonts are engineered specifically for text sizes, Navigator Logistics uses them with equal success in headline sizes, using CSS letterspacing to manage the fonts’ fit, coaxing lovely voices out each style.

The site uses subtle changes in typography, illustration style, and animation to distinguish three discrete sections, presenting an overview, a list of capabilities, and contact details within a single page.

For mobile users, CSS media queries not only reshape the grid and eliminate discretionary details, but introduce buttons for calling the company directly — a smart use of the medium, and a thoughtful detail for users. —NW

Made with Cloud.typography

USPS Stamps

As part of their continuing work with the United States Postal Service, Journey Group turned to Cloud.typography for the new USPS Stamps website.

Even when “communications” meant an e-mail campaign delivered to 317 readers, Journey Group of Charlottesville, VA recognized that stamps have a story to tell — and not just to collectors. Stamps are built on typography, making the web a natural place to share their rich visual heritage, and making webfonts an important part of the experience.

Though postage stamps can pass unnoticed, their typography is wonderfully playful, and the new USPS Stamps website strikes this balance with aplomb. It delights readers with its typographic grace and wit, but relies on webfonts to perform in a diverse set of circumstances, accompanying an unforeseeable collection of images, and rendering seamlessly across all the browsers used by the site’s vast audience.

For the site’s typography, Journey Group chose our Verlag and Chronicle webfonts. Instead of merely styling the site’s headlines, they implemented webfonts for all of the site’s type, using Verlag for both headlines and annotations, and Chronicle ScreenSmart for text. Using a ScreenSmart font ensured that the site’s text would maintain its visual integrity at even the smallest sizes, so that all of the site’s readers are presented with crisp, legible type.

“I’ve always admired Verlag for its modernist swagger,” said Senior Designer Seth Nickerson. “My feeling was that it could carry a page when needed, but also be objective enough to live comfortably with disparate elements, without looking out of place. Chronicle ScreenSmart seemed the obvious choice to pair with it: it has a crispness that matches Verlag, and just seemed to invite long-form reading when we looked at it in the design, which is paramount.”

The site’s typographic sophistication goes far beyond its palette. CSS transforms and subtle animations play a gentle but effective role in bringing the type to life, and the site is filled with gracious nods to philately (including our favorite, the perforated edge in the main nav.)

We’re proud to feature Journey Group’s work for the USPS as our first profile of a website using Cloud.typography. When we return, we’ll introduce you to a site that uses meticulous type and illustrations to strike the right tone for an international company. In the meantime, if you’ve made something special that uses Cloud.typography, let us know: we’re on Twitter at @HoeflerCo. —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.