Try Bello and Proxima Nova

Try Museo and Sans

Try Graublau Sans with Lucida

Chop shop

Here’s a screenshot of how this page looks in Apple’s Safari browser. More about browser support and CSS techniques.

Built with bits from:

• Squidfingers – pattern 84
• Stock.xchng – Chromed out

• Read the related blog post
• Critique this at Typophile
• Follow Nice Web Type

Road warriors

Beautiful, painterly headlines

Script & sans

Script typefaces like Underware’s Bello Pro look gorgeous at display sizes but are not built for extended reading. My inclination is to use an understated sanserif for body text; here, Mark Simonson’s Proxima Nova.

Script for display type, sans for body text. That's a fairly easy call. Mid-size headings, though, are where things get tricky. You have to try stuff and see what looks good.

For example, at first I didn’t think I could use Bello in the h2s that head these three columns, because the size I have chosen makes it very hard to see Bello’s shapes.

But trial, error, and the will to rethink my assumptions about display type sizing led me to the best available ampersand.

& & & & &

Different strokes

When you’re combining two typefaces, (especially very different ones) stroke thickness can be your ally. Pay attention to the contrast of each face, and adjust your CSS font-size rules so that thicks and thins throughout the text resonate.

For example, up above, the thin parts of “Beautiful, painterly headlines” are about as thick as the unmodulated strokes of “Chop shop” and “Road warriors.”

Color and weight

When you would rather not adjust size, try playing with the font-weight and/or color CSS properties to match stroke widths or affect typographic color. For more on this: Nice Web Type likes Museo and Sans.

Skip the fame

As I mentioned, my inclination is to pair fancy display type with body text that is decidedly less fancy.

Proxima Nova is the Clark Kent of sanserif typefaces. Most folks will never know how great it is, sitting right under their noses. Its counters and contrast are great for web resolution, its geometric notes are a refreshing change from the realist sanserifs we web designers are used to, and its hints of humanism jibe well enough with type derived from hand-lettering.

Underware has some beautiful typefaces for body text, including Sauna, which they describe as a typographic mate of Bello. Sauna isn't available (yet?) in Typekit, but meanwhile I’ve found Mark Simonson’s Proxima Nova to be a pleasant alternative.

Browsers, CSS

This type specimen/review makes use of advanced CSS techniques that may not look right in your web browser.

They are supported by at least one popular browser though, and that browser's mojo is advancing our craft faster than you can say, “IE went to Sturgis and all it got was this lousy t-shirt.”

Follow these links to learn more about Safari’s support for CSS gradients, masking, rounded corners, transitions, and multiple background images.

I used several of these techniques, combined, to produce the pure CSS text gradient (no PNGs) you see in the word “Filthy.”

On using Typekit

My first impressions of Typekit are, I admit, short on details. Other folks have the details, with screenshots, so go check those out.

What I can tell you is that I made this page using Typekit, and I have made other Nice Web Type likes features without Typekit. My worry was that, as an additional step in my process, referring to a web service like Typekit – in the middle of writing CSS – would be disruptive and complicated. It’s not. It’s easy.

Not only is it easy, it’s a pleasure to flip among apps and find myself at the Typekit interface. If, like me, you carefully select your tools, and your standards for utility and aesthetic harmony sometimes eliminate products and services that your friends seem to love, you will not be disappointed by Typekit.