GOOD/Corps
Corporate goodness begets typographic goodness in this long, beautiful page from GOOD.
For most of the web’s history it was quite rare to find site designs that were defined almost entirely by their typography. Sites like Coudal.com — distinguished by its elegant use of core fonts Times and Verdana — are few and far between. I wouldn’t say we’re experiencing a flood of typographic designs yet, but the ability to serve webfonts has opened the spigot from a trickle to a steady stream. We’re seeing more and more sites that rely primarily on type to shape their identity.
This spring, GOOD launched a site that exemplifies this approach. GOOD/Corps is a new marketing agency founded to help companies promote their altruistic efforts. The single-page site is a harmonious mix of three typefaces, all of which were unavailable before the advent of @font-face. But the more remarkable fact is that each of the fonts are hosted by a different webfont service. The design team (Atley Kasky, Keith Scharwath, and Jon-Kyle Mohr) say that working with three different sources (and three different bits of code) was only a mild hassle. They also say they saved loading because they were able to use fonts, not images or Flash, to convey both content and style.
The typeface choices began with Trade Gothic Condensed #20, the primary face of GOOD/Corps’ mother company. Trade Gothic is served by Fonts.com, an outfit whose fonts and servers are far better than its online presence, so don’t be scared off by the website — I hear it’s getting an overhaul soon, thank goodness.
The lyrical Sabon, also used throughout GOOD magazine, is a fitting complement to the workmanlike Trade Gothic. This is the Monotype version, served by Webtype.
The trio is rounded off by FF Bau, ordered from FontFont and served by Typekit. For those seeking a European Grotesque but want something warmer or more human than Helvetica, FF Bau is ideal and underused. Its model was a late nineteenth century typeface, one of the first sans serifs, and a favorite of the Bauhaus.
The three typefaces, each with an italic, form a broad palette for communicating a variety of information. Armed with six very distinct font styles — and very skilled use of color — the designers bring texture and variety to a long scroll that might otherwise get quite boring. While the site is essentially a single page (built from a heavily modified Cargo blog template), users can jump to different sections through a navigation bar on the left.
Read more about the GOOD/Corps site, complete with insight from the designers, at Webtype’s blog.
9 Comments on “GOOD/Corps”
It's a comfortable and handsome palette, but to my eyes the brighter, darker background eats away at the thins of the reversed-out Sabon quite a bit. I wonder if webfont providers will start providing something like "grades" — beefing up of weight more subtle than a jump to, say, semibold, given that (I would guess) reversed-out text will be more commonly employed on the web than in the print world.
Interesting thought on web font grades, Craig. Although it's not exactly equivalent to grades, having Display, Regular, and Caption optical sizes can function in this way. Want a beefier font? Use the Caption version.
Adobe has a number of these in their typefaces available on Typekit - Chaparral Pro, for instance, has Display, Subhead, Regular, and Caption optical sizes.
It'll be interesting to see what H&FJ does with some of its graded fonts such as Mercury when they release their web fonts offering.
With Firefox on a Mac the reverse effect would be the exact opposite: bolder.
Frode speaks the unfortunate truth. To be truly effective different grades would need to be served to different browsers. Doable, though. Webfont services already do this kind of thing.
David Berlow tested some concepts related to both grades and pixel-size-specific designs with the Franky webfont experiment (presented at ATypI in Mexico). More info here.
Revisiting this site two years later: The typography — that really was what made the website stand out two years ago — is now dead; Georgia instead of Sabon, Helvetica instead of FF Bau. The only original typeface remaining is Trade Gothic, simply because it seems to be using a self-hosted version of the font, where the other two probably used a hosting service that has expired. I guess this (unfortunatley) is a situation we need to get used to, and as designers try and work around by convincing our clients to pay their subscribion invoices a few years in advance (something that for sure can be tricky asking for), or going for self-hosted solutions. Too bad, as I really wanted to see a good example of Sabon in action.
If it’s just for a sample of Sabon in use, check German magazine brandeins.de, though not flawless (beware faux italic and weirder than necessary kerning).
@Indra — Thanks! Still unfortunate with the GOOD site, though.
They have changed it to Circular and Freight Text.