Elegant OpenType alternatives for older browsers

By expanding on the basic function of a font stack, we can use subsetted fonts to create some interesting typographic effects that, while not as spectacular as a fully-featured OpenType layout, will provide solid backwards compatibility for older browsers and still look great for new browsers.

OpenType fonts are incredibly powerful typographic tools. With the potential to include thousands of glyphs within a single font, they’re particularly suited for reproducing hand lettering techniques such as calligraphy or signwriting — techniques that often require several versions of each glyph so that connections between letters look natural.

The advantages of OpenType fonts are well known to print designers and illustrators, but thanks to a lack of browser support they remain elusive for web typographers. Microsoft recently announced impressive support for OpenType CSS properties in Internet Explorer 10, and Firefox has supported limited OpenType features for several versions. This situation will undoubtably, if slowly, improve in the next few months and years. Until then, we can suggest a workaround or two that will allow web typographers to access some of the goodies offered in those supersized OpenType fonts — at the same time demonstrating a couple of interesting typographic techniques available only to web designers.

OpenType fonts may be a common resource for our print colleagues, but that doesn’t mean web designers are the only ones excluded from enjoying the benefits. As OpenType functionality is still rather limited to professional grade graphics apps, many word processors have limited to no OpenType support and even Adobe Photoshop is typographically challenged in that area.

To get around this, font designers will often offer their big OpenType fonts for sale as smaller products, with the alternates, swash capitals, small capitals and ornaments split off into separate fonts.

Fallback, let me introduce you to subset

For this demonstration, we’re going to use the Belluccia font by Correspondence Ink. The Pro OpenType version of Belluccia is a typical feature-rich calligraphic font with an inky, quill-like texture. Alongside the full Pro version, Correspondence Ink offer a basic version with the extra glyphs contained in Contextual, Swashes and Stylistic fonts. Flourishes, Borders and Ornaments fonts complete the family.



Spring Cleaning

Spring Cleaning


Left: The basic version of Belluccia has connecting lowercase characters with elegant yet restrained ornamental capitals. Right: The Swash font includes characters with additional loops and swirls on both the capital and lowercase glyphs, but this is a little too fancy for clean headlines.

This technique involves combining these two fonts, then replacing the capitals from the basic font with those from the Swash. We do this in the web font kit builder, by creating a subset of the Swashes font that includes only the capital letters.

Kit builder options


In the text entry box below the Belluccia Swashes sample, type +(ABCDEFGHIJKLMNOPQRSTUVWXYZ) and remember to uncheck the Character Sets boxes. This creates a version of the font that contains only the uppercase letters.

Download your kit, open the CSS file included and change the @font-face declaration to the following:

@font-face {font-family: 'BellucciaSwashes_sub';src: url(pointers to webfont files);

This uniquely identifies the uppercase-only Swashes font. 

The next step is line up our subsetted fonts in the font stack, like so:

.mixed { font-family: 'Belluccia_sub', 'Belluccia', Verdana, Geneva, sans-serif; }

In first position is our subsetted Swashes font. Because this is missing everything from the font apart from the capitals, the browser looks for the next font in the stack to get the rest of the character set, which is the regular Belluccia with a complete character set. The browser ends up using the more elaborate capitals from the Swash font with the less fancy lower case letters from the Basic version:


Too Early for Spring Cleaning


Belluccia is far from being the only example out there. In our next feature, we’ll pick a few more font families and show how this technique has application beyond calligraphic effects.