GOOD/Corps

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 withTrade GothicCondensed #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 lyricalSabon, 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 byBauhaus.

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.