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

Introducing Surveyor

We’re delighted to introduce Surveyor, a new family of fonts for print and web, and sizes large and small.

I love maps, and not just for their vintage charm. I admire them as highly functional pieces of design, packing extraordinary amounts of information into small spaces, and invisibly educating readers about how they’re meant to be read. Spend a few moments with a map, and you’ll find that you’ve learned to distinguish counties, cities, and towns by the styles of type they use, without ever checking the legend. And these are just three of a typical map’s two dozen styles of lettering.

Surveyor® is a new family of fonts inspired by the traditional mapmaker’s letter. It revives a style of lettering that’s unique to cartography, one that evolved in the early nineteenth century and endured for as long as maps were printed by engraving. Beyond reviving the shapes of these alphabets, Surveyor celebrates what maps do best, by providing an expressive typographic vocabulary to help designers articulate many different kinds of information. A peek at Surveyor’s style list hints at what’s possible.

We’ve designed Surveyor in three optical sizes: a Text version for body copy, a Display cut for headlines, and a Fine for sizes larger still. Surveyor goes beyond the mapmaker’s roman and italic by including five weights, each of them outfitted with both roman and italic small caps, swash caps, and swash small caps. In its Text size, Surveyor features tabular figures, fractions, and symbols, to help it conquer the most demanding content. And for Cloud.typography users, we’ve created Surveyor ScreenSmart, a family of webfonts for text that contains all of these advanced typographic features, engineered to work in the browser at sizes as small as nine pixels.

The Making of Neon Signs

Every neon sign has a “start and stop position,” a point on each letter where a tube begins and ends. I’ve just learned how a signmaker chooses this point, and it’s something I’d never have guessed. It is fascinating.

It’s nothing to do with a letter’s traditional form, or its cultural dimensions. These are the first ways that neon speaks to us, whether it’s the plainspoken sans serif on a liquor store or the elaborate fantasy of a Las Vegas casino. In The Making of Neon Signs, an eleven minute film produced by Cpak Studio for M+, Hong Kong’s museum for visual culture, we’re introduced to a craftsman who first approaches signs from the their cultural angle: the bank that wants something honest, the restaurant that wants a simple semi-cursive script, or the sports club that uses the strong and powerful Northern Wei style. But none of this affects a letter’s start and stop position.

It also has nothing to do with neon’s visual aspects, how single-line letters work in small sizes, but different kinds of intricate doubling are used as letters get larger. Nor does it have to do with the physical considerations of the medium, the ways that inert gases combine with different kinds of colored glass to produce efflorescence, or the ways that glass can bend, or the order in which pieces can be attached. Even as I watched men without gloves hold incandescent glass rods over an 800°C flame, the obvious didn’t occur to me, which is this: you design the letter so that it’s possible to bend it into shape without burning your hands.

There are other great moments in the film that I won’t spoil, and some terrific footage of vintage sign maquettes that designers will love. Spend eleven minutes with it today. —JH

Fonts by Hoefler & Co.

We’re marking the change from H&FJ to H&Co with some updates to our font library, some new features on the site, and some good news for app developers.

Improved mobile fonts

We’ve remastered all 1,094 fonts in our library to deliver even more consistent performance across desktop, web, and mobile environments. In the past, we’d supplied app developers with special “mobile” versions of fonts built for iOS and Android — but starting today, any fonts you purchase for your computer will be the same ones you’ll use when developing mobile apps.

Free updates for desktop fonts

We’re building a new feature for the site that makes it easy to download your past purchases any time you need them, and to ensure that you always have the latest versions of our fonts. Today we’re rolling this out to our Cloud.typography subscribers, and soon we’ll be making it available to everyone. If you’re a Cloud user, log in and go to Your Font Library under the “Welcome” menu, and you’ll be able to see your entire font collection, and download the latest versions of any fonts you’ve licensed for your computer.

Streamlined app development

