Soma Design

I recent­ly launched thatwasnotok.com, a humourous take on how to han­dle social un-graces. One of the fun parts of design­ing and build­ing the site was the free­dom to work with a font like Chunk with­out resort­ing to embed­ding it in images or using sIFR or Cufon. I showed it to Tim Brown from Nice Web Type, prompt­ing a dia­logue about some deci­sions I made in work­ing with Chunk, which Tim lat­er pub­lished. (Inci­den­tal­ly, if you’re curi­ous about how to embed fonts in a web page, Tim’s How to use CSS @font-face is your best start­ing point.)

But what I real­ly want to talk about was one of the ques­tions Tim asked me but chose not to pub­lish on his site, which was:

So about the miss­ing char­ac­ters in Chunk. What if you did­n’t have an alter­na­tive (like if you need­ed an amper­sand)? Would you sub­sti­tute one from anoth­er type­face? Which typeface?

After men­tion­ing that I did­n’t much care about the miss­ing glyphs for such a small site as mine, I went on to say:

For a font with glyphs miss­ing, you fall back in your CSS stack to the next font that has the glyph. This is the premise that Type­kit works on when it splits fonts into two pieces and then puts some­thing like font-family: skolar-1, skolar-2, serif; in its CSS rules. If I had found a com­pli­men­ta­ry type­face (with appro­pri­ate licens­ing) and want­ed it just for the glyphs that Chunk was miss­ing, I could make a small, sub­set­ted ver­sion of it (remove all the glyphs that Chunk already has), embed it as well with @font-face and put it after Chunk in the font stack.

After my chat with Tim, I became a lit­tle fix­at­ed on try­ing to find just such a suit­able sub­set­ted fall­back. I went over to Font Squir­rel and came up with two pos­si­ble free replace­ments: Col­le­giate­FLF Black and Ben­der Black. After down­load­ing, I re-uploaded them through Font Squir­rel’s mar­velous @font-face Gen­er­a­tor in order to sub­set the fonts down to only glyphs that aren’t already in Chunk (more or less). Sub­set­ting only the glyphs you need can cre­ate dra­mat­i­cal­ly small­er font files, speed­ing up your site. I chose to only include Punc­tu­a­tion and Alt Punc­tu­a­tion, as shown in the image below (click for larger):

So, what did it look like? Not that great unfor­tu­nate­ly. Chunk is just far too unique to play well with (freely avail­able) oth­ers. I tried three dif­fer­ent stacks, falling back to either 1) Impact, 2) Col­le­giate Black and 3) Ben­der Black. Have a look: MIA Glyphs, or just see the image below.

I think that Col­le­giate Black comes the clos­est, but its dol­lar sign and amper­sand are a ter­ri­ble match for Chunk. Ben­der is entire­ly ill-suit­ed, and Impact isn’t much bet­ter. None of the apos­tro­phes look sim­i­lar to Chunk’s com­ma, which is what I would hope to see in a well-suit­ed fallback.

The clos­est I came to being hap­py was with Impact as a fall­back for apos­tro­phes (the only glyph I need­ed that Chunk lacked). I cre­at­ed a ver­sion of thatwasnotok.com that used a pseu­do-bold Impact for apos­tro­phes where they were called for: Impact apos­tro­phes. I also had to sur­round the apos­tro­phes in a span ele­ment to nudge them into place.

I hope that this some­what fruit­less exer­cise was of inter­est to peo­ple try­ing to make  fonts work on the web. Many of the free fonts that allow @font-face embed­ding suf­fer from absent glyphs, so using a sub­set­ted fall­back may be a life­saver for you. As for me, I’m still not sure if I’ll push the Impact apos­tro­phe’d ver­sion live or keep the ver­sion with primes. Any­one have an opinion?