Spruce It Up

The landscape of web typography is changing quickly these days. We’ve gone from the wild west days of sIFR to Cufón to finally seeing font embedding seeing wide spread adoption by browser developers (and soon web designers) with @font-face. For those who’ve felt limited by the typographic possibilities before, this has been a good year.

As Mark Boulton has so eloquently elucidated, @font-face embedding doesn’t come without its drawbacks. Font files can be quite large and FOUT—that nasty flash of unstyled text—can be a distraction for users.

Data URIs

We can battle FOUT by using Data URIs. A Data URI allows the font to be encoded right into the CSS file. When the font comes with the CSS, the flash of unstyled text is mitigated. No extra HTTP requests are required.

Don’t be a grinch, though. Sending hundreds of kilobytes down the pipe still isn’t great. Sometimes, all we want to do is spruce up our site with a little typographic sugar.

Be Selective

Take a look at the ampersand within the header of his site. It’s the lovely (and free) Goudy Bookletter 1911 available from The League of Movable Type. The Opentype format is a respectable 28KB. Nothing too crazy but hold on here. Mr. Cederholm is only using the ampersand! Ouch. That’s a lot of bandwidth just for one character.

Can we optimize a font like we can an image? Yes. Image optimization essentially works by removing unnecessary image data such as colour data, hidden comments or using compression algorithms. How do you remove unnecessary information from a font? Subsetting.

If you’re the adventurous type, grab a copy of FontForge, which is an open source font editing tool. You can open the font, view and edit any of the glyphs and then re-generate the font. The interface is a little clunky but you’ll be able to select any character you don’t want and then cut the glyphs. Re-generate your font and you’ve now got a smaller file.

There are certainly more optimizations that can also be made such as removing hinting and kerning information. Keep in mind that removing this information may affect how well the type renders.

The Font Generator is extremely handy and allows for a number of optimizations and cross-platform options to be generated instantly. Select the font from your local system—make sure that you are only using properly licensed fonts!

In this particular case, we only want the ampersand. Click on Subset Fonts which will open up a new menu. Unselect any preselected sets and enter the ampersand into the Single Characters text box.

Generate your font and what are you left with? 3KB.

The Font Generator even generates a base64 encoded data URI stylesheet to be imported easily into your project.

Check out the Demo page. (This demo won’t work in Internet Explorer as we’re only demonstrating the Data URI font embedding and not using the EOT file format that IE requires.)

No Unnecessary Additives

If you peeked under the hood of that demo, did you notice something interesting? There’s no <span> around the ampersand. The great thing about this is that we can take advantage of the font stack’s natural ability to switch to a fallback font when a character isn’t available.

Just like that, we’ve managed to spruce up our page with a little typographic sugar without having to put on too much weight.

Brought to you by

Comments

Related articles

Mark Boulton completes our calendar with some typographic techniques to improve the reading experience. Typography, like Christmas and advent calendars, relies on the accumulation of small gains for its best effects.

Nicole Sullivan understands how the accumulated weight of small typographic decisions can mount up into a tangle of CSS declarations. With a new tool at your disposal you can take stock and clear up the mess like it’s Boxing Day.

Drew McLellan dazzles us with the creative typographic possibilities of unicode-range, a little-used property of @font-face declarations. More than just a unloved bauble on the CSS Christmas tree, unicode-range can extend a site’s typography in useful and eye-catching ways.

Jeffrey Zeldman steps back and takes a long hard look at the issue of cross-platform web font rendering quality. It can feel like Christmas morning with the array of font options available – but are we opening Pandora’s box?

Mark Boulton uncovers some ugly truths about font embedding on the web, but being the nice chap that he is, doesn’t leave without teaching us all how we can overcome them through careful typeface selection.

Dan Mall shows us one technique to combat blank-page syndrome by demonstrating how design inspiration can be taken from the typefaces we use. So put down your pencils, reach for your composing stick and let the type do the talking.