Subsetted Fallback Fonts

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 type­face?

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 larg­er):

subsetting

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.

stack-experiments

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 fall­back.

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 opin­ion?

3 Comments

  1. Posted November 13, 2009 at 10:23 am | Permalink

    You could cre­ate a font with FontStruct to han­dle the apos­tro­phe. It’d prob­a­bly take you half an hour to cre­ate an account and learn the pro­gram enough to make+export an apos­tro­phe that looks exact­ly how you want.

  2. Posted November 13, 2009 at 10:25 am | Permalink

    Oops. For­got to link you if you did­n’t already know about FontStruct. The URL is: http://fontstruct.fontshop.com/

  3. Matt
    Posted November 14, 2009 at 11:35 am | Permalink

    @Robert Indeed, I’ve con­sid­ered adding the apos­tro­phe myself. One glyph would be fine, but the idea here was exper­i­ment­ing with what to when many glyphs were miss­ing and you did­n’t want to try cre­at­ing them all.

    I had not heard of FontStruct before, thanks.