Support of OpenType fonts in modern browsers means that we are finally able to control typographic details that make the difference between presenting content and communicating with type. In recent articles I’ve shown you how to use font ligatures and fractions with CSS3 to create more legible, attractive text on web pages. Taking this further, we can create discretionary ligatures and true small caps with OpenType.

Probably the greatest source of wealth in the OpenType format lies in the rich variety of styles that can be embedded within each font. Traditional TTF fonts are restricted to approximately 200 characters, meaning that they have barely enough room to cover capital letters, lowercase, numerals, ligatures and punctuation in English. This means that many variants – italicization, bolding, small caps, etc – have often been faked or simulated in browsers. With OpenType, typographers have the ability to specify several unique forms for each individual glyph to cover many possible uses and languages, creating letters that look good in every circumstance.

Discretionary Ligatures

Perhaps the most visually striking features of OpenType are the discretionary ligatures and alternate styles that can be contained in a font. Put simply, ligature rules replace pairs of letters that appear ill-matched next to each other with different, handcrafted glyphs designed to present the letter pairing with more visual appeal.

Discretionary ligatures go a step further, often setting letterforms on top of or within each other to dramatic effect. To turn this option on, we use the following CSS:

h1 {
	-moz-font-feature-settings:"dlig";
	-ms-font-feature-settings:"dlig";
	-webkit-font-feature-settings: "dlig";
	font-feature-settings:"dlig";
}

Applied with the appropriate font (Megalopolis, by Jack Usine), the result can be stunning, as seen in the header for this article. (I’ve also added text-transform: uppercase and a few other style changes). You’ll find that you can select the letters with your cursor: that is real text, not an image. It’s the kind of presentation that would take hours to do by hand, and now it’s built directly into the font.

Users with browsers that do not support discretionary ligatures and will simply see “Fall In Love” in uppercase; search engines will see the same.

Due to their dramatic flourishes, discretionary ligatures are best left for major heading elements on a web page, but the next OpenType variant we’ll look at has quite a bit more versatility.

True Small Caps

font-variant: small-caps has always been somewhat misleading: the traditional CSS method of creating small caps simply took capital letters in the text and shrank them. While doing so, it also lightened the letterforms, creating a result that looked “off”, even in a lovely font like Calluna Sans by Jos Buivenga:

Most OpenType fonts contain individually designed small caps characters. We can use CSS to summon them:

h2 {
	-moz-font-feature-settings:"smcp";
	-ms-font-feature-settings:"smcp";
	-webkit-font-feature-settings: "smcp";
	font-feature-settings:"smcp";
}

Applied, the result looks like this:

As you can see, using CSS with an OpenType font to create small caps results in a significant difference in quality.

Small caps are most often used in headings but may also make an appearance in paragraphs as a first-line-run-in effect.

Some Cautionary Notes

You might assume that with such obvious advantages, OpenType fonts should be everywhere on the web. They’re not, for several reasons:

• Support for the features I’ve discussed here is new outside of Firefox: Chrome 20 and IE10 offer support, but Safari, iOS and Opera have none at this writing. (Webfonts.info has a handy resource for tracking font format support in the major browsers). That is okay, in the sense that CSS’s penchant for graceful degradation will mean that visitors to your site who use older browsers will still be able to read the text in the correct font, just without the added features.
• Typographers have to invest significantly more time in developing a fully-featured OpenType font than the standard character set of a traditional computer font, making them rarer.
• OpenType fonts that include these extra features tend to be significantly larger in file size, which can make delivery on web pages problematic. (By way of comparison, Calluna Sans Regular in OpenType format weighs in at 117KB, compared to 18KB as a .woff)
• Because of this, font embedding services such as Typekit and FontDeck have been somewhat reluctant to provide OpenType fonts, although that is beginning to change.
• This combination of factors may mean that an OpenType font you receive from an embedding service may be stripped of these features to reduce file size; for right now, it’s probably best if you host your own (legally obtained) OpenType fonts for embedding purposes.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.