July 30, 2013

H&FJ Web Fonts: A Field Guide

Since Hoefler & Frere-Jones announced their foray into the world of web fonts, the internet has been overflowing with the rejoicing of designers and typographers everywhere. Finally, one of the most popular type foundries out there has released their long-awaited competitor to the web font services of late!


You can already see the new service in use on sites such as Rdio, Jessica Hische’s website, and CSS-Tricks. But what does this new offering mean for you and me? Well, designers and developers alike have a lot to look forward to in the service. Let’s take a closer look.

A Brief History of Type

Let’s first refresh our minds with a brief lesson in the evolution of type on the web. Back in the days of CSS 2, (OK, so not that far back) our selection for web-friendly typefaces was somewhat limited. We were able to use a small selection of web-friendly fonts which were sure to be on (almost) every device the page was viewed on — Verdana, Arial, Georgia and Times New Roman — or we selected a font, such as Helvetica, that would be “best viewed” on specific platforms. Not ideal. And then there were the image replacement techniques, where we created images of the text in whatever font we had at our disposal, and replaced strings of text using CSS. Finally, there was Sifr; a technique which used Adobe Flash to replace text. Both these replacement techniques were inaccessible, a pain to implement, and an unpleasant experience across platforms.

Little did we know, a specification for real web fonts was underway: @font-face. Those of you familiar with @font-face will know that it’s not the easiest thing in the world to implement, so we turn to high-quality web font services like Google Web Fonts, Typekit, and Fontdeck to do the heavy lifting for us. These services, along with H&FJ’s new service, handle the hosting, licensing, and optimisations of web fonts. However, each service is not without compromise; all of these services lack fine-grained control over the fonts we get. Things like ligatures, small caps, and other OpenType features are often difficult to implement without seriously affecting the performance of the fonts.

This is the exciting part. H&FJ have created a web font service for typographers and developers alike.


Let’s get the hard part out of the way. H&FJ’s cloud.typography service starts at $99 per year. That price buys you 250,000 page views each month. For $50 more, you get a staggering 1 million page views, and for $299, you get double that.


Each of these plans also give you five free font families thrown in — a bargain when you consider that these high-quality font families cost around $200 alone — as well as all your past purchases from the foundry, unlimited domains, up to ten “projects”, SSL delivery, and 1gb of development bandwidth. Larger plans are available, as well as additional projects.

Font Offerings

H&FJ’s library is small when compared to the likes of Typekit, but they raise the bar on quality. The foundry offers over thirty families, ten of which have been completely reengineered, redesigned and optimised for use on the web and screen devices. A considerable number of these families have extended sets, including condensed and expanded variants, weights from ultra light to ultra black, small caps, ligatures, swashes and international character sets. Basically, you get some seriously high-quality fonts.

The first five families that you pick are completely free, and after that, families are priced individually. All desktop licenses also come with a web use license, so you can bring along previously purchased H&FJ typefaces, as well as get a great deal on desktop & web licenses together, for unified branding. Perhaps the most exciting typeface available is Gotham, which is considered by many to be Proxima Nova’s more refined ancestor.

There are some subtle differences between Gotham and Proxima Nova; namely, Gotham’s more generous letter spacing and widths, and Proxima Nova’s alternative italic “a”.


One important aspect of web fonts is how they perform on screen devices. It takes a lot of optimisation to make sure that fonts — particularly those originally designed for print use — perform well on screens. H&FJ have gone all-out on the optimisations of some of their typefaces, often completely redrawing families and characters to make sure they look outstanding on screen and web.

Sentinel (top) and Sentinel Screensmart (bottom) both at 18px. The taller x-height and wider letters in the screensmart version make it ideal for smaller sizes and body copy.

The optimisation process has been donned “ScreenSmart” by the foundry. From their website:

ScreenSmart fonts are built for web text. Conceived from the outset as font families for the screen, they’re designed around the natural properties of pixels, and engineered to deliver precise results everywhere.

That’s underselling their work. The foundry redesigned their fonts in the browser, using a suite of tools based on Webkit. Entire new weights were designed specifically for screen use, and every font is optimised on a variety of browsers and platforms for “pixel-perfect” readability.


Considering the quality – and consequently, the file size – of the fonts, this thing is fast. Cloud.typography uses a delivery agent to handle requests for their web fonts, detecting the browser requirements and delivering only the fonts needed for that browser. It also caches all the files requested, distributing them across a global CDN, meaning that the delivery of these files is always blazing fast.


The delivery agent operates differently depending on the status of your project and its fonts. In development mode, the font files are hosted on H&FJ’s servers and distributed from the CDN. For each of your projects, you get 1gb of development bandwidth per month; a fairly substantial allowance. When switching to production mode, you let H&FJ know where the fonts will be located on your own server, download a sizeable zip file, and stick it on your server. After that, there’s no need to change the CSS link or do anything else; the CSS file points to the fonts on your own server, but the delivery network still does the heavily lifting in determining which fonts are required, saving your user some serious waiting time.


After switching to production mode, the only limit is the page view allowance for your plan.

Another thing to note about Cloud.typography’s performance is the fact it doesn’t use a JavaScript loader like Typekit and Google Web Fonts. A JavaScript loader has some obvious advantages when it comes to dynamically adjusting to the browser’s needs, but it also comes at some costs; extra HTTP requests, some low-level browser sniffing, and an additional delay while the script adds the CSS to the document.

One thing that really interested me acted as quite a subtle performance enhancement. When you take a look at the CSS rules for adding the fonts to your site, Cloud.typography specifies not one, but two font names. For example, Hoefler Text’s CSS rule looks like this:

font-family: "Hoefler Text A", "Hoefler Text B";

By requesting two font files, the fonts can be downloaded simultaneously (though this isn’t the case in all browsers). In theory, it is faster to download two 200kb files simultaneously than it is to download a single 400kb file. Both the A and B fonts contain half the character sets, so the characters missing from file A fall back and use file B. Smart or what?

The actual intention of splitting files in this way (says H&FJ’s Reed Reeder) is to “prevent casual misuse of the fonts”, but it’s all interesting none-the-less.

All this said, the font files can quickly become quite large. The fonts are added to your project on a per-weight/style basis, with each weight or style averaging around 40kb. This means if you want a single font family in regular and bold weights, with italics, and small caps for each of those, you can expect a total size of 320kb.


Cloud.typography offers a highly competitive level of control over the fonts you select. These options clearly indicate a web font service not just for designers and developers, but for typographers. By default, any font family you add to a project gets the regular, italic, bold, and bold italic typefaces, with standard punctuation and kerning.

Here’s where it gets interesting (or borderline obsessive). Once you add a font family to your project, you can also add all other available weights (up to nine) and styles, true small caps, contextual and discretionary ligatures, swashes, differing number styles, extended character sets and punctuation, and mathematical characters.


Not only that, but you can also define custom character sets. For instance, if you only use a certain typeface for your site’s logo, you can tell Cloud.typography to only supply the characters needed, saving some serious downloads for users.

It’s worth remembering that each of the extra typographic features you add will add more weight to the fonts, and that browser support may be a little patchy, particularly on old IE.

Wrapping Up

Hopefully, you can see that H&FJ have gone the extra mile, offering unparalleled fine-grain control over the fonts you choose for your sites. While the file sizes will keep on rising, this level of control has got designers everywhere (yours truly included) incredibly excited. If anything, the launch of Cloud.typography might kickstart an evolution in the other web font services currently available – we can only wait and see! Don’t forget to learn more about the new service straight from the horse’s mouth.

July 3, 2013

Pairing Fonts is Like Feeding Children..

When starting a web design project there are a lot of difficult decisions to make, including the classic: selecting fonts. Well executed typography can engage visitors, when they’d otherwise perhaps skim over the main body of content. However, it...