Typografie im Web: OpenType-Funktionen mit CSS nutzen

Die meisten Webfonts und auch Systemschriftarten sind mittlerweile im OpenType-Format vorhanden. Je nach Ausstattung der Schrift sind Buchstaben für Sprachen außerhalb des westeuropäischen Raums ebenso in der Schrift enthalten wie alternative Buchstaben- und Ziffernformen. Dazu gehören Ligaturen, Kapitälchen und Mediävalziffern.

OpenType-Features und CSS

Seit Firefox 4 unterstützt der Browser OpenType-Features und Ligaturen werden standardmäßig verwendet, wenn die Schrift sie enthält. Mit „-moz-font-feature-settings“ hat Mozilla eine eigene CSS-Eigenschaft für den Firefox, über die sich OpenType-Features konfigurieren lassen.

Das Bild zeigt links die Standarddarstellung von Ligaturen im Firefox, sofern sie von der Schrift unterstützt werden. Über CSS lassen sich die Ligaturen jedoch einfach ausschalten:

p {
  -moz-font-feature-settings: "liga=0";
}

Der Einsatz von Kapitälchen lässt sich ebenso über die CSS-Eigenschaft steuern. Zwar bietet CSS bereits über „font-variant“ die Möglichkeit, einen Text in Kapitälchen zu setzen. Allerdings werden hierbei keine echten Kapitälchen genutzt. Echte Kapitälchen sind als eigenständige Zeichen in vielen Schriften enthalten. Über „font-variant“ werden lediglich in der Schriftgröße reduzierte Großbuchstaben verwendet.

Falsche Kapitälchen haben den Nachteil, dass sich Großbuchstaben und Kapitälchen in ihrer Strichstärke unterscheiden. Bei echten Kapitälchen gibt es eine einheitliche Strichstärke:

p {
  -moz-font-feature-setting: "smcp=1"; // echte Kapitälchen
}

p {
  font-variant: small-caps; // falsche Kapitälchen
}

Auch für Ziffern lassen sich alternative Formen einstellen. Viele Schriften unterstützen Mediävalziffern, die oft eingesetzt werden, wenn Ziffern innerhalb von Texten verwendet werden und im Textbild nicht zu sehr hervorstechen sollen.

Die Einstellung für Mediävalziffern ist identisch mit der Einstellung für echte Kapitälchen. Wer also echte Kapitälchen verwendet, bekommt die Mediävalziffern automatisch mit dazu.

Die Zukunft von OpenType-Features im Web

Die vorgestellte CSS-Eigenschaft wird ausschließlich vom Firefox unterstützt. Allerdings gibt es vom W3C Eigenschaften, mit denen die vorgestellten Möglichkeiten ebenfalls machbar sind. Allerdings gibt es dazu derzeit noch keine Browserunterstützung:

p {
  font-variant-ligatures: common-ligatures; // Ligaturen
  font-variant-caps: small-caps; // Kapitälchen
  font-variant-numeric: oldstyle-nums; // Mediävalziffern
 }

Wenngleich die „font-variant-*“-Eigenschaften noch nicht unterstützt werden, versprechen sie viele Möglichkeiten. Anders als „-moz-font-feature-settings“ lassen sich OpenType-Features sehr viel genauer konfigurieren.

So können Kapitälchen und Mediävalzifferm getrennt voneinander konfiguriert werden. Auch Zahlenbrüche, historische Zeichen und stilitische Buchstabenalternativen lassen sich einstellen. Dies ist derzeit allerdings noch Zukunftsmusik.

Wie wichtig sind euch OpenType-Features im Web? Nutzt ihr sie oder würdet ihr sie in Zukunft nutzen? Oder reicht euch das, was es bisher an typografischen Möglichkeiten gab?

Weiterführende Links zum Thema Typografie im Web:

• Baseline: Typografie-orientiertes HTML5-Framework für Designer
• Schicke Typografie mit TYPO3

 Weitere interessante News zum Thema CSS:

• 02.11.11 CSS3 und Appearance: Wenn einfacher Text zu einem Link oder Button wird - t3n News
• 30.10.11 Animatable: CSS-Transitions im Überblick - t3n News
• 22.10.11 CSS-Counter: Nummerierungen für beliebige HTML-Elemente - t3n News
• 21.10.11 Geniale CSS-Animation: Der gehende Mann - t3n News
• 13.10.11 CSS Shaders – 3D-Rendering von HTML-Elementen - t3n News
• 12.10.11 jQuery-Plugins: 10 Helfer für schönere Schriften - t3n News
• 05.10.11 CSS3: So werden Texte einfach mehrspaltig - t3n News
• 22.09.11 Wie viel HTML5/CSS3 kann dein Browser? Jetzt mit einem Klick testen! - t3n News