Nice Web Type

Hey, the site looks broken

If you’re reading this, it means Nice Web Type’s CSS (the visual instructions that make this outline look like a website) is not being applied. This can happen for several reasons. If you’re using Internet Explorer 6 or earlier, or some other old browser like AOL, CSS is off by default. If you’re using a modern browser and you’re still seeing this, please email Tim.

Notes

Sticking with a typeface

I have always found value in moderation and patience, and I was taught to choose type with these virtues in mind. While the lab at my college had an enormous type library, my professors urged me to spend time with just one well-made type family.

Just one!?

Surely, I thought, the same typeface (even in its various styles and weights) could not solve every problem. Despite my doubts, I accepted the challenge and carefully chose a typeface.

I correctly assumed that this restriction would help me appreciate the freedom to choose among many typefaces; If I valued a single one, then I could learn to value many. What surprised me was how much value I found in certain type designs and designers.

By sticking with a typeface and attempting to solve problems even in the face of certain doom, one comes to know many things. For instance, how size can entirely change the personality of a typeface, or how resonance among design details can guide graphic communication and affect a work’s art-directed message.

Surprise, surprise. When we’re forced to work within limitations, we learn and grow. However, there are certain typefaces that, if we’re lucky enough to be stuck with them (or be able to stick with them), make such challenges easier and more rewarding. The “workhorse” faces. The go-tos. The standbys. These special typefaces succeed where others fail.

On the web, until the recent advent of CSS @font-face, for practical and technical reasons, we have had a limited stable of typefaces to choose among. Perhaps this history has taught us the very same lessons that my college professors taught me? Perhaps we have come to know many things?

Now find your workhorse

Web typographers, my advice is this: In the face of the innumerable typeface choices that web fonts will usher in, choose typefaces in moderation, and be very patient after you’ve made your choice. Trust your instincts. And, trust good advice.

Jason Santa Maria, On Web Typography:

“Using a typeface because it looks interesting might yield acceptable results, but really practicing the art of typography involves understanding typefaces and what they mean. Picking a good-enough face isn’t that hard, but choosing an appropriate one that fits comfortably within societal and technical concerns can be tough.”

Michael Bierut, Thirteen Ways of Looking at a Typeface:

“Some typefaces are just perfect for certain things. I’ve specified exotic fonts for identity programs that work beautifully in headlines and even in text, but sooner or later you have to set that really tiny type at the bottom of the business reply card. This is what Franklin Gothic is for.”

Do you already have a go-to typeface for use with CSS @font-face? Please share. I may even use it in something new I’m cooking up.

5 comments

Wouter Bos 16 Dec 2009
Although @font-face is really freeing designers I certainly believe that we will be going to appreciate a font like Arial. Not only because we got accustomed to it since we were stuck with it for so many years, but also because it’s such a versatile font compared to some other fonts.
Tim Brown 16 Dec 2009
Good point, Wouter. It’s been easy to take for granted the core web fonts we’ve been using for years. They’re really well made when you compare them with some of today’s @font-face alternatives. And as you say, we’ve grown accustomed to them – and so have folks browsing websites.

In fact, initially, when I find even a well-hinted typeface (like the new FontFont Typekit faces) being used on a site, it’s kind of a shock because it doesn’t feel normal. Don’t get me wrong, they look incredible … but we’re going to have that cultural double-take for a while before things settle down.
Veda Williams 18 Dec 2009
As far as I can tell, you’re selecting well-hinted fonts off of TypeKit. Do we have a sense of which fonts play well, other than the ones you’ve suggested here? (I’ve been following this discussion, and it appears to have ground to a halt).

I’m looking into fonts that resemble VistaSans that play well on Mac and PC using TypeKit, for use on sites like this one: http://www.yesmagazine.org/. We had to use sIFR in this case, due to licensing issues, and I’d really love to find a “workhorse” font similar to it that will play happily.

Do you have any thoughts here? Any good resources you could point me to? As far as I have been able to determine, FontFont foundry on TypeKit is well-hinted, but beyond that I’m in the dark.

Thanks in advance,

- Veda
Tim Brown 28 Dec 2009
Veda, presently there are some rendering issues that even well-made typefaces cannot overcome. If you use Twitter, you should follow Type Rendering for news about advances in this area.

As for selecting great fonts for use with @font-face, I’ve been working on a small, valuable resource — coming in early 2010.
Will 7 Feb 2010
While I currently don’t use @font-face on my site (although I used to until today), Museo Sans (exljbris) has always worked for me.

Hey, the site looks broken

Notes

Sticking with a typeface

Now find your workhorse

5 comments

Add your comment