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.

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

Good Fonts, Bad Fonts, and the Presidency

Somehow we’ve let the election season come to a close without thanking both parties for making this an 100% H&FJ election. Continuing the signature voice of its 2008 campaign, Obama for America kept Gotham as its typographic keystone, this year adding our Sentinel typeface as a companion slab serif. The GOP chose fonts from us as well, the Romney campaign settling on Mercury for its serif and Whitney for its sans.

We’d especially like to thank the teams at Obama for America and Blue State Digital for making us a part of their outstanding work on Barackobama.com. Eagle-eyed viewers may have noticed that webfonts from H&FJ made their first appearance on that site earlier this year, an especially meaningful milestone for all of us. It’s not often that your first beta tester is the President of the United States.

If the coming days bring a bitter electoral challenge, or the next four years bring the nation continuing deadlock on Capitol Hill, Americans will know exactly who to blame: typeface designers. According to this study by researchers at the University of Illinois at Urbana-Champaign, bad typography may be useful in softening the stance of the politically extreme. The theory is that awkward or uncomfortable typography disrupts a reader’s “confirmation bias,” one’s tendency to only see things that are agreeable. What amateur typography might do for a candidate’s credibility is anyone’s guess, and whether the study’s choice of Times Bold really counts as an acceptable control for “good typography” remains an open question. But I look forward to the 2016 election, in which the honorable grunge candidate will face off against his esteemed colleague using Comic Sans. —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.