We’ve changed our licenses to make life a little easier for app developers. In the past, developers needed two kinds of licenses: an End-User License to use fonts on their computers, and a separate App License to embed these fonts in their apps. We’ve rewritten our EULA so that anyone buying a computer license can now use these fonts to develop apps, without any separate paperwork. App Licenses are needed only when publishing an app, something our licensing group can help arrange for you or your clients.

Fly Delta, Readability, QuizUp and Threes, featuring our Whitney SSm, Sentinel SSm, Gotham SSm, and Premium typefaces.

We’d like to thank all the designers and developers who’ve made our typefaces a part of your fantastic work. As people who are obsessed with designing fonts to solve problems, we love seeing all the ways you’ve used our fonts to improve familiar experiences, and create entirely new ones. We can’t wait to see what’s coming next. —JH

New at Typography.com

We’re starting off the new month with some enhancements to site, and some good news for web developers. Here’s what’s happening.

Answers: Search and FAQ

We took the occasion of writing a new Webfont FAQ to polish up our site search tools: you’ll find both resources available here. In addition to some guided tours of topics like licensing and troubleshooting, you’ll find updated answers to questions about publishing apps, making PDFs, and more. Since the tool searches across the entire site, look for some colorful surprises, in case you just happen to be searching for poodle’s paws, lightning bolts, Tupac Shakur, Zipf’s Law, or any of the three places we mentioned Steve McQueen, which science can’t explain.

Larger Desktop Licenses

We’ve been delighted to see organizations of every size adopt Cloud.typography, from independent developers subscribing at $99 to high-traffic websites who measure visitors in the billions. In keeping with the range of webfont subscriptions we offer, today we’re expanding the range of desktop licenses that can be purchased online: starting today, you can license fonts online for as many as 250 computers. As always, our sales office is happy to assist organizations who need even bigger licenses. Drop us a line.

Webfont Domains

One of Cloud.typography’s highlights is that it lets you deliver webfonts to an unlimited number of domains. We’ve heard from designers who enable a single domain such as example.com that traffic to www.example.com is blocked, because the www hasn’t been explicitly included. Starting today, every time you add a domain, the www subdomain is automatically whitelisted, and vice versa: adding www.example.com whitelists example.com as well. If you’re grappling with an especially gruesome list of subdomains, you can use the asterisk as a wild card to authorize them all, by adding *.example.com. There’s more about this in the Cloud.typography User Guide.

We’re hiring!

The best news of all: we’re hiring! If you’re a front-end developer with strong UX instincts, a sharp eye for detail, and you live and breathe JavaScript, we want to hear from you. With Cloud.typography up and running, and the next generation of web applications in the works, it’s a great time to join a small and dedicated team of obsessives, and to build things for an audience who appreciates good design. This is a full-time position in our New York office, open to US citizens and others with authorization to work in the US. Tell your friends. —JH

Fonts For The Web: Two Lectures by Jonathan Hoefler, November 2 & 14

What makes a good webfont? Before we wrote the first line of code for Cloud.typography, or lit the first pixel of our first ScreenSmart font, we began the search for a solution to this riddle. The answers are unexpected: a good webfont is more than just legible, and more than just attractive, and some provocative solutions come from some unexpected places. Webfonts can learn a lot from nineteenth century engraved maps, twentieth century dictionaries, and twenty-first century authors.

If you’re in New York this month, join me at Ampersand NYC this Saturday, November 2, or at a special lecture for AIGA/NY on November 14, for an exploration of what constitutes fine typography on the web. I’ll be sharing a behind-the-scenes look at how we brought our library of fonts to the web, and some new ways of looking at type that are useful for every cross-disciplinary designer. —JH

Making One’s Own

“I never wanted to draw typefaces, I wanted to have typefaces.” I found myself uttering these words to a filmmaker this past spring, who shared them first with an audience of design luminaries, and then with the entire internet. It’s a strange sentiment, but one that’s familiar to anyone who makes things: as a designer, I couldn’t find the tools I needed, so I made my own. I designed typefaces to fill measurable holes in my palette, and to help me do things that other fonts couldn’t. As it turned out, the business of identifying these opportunities and inventing things to satisfy them became a project unto itself, which is how this company came to be, working to create the typefaces that help designers do more.

