OpenType-Features im Webdesign ansprechen


Im Printdesign geht ohne OpenType-Features schon lange gar nichts mehr. Viele Auszeichnungsvarianten und Sonderzeichen werden in modernen Schriften nur noch über diese OpenType-Funktionen zur Verfügung gestellt und um Kapitälchen, verschiedene Ziffernsets, Ligaturen oder Swash-Varianten zu erreichen, aktivieren wir die entsprechenden Funktionen im Layout-Programm.
Im Webdesign ist die Sache leider (noch) nicht ganz so einfach. Mit dem sich in Entwicklung befindenden, aber noch nicht verabschiedeten CSS3-Standard wird es möglich sein, auch direkt OpenType-Features im CSS anzusprechen. Auch jetzt schon unterstützen viele Browser diese Funktionen auf einer experimentellen Basis. Zwei Möglichkeiten der Adressierung sind dafür vorgesehen:
In den High-Level-Eigenschaften (css: font-variant) werden bestimmte OpenType-Features in eine für den Menschen gut verständliche Syntax übersetzt. Um zum Beispiel verschiedene Ziffernsets anzusprechen weisen Sie <font-variant-numeric> entweder <oldstyle-nums> oder <proportional-nums> zu.

font-variant-numeric: oldstyle-nums;

Leider wird diese Syntax auch in aktuellen Browsern nur wenig unterstützt. Mehr Erfolg haben Sie mit der Verwendung der Lowlevel-Eigenschaften (CSS: font-feature-settings), hierbei werden bestimmte OpenType-Features mit ihrem internen Namen direkt aktiviert. Unser Beispiel mit den Mediävalziffern würde dann folgendermaßen aussehen:

font-feature-settings:"onum" 1;

Einige Browser, wie zum Beispiel Firefox, erwarten für die experimentellen Funktionen noch ein vendorspezifisches Prefix. Sie können, oder müssen sogar, im CSS die spezifischen Notationen für den Browser verwenden – die aktuell nicht passenden werden jeweils ignoriert.

-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 unterstützt schon relativ viele Features (mit dem vendorspezifischen Prefix), ebenso der Internetexplorer und Chrome. Opera hat bisher keine Unterstützung für OpenType-Features, bei Safari ist die Situation sehr unübersichtlich. Funktionen, die in Version 6 (OS X 10.8) noch unterstützt wurden, fehlen in Safari 7 (OS X 10.9) wieder.
Mit ein bisschen Mühe im CSS ist also auch schon jetzt im Web viel typografische Feinarbeit möglich. Bedenken Sie aber, dass Sie sich aktuell auf eine Unterstützung der Features nicht verlassen können. Achten Sie also darauf, dass Ihre Gestaltung auch ohne die OpenType-Features verständlich bleibt.
Auch wenn die Situation aktuell noch etwas verwirrend ist, werden auf längere Sicht alle Browser diese Funktionen unterstützen.

System Info