Adobe has put a lot of effort into developing and supporting the OpenType font format, so we’re pleased that in the last ten years or so, type users have embraced it and enjoyed the layout features it offers. Getting accustomed to the typographic richness that OpenType provides means, though, that one misses it when it’s not available. That’s the problem we have right now with fonts on the web.

OpenType text layout requires an application or client to support a particular feature — substitutions like stylistic alternates and small caps, for example — before it can be seen or used. Most browsers don’t do this today. Your browser might receive a feature-laden OpenType font and use it to render the text you’re looking at, but it will ignore most or all of its OpenType features. (There is currently limited support for default ligatures, alternates and kerning in the current versions of Firefox and Safari, but it is far from the comprehensive support that web designers would like.)

Thankfully that’s about to change due to the growing popularity of web fonts and ongoing work on the next major revision for fonts in CSS, the “CSS Fonts Module Level 3,” usually just called “CSS3 Fonts.” (See the latest Editor’s Draft for all the details. Currently, OpenType layout is covered in the section Font Feature Properties.)

CSS3 Fonts proposes many additions and enhancements which promise to make useful and popular OpenType features available to web developers and readers, enabling what I and others call “rich typography.” Although CSS describes these features abstractly, they are closely aligned with many of the OpenType features with which you might be familiar. (They also might align with features in other font formats, such as AAT.) How they are specified in CSS will depend on the feature itself, its expected behavior, and its similarity to existing CSS properties.

Without getting into technical details (you can refer to the current Editor’s Draft for that, and we’ll probably get into it here another time), it will add properties that will enable or disable these font features. Some features, like standard ligatures and contextual alternates, should simply be enabled without further input from author or reader. They are features that we call “on by default” because they are part of what the font designer has decided should be the natural state of the typeface design. (Most such features can be optionally disabled.)

Take, for example, Adobe’s Caflisch Script Pro. Robert Slimbach designed this to resemble natural handwriting, with numerous variations and connecting letters. It utilizes ligatures and contextual alternates to achieve this effect, and requires OpenType feature support to reveal them. In today’s browsers, though (with the exceptions mentioned above), these features are not used, and some of the typeface design’s personality is lost:

Caflisch Script Pro, without OpenType features (left), and with its default feature substitutions enabled (right).

Other features are discretionary — meaning that a web author or designer applies them as they see fit. Small caps and oldstyle figures are two such features:

Garamond Premier Pro default text (left), and with small caps and oldstyle figures applied (right).

The current draft of CSS3 Fonts also includes support for many different kinds of alternates and ligatures, superiors and inferiors, fractions, as well as kerning and East Asian substitution and positioning features.

I know some web typographers are clamoring to use these features on the web. For those who don’t already know, you can experiment with them today in Beta builds of Firefox 4. Just keep in mind that you’re dealing with pre-release software and non-standard code (CSS3 Fonts is still a work in progress), and that these features are not yet available to the general browsing public. For more information on how to enable these experimental features, see Mozilla’s developer notes. For now, you’ll need to be familiar with CSS and OpenType feature tags to use them. (The two samples above were generated with simple HTML and CSS and rendered in Firefox 4.0b6.)

As you can see, rich typography on the web is becoming decidedly real. Although the CSS3 Fonts module is not yet final, the work is nearing its conclusion, and the appearance of extensive feature support in Firefox 4 Beta suggests that such support there and in other web browsers and clients is inevitable. We’ll be doing what we can here at Adobe to support it (Adobe is an active participant in the W3C’s CSS and Web Fonts working groups), and we’ve already begun by including the same features in our web fonts as those found in our desktop fonts. We’ll be working to ensure everything works as expected as new support emerges and as the technology matures, and looking forward to a Web with a more consistently rich typographic experience.

[This is the fourth installment of “Web Font Wednesdays,” our continuing series of posts regarding fonts on the web.]