Chat with Matt Wiebe
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.
- Matt: Check out http://thatwasnotok.com for a fun use of font embedding with Chunk.
- Matt: Thanks! Chunk unfortunately lacks a lot of glyphs, including apostrophes, smart quotes, and an ampersand.
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.
- Matt: It was the only way to get the effect I wanted. Wish I could do without them.
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.