My work at Hoefler & Co. gives me the chance to contribute not only to the fonts themselves, but to a range of communications that use them, from paper invoices to type specimens to web applications. Each of these projects invites different ways of using type, and each raises different questions about what kinds of tools might help designers like us do our jobs more effectively. As someone who came to design through programming, I especially love the web: I find it satisfying to experience and rewarding to design for, even if I’m impatient with the pace of its growth as a typographic medium. Having outgrown an infancy of core webfonts that were high in quality but few in number, the web moved squarely into its adolescence, full of exuberant but badly behaved fonts that have yet to live up to their potential. Most webfonts are hard to read at text sizes, especially on Windows. Type is often broken, congested, or muddy; font families available for the web regularly include styles that are untenable on the screen. Indispensable tools like small caps and tabular figures have been ignored, limiting the ways in which designers can organize and articulate information. In response to these challenges, and in keeping with our tradition of helping designers solve problems, we created Cloud.typography, a webfont solution for design professionals. Like the fonts themselves, Cloud.typography is a tool, built to provide everything you need to create online experiences with the level of quality you’ve come to expect from us.

Typefaces are designed to solve problems. A good webfont should take on the biggest challenges of all.

Our goal wasn’t just to port our library of fonts to the web, but to create a new typography that suits this medium — not just fonts on the web, but fonts for the web. These are our ScreenSmart fonts, designed from the pixel up, and built to perform at text sizes as small as nine pixels. One rewarding milestone in designing a typeface is getting to use it yourself, which we’re doing today: the redesigned blog you’re reading features three of our new ScreenSmart families (Mercury SSm, Whitney SSm, and Gotham SSm) as well as our multipurpose Sentinel family for headlines. ScreenSmart fonts give us the opportunity to be as expressive online as we are in print, and Cloud.typography ensures that this same experience is delivered to readers on all browsers and all platforms. We’ve taken the opportunity to rework all six years’ worth of blog entries, to take advantage of all things we can now do with Cloud.typography: jump in and you’ll find exotic punctuation marks, extended accent sets, obscure and typographically complex numbers, unexpected kerning pairs, and letters brought back from extinction — all rendered using ScreenSmart fonts that are specifically designed for online text. These are the tiny moments in which a good webfont shines, and where typography proves its value to authors, designers, and readers.

The launch of Cloud.typography means a return to the blog, which has long been dormant while we’ve worked to complete this four-year project. There’s much to discuss, and a lot of surprises from us in store: I hope you’ll keep us bookmarked. —JH

H&FJ Supports Hamilton

In support of their unique work to both safeguard and celebrate American wood type, we’re proud to announce the donation of a $10,000 Sustainability Grant to the Hamilton Wood Type and Printing Museum of Two Rivers, Wisconsin.

Wood type is a vital part of our visual culture. Its riot of technological and typographic innovations remains as relevant as ever to modern typographic practice: whether your favorite font comes in multiple widths, or features chromatic layers, it owes a considerable debt to its wood type forebears. H&FJ has always believed that the preservation and study of historical typography serves even the most progressive experiments, so we’re proud to support Hamilton, not only in its curatorial mission, but for the relevant and exciting programming it provides to both the community in Two Rivers, and the design community at large.

This Sustainability Grant kicks off a new fundraising chapter for the museum, to help secure the future of its new home at 1816 10th Street. If you love typography, we hope you’ll join us in supporting their wonderful work. —JH

H&FJ: The AIGA Video

As part of the presentation of the 2013 AIGA Medal, the American Institute of Graphic Arts commissioned this short video about type designers Jonathan Hoefler and Tobias Frere-Jones. In addition to offering an intimate glimpse at some recent works-in-progress, the video features an inside look at the H&FJ offices in a moment of rare repose.

Thanks once again to the AIGA for recognizing our work, and to Dan and Andre at Dress Code for presenting typeface design with such thought, care, and wit. —JH

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.