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

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.

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.