Subsetted Fallback Fonts

I recently 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 later pub­lished. (Inci­den­tally, 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 really 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 didn’t have an alter­na­tive (like if you needed an amper­sand)? Would you sub­sti­tute one from another type­face? Which typeface?

After men­tion­ing that I didn’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­tary type­face (with appro­pri­ate licens­ing) and wanted 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­ated 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 Squirrel’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­cally smaller 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):

subsetting

So, what did it look like? Not that great unfor­tu­nately. 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 entirely ill-suited, and Impact isn’t much bet­ter. None of the apos­tro­phes look sim­i­lar to Chunk’s comma, which is what I would hope to see in a well-suited fallback.

The clos­est I came to being happy was with Impact as a fall­back for apos­tro­phes (the only glyph I needed that Chunk lacked). I cre­ated a ver­sion of thatwasnotok.com that used a pseudo-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 apostrophe’d ver­sion live or keep the ver­sion with primes. Any­one have an opinion?

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 exactly how you want.

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

    Oops. For­got to link you if you didn’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 didn’t want to try cre­at­ing them all.

    I had not heard of FontStruct before, thanks.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*