Web Font Anti-Pattern: Aggressive subsetting

Oc­to­ber 13, 2015

Sub­set­ting is a great way to re­duce the file size of your fonts. Don’t go over­board with sub­set­ting though, there may be un­ex­pected con­se­quences. Sub­set, but sub­set with care.

Pro­fes­sion­ally de­signed fonts usu­ally con­tain sup­port for mul­ti­ple lan­guages so they can be used all over the world. How­ever, if you only write your con­tent in a sin­gle lan­guage, you prob­a­bly don’t want to pay for the ex­tra weight these un­used char­ac­ters add to your page load time.

This is where sub­set­ting comes in. It al­lows you to re­move char­ac­ters and Open­Type fea­tures from a font file that you don’t need. There is an al­most one to one re­la­tion­ship be­tween the num­ber of char­ac­ters in a font file and its file size. If you cut the num­ber of char­ac­ters in half, you will also cut the file size of a font in half. This is a great way to op­ti­mise a font and make it load faster.

Eng­lish does not use many char­ac­ters. In this font, over half of the char­ac­ters can be re­moved for text that is ex­clu­sively writ­ten in Eng­lish.

Sub­set­ting can be done us­ing tools like Font Squir­rel’s web font gen­er­a­tor, com­mand line tools, or through the user in­ter­faces of web font ser­vices like Type­kit, Google Fonts, and oth­ers.

Be very care­ful with sub­set­ting be­cause it can go very wrong. Text of­ten con­tains names, place names, quo­ta­tions, and loan words from other lan­guages. If the web font sub­set does not con­tain the char­ac­ters used in the page they’ll fall back to the next font in the stack. This is highly un­de­sir­able, be­cause quite of­ten the web font and fall­back font do not match.

An Eng­lish-only sub­set used for a Ger­man city name. The “ü” (u-um­laut) is ren­dered in a fall­back font and stands out like a sore thumb. (Yes, even in this cap­tion.)

That’s not to say sub­set­ting is­n’t use­ful. If used care­fully it can be a great way to re­duce the size of your font files. Be­fore you sub­set care­fully analyse your ex­ist­ing con­tent and think ahead to what char­ac­ters and Open­Type fea­tures you might use in the fu­ture.

This ar­ti­cle is part one of an on­go­ing se­ries on web font anti-pat­terns. Read the in­tro­duc­tion, part 1, part 2, part 3, and part 4.