Scanning through the rather gorgeous Gdgt redesign this week, I was impressed with its change in typography. The site uses Proxima Nova for its paragraph text, almost uniformly well above 12px, making reading comments and reactions on the site?s many gadgets easier to browse through. A bump in size also opens more opportunities for sizing variety within a single page, ranging from smaller 10px text for secondary sidebar information to large 16px text reserved for primary questions and notices. Overall, the typographic changes should deliver better usability and most likely generate far higher traffic.
Gdgt?s typographic change illustrates an important web design lesson: To improve the impact and readability of a text or information heavy web site, experiment with increasing the body text slightly. Try to move up from the common 10 to 12 pixel range to something larger, like 14 or 16px. It?s a practice many well designed sites are latching onto, especially in light of higher resolution displays and custom web fonts.
Gdgt is not the first to experiment with larger body copy. Many large news sites have moved in that direction with their latest redesigns, including The New York Times, BBC and CNN. Considering how important highly readable text is for these organizations, it?s a telling move. Other larger organizations praised for their web designs have bumped up their body copy size as well, most notably Apple: I noticed in their newly released iMac tech spec pages all of their text was increased from 12px up to 14px.
On the opposite side of the spectrum, a lot of smaller yet notable bloggers and designers have also embraced larger body copy: Jason Kottke?s 2009 redesign moved to a larger 14px Myriad, Jeffrey Zeldman?s refresh bumped up copy to 15px Georgia, and Ethan Marcotte now uses 15px Helvetica Neue.
Computers and mobile devices have increasingly higher resolution displays; the popular Macbook Air has a full a 1366×768 display in a mere 11.6? diagonal screen. Those higher resolutions result in almost all web text appearing effectively a pixel or two smaller in size, enough to make text that once was borderline readable a chore to comprehend. Naturally an increase in body text helps counteract this side effect.
Moving to a larger font size also can widen the choices available from custom font solutions like Typekit and Fontdeck. As designer Tim Brown notes in the latest A List Apart, one pixel of font size can completely change how a typeface looks. I?ve found many otherwise great fonts that just don?t render as well in the 10 to 12px range; often a small bump to the 14 to 16px range really can make a positive impact, allowing the hinting of a more delicate font to really stand out. Larger fonts also allow for more clearly defined font weights and styles, from semi-bolds and blacks to small caps and italics.