Rebuild 07: Headlines using Typekit fonts

Among the oldest complaints about web design have been the practical constraints on typography, with alternative solutions not so easy for all too many. The situation has changed dramatically in recent years with options like the Google Font API and better understanding of how to implement the @font-face CSS at-rule. Using those techniques offer varying success, since not all web-font sans-serif alternatives and serif alternatives are created equal.

In any event, as part of the current rebuild I have opted to go with Typekit and have implemented the Museo Sans font for all headlines and in a few other places. Offering a touch of typographic distinction, Museo Sans is widely used as a high quality alternative to the ubiquitous Arial font. Typekit makes implementation a piece of cake. And this particular font is available as part of Typekit’s free account. Hope it works for you.

The one tip I would offer is to consider applying CSS letter-spacing and word-spacing property values, even if only “0″, when using this particular font. I discovered that at a smaller size the Museo Sans character spacing was somewhat uneven. Once I applied a zero value for letter-spacing and word-spacing, the display problems resolved themselves.

Want to learn more about web-based typography? Take a look at the online classic, The Elements of Typographic Style Applied to the Web.