BostonGlobe.com

Though awareness of webfonts is finally mainstream, their use — especially among larger magazines and newspapers — is still at a slow trickle. I think we'll see the spigot opening much wider in the first few months of 2012, as quality options increase and media brands finish redesigns that have been in the works over the last year.

One major institution leading digital newspapers into the webfont future is The Boston Globe, with their September launch of BostonGlobe.com.

Print

The Boston Globe, print edition. Click to enlarge.

Digital

BostonGlobe.com homepage at full width. Click to enlarge.

Over the years, Miller's role has expanded from a sturdy Scotch Roman for general purpose text, to even sturdier type for newspapers (Daily), to more delicate versions for large (Banner) and space-efficient (Headline) display type.

At the heart of the Globe's typographic personality isMiller Headline. The typeface is a slightly condensed addition to the popular Miller family by (Boston area resident) Matthew Carter. It was created specifically for newspapers like the Globe and served as the main headline face for the paper since 2001. BostonGlobe.com uses screen versions of the fonts via Webtype.

Supplemental heads and section titles are set inBenton Sans, Cyrus Highsmith's contemporary interpretation of News Gothic that was introduced to the print edition four or five years ago.

Miranda Mulligan, creative director for the Globe's digital products, says the two families were core to the new BostonGlobe.com design:

Utilizing The Boston Globe's print typography in its new site was tantamount from day one. In the extremely early visual prototypes of the site, long before we had engaged with any outside vendors, we had been utilizing Miller and Benton as the primary drivers of the visual design.

Section pages and an article page from BostonGlobe.com. Click any image to enlarge.

Sidebar teasers are another example of how Miller Headline and Benton Sans complement each other throughout the site.

Mike Swartz, whose Upstatement firm assisted with the site, confirms the importance of the newspaper's type:

If you go to Boston's bars and restaurants you can see framed front pages of the Globe from the Sox wins in 2004 and 2007 to the C's in 2008, and I'm sure they are mounting the Bruins pages as we speak. The type is the face of the Globe, and the Globe is the face of Boston.

Despite the emphasis on maintaining the newspaper's identity, BostonGlobe.com is not merely a skeuomorphic replication of the printed paper. Font sizes, column widths, and navigation are informed by best practices in digital media, and specifically "responsive" design, resizing and repositioning text and images for optimal viewing at any window size. Not every window width results in a beautiful page, but overall it's a much better and more consistent experience from the big screen to the iPhone than most digital newspapers today.

The site responds to window width, reducing columns as well as resizing images and text for an optimal layout on various screens. The screenshots above show the site at approximately 700px and 400px wide. Click to enlarge.

Swartz explains how the typography of the print edition, not the layout, informed their effort to create a consistent experience on the screen:

We all worked at the Globe as print designers before leaving to start Upstatement, and when we started working on BostonGlobe.com it was like picking up where we left off. We used the same tools to design the site that we used to design the paper — InDesign with Miller and Benton — but we didn't get caught up in "making it look like a newspaper", such as making "pages" to click through or using clunky print conventions in the browser. The fonts let us bring over the soul of the printed Globe while still focusing on making a cutting edge and modern website that drew more inspiration from the web than from print.

The site sports a few nifty interactive extras that take advantage of the digital medium. In this feature visitors can listen to audio from a court trial while the transcript follows along automatically. Click to enlarge.

So there you have it, brand integration across media through consistent headline typography. Still, bringing a legacy print identity to the web doesn't always mean bringing every typeface along with it, even if webfonts are available. Designers are often stuck with fonts that haven't been optimized for screen, or perhaps, as the Globe found, they aren't worth the download time. The print edition of the Globe uses Miller for text and Poynter Gothic for other small type, but Mulligan chose speed over absolute typographic consistency:

With some families, fonts have to display at certain font sizes or larger before the user can see all of the nuances and details of the font. In print, anything under 15pt is Poynter so bringing that to BostonGlobe.com would cost us a lot in terms of page weight and users would have a hard time deciphering the details of that font. Also,Georgiais based on Miller so using Georgia for the typography smaller than around 16pt is a wonderfully graceful and smooth transition.

Speed considerations also took their toll on the mobile edition of the site:

From a technical perspective, we have little control over any additional weight that ads and content producers might add to the overall page weight. Therefore, Filament Group worked pretty hard to refine the overall asset loading and distribution from mobile, tablet, and desktop to try and control the page weight. At one point in the process our prototypes were around 700KB–1MB. And, while 1MB isn't uncommon or large on the desktop, it's still quite heavy for mobile connections. So, for the portions of code we do have control over, we talked through a couple of ideas that could help. After discussing either dropping the visuals as a user gets to the smaller browser sizes or dropping the custom fonts, we decided to cut the custom fonts entirely on mobile. We felt that, with some serious CSS tender-loving care on the font fallback styling, we could try to maintain the Globe brand. This brought the weight of the prototypes down to a baseline of about 300KB–400KB.

Webfont users can reduce file sizes by subsetting fonts to include only necessary characters, snipping off special punctuation or Central and Eastern European language support. In fact, the BostonGlobe.com designers considered using a subsetted Miller Headline Condensed for drop caps. But limiting character sets isn't really an option for newspaper story text. In the Globe's case, the tradeoff is reasonable, but I would love to see them replaceHelveticawith Benton Sans RE, the screen-optimized family you're reading right now and a natural extension of the Globe's palette.

Still, I'll gladly concede a bit of stylized small type for the bigger and better news that sites like BostonGlobe.com represent: we're entering a new era in newspaper design. I can't wait to see what the new year brings.