Nice Web Type

I recently had the pleasure of talking type with Soma Design’s Matt Wiebe (@mattwiebe). We discussed glyph absence, span kerning, and conditional solutions for CSS typesetting. Some of this exchange happened on Twitter, some via email. Reformatted here as a single conversation. Enjoy.

1. Matt: Check out http://thatwasnotok.com for a fun use of font embedding with Chunk.
2. Tim: Nice! Does Chunk lack proper apostrophe characters, or did primes just look better?

1. Matt: Thanks! Chunk unfortunately lacks a lot of glyphs, including apostrophes, smart quotes, and an ampersand.
2. Tim: What if you didn’t have an alternative (like if you needed an ampersand)? Would you substitute one from another typeface? Which typeface?
3. Matt:

   I knew up front that Chunk was lacking an ampersand, so I already had that in mind while writing copy. I also knew at the outset that the site would be small, so I wouldn’t need a versatile typeface with wide glyph support.

   I briefly tried substituting an apostrophe from Impact (as it’s 1. widely available on user’s computers and 2. similar in weight) but it looked really bad. At this point I decided that I didn’t mind.

4. Tim: And I see you’re span-kerning—thoughts on that?

1. Matt: It was the only way to get the effect I wanted. Wish I could do without them.
2. Tim:

   The problem I can imagine is that if some browsers don’t recognize @font-face, your stack understudies won’t take exactly the same kerning and might look oddly spaced.

   I know there are solutions for conditional CSS (if this font is available, do this, otherwise, do that)—do you remember hearing about this kind of thing? Might allow for different sets of “kerning” instructions.

3. Matt:

   You’re right about there being some issues with how the fallback font looks. As you suggest there’s a couple of potential strategies involving jquery plugins.

   1. Use http://code.google.com/p/jquery-fontavailable/ to check for your font, and then set something like class="chunk-available" on the body element. Use styles accordingly. I’d actually be more inclined to set class="chunk-unavailable" at this point. I’ll probably do this, as the kerning looks pretty crappy with Impact, the fallback font. I can also…

   2. Use http://github.com/philoye/fontunstack for more fine-grained control. It’s really doing the same thing as above, but with a whole font stack. Although the documentation suggests targeting specific elements, I’d just set it on the body if there was only one custom font to worry about but I still had a font stack with a few options. This is definitely the better option if you’re embedding more than one font face in a document.

   Now, I think I have to go and sort out the kerning for non-font-face browsers. It’s gonna bug me.