Accessing OpenType features for web design


OpenType features have long been considered indispensable in print design. In the case of many contemporary typefaces, display variants and special characters are often only available as OpenType features and in order to use small caps, non-standard numeral sets, ligatures and swash letters, it is necessary to access the corresponding options through the layout tool.
Sadly, it is (still) not quite that simple when it comes to web design. Currently in development (although not yet released) is the CSS 3 module with which it will be possible to directly access OpenType features through CSS. Many browsers already support this system on an experimental basis. There are two methods that can be employed:
In the higher level properties (css: ’font-variant’), certain of the OpenType features can be found translated into a syntax that is readily understandable for the layman. For example, if you want to turn on different numeral sets, add the property <oldstyle-nums> or <proportional-nums> as appropriate to <font-variant-numeric>.

font-variant-numeric: oldstyle-nums;

Unfortunately, not many current browsers support this syntax. If this is the case with your browser, then you might have more success using lower level properties (CSS: ’font-feature-settings’); here, you can directly activate certain OpenType features using their internal (font) name. Here is an example of how to access old-style figures:

font-feature-settings:"onum" 1;

Some browsers, such as Firefox, require you to enter a vendor-specific prefix before they will allow you access to experimental options. In CSS you can - or rather must - use the notation currently specific to your browser - other forms of notation will simply be ignored.

-moz-font-feature-settings:"onum" 1;
-ms-font-feature-settings:"onum" 1;
-o-font-feature-settings:"onum" 1;
-webkit-font-feature-settings:"onum" 1;

Firefox already provides access to a relatively extensive range of features (if the appropriate vendor-specific prefix is entered), as do Internet Explorer and Chrome. OpenType features are not at present supported by Opera while the situation in the case of Safari is more complicated. Options that were supported by version 6 (OS X 10.8) are no longer available in Safari 7 (OS X 10.9).
So, with a little time and trouble, it is possible to carry out detailed typographic work through CSS. It is advisable to bear in mind, however, that you may find that the features you wish to use are not supported. It is thus also a good idea to design your project in such a way that it will remain intelligible even without the use of OpenType features.
Although the situation is somewhat unsatisfactory at present, there is no doubt that at some point in the future all browsers will support these functions.