Eine gute Textpräsentation ist wichtig, gerade in Zeiten, in denen Content King ist. In diesem Artikel zeigen wir euch, wie ihr die Vorteile von OpenType-Schriften in Verbindung mit dem CSS-Attribut font-feature-setting nutzen könnt.

Kennt ihr diese hübschen Zeichen für „et“, „st“ oder „fi“? Dabei handelt es sich um Ligaturen, also zwei separate Buchstaben, die zur besseren Lesbarkeit zu einem Zeichen zusammen gefasst werden. Wenn eure Schriftart die Zeichen für Ligaturen unterstützt, könnt ihr sie mit diesem Code-Schnipsel erzeugen:

-moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    -webkit-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";

Korrekte Darstellungen von Brüchen sehen nicht nur hübscher aus, die selben Informationen werden auch platzsparender präsentiert.

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

Kapitälchen machen sich gut als Zwischenüberschriften oder einleitende Sätze. Mit dem folgenden Code-Schnipsel könnt ihr eine Darstellung echter Kapitälchen erzwingen.

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

Die Verzierung von Texten ist ohne aufwändiges JavaScript oder Bilder kaum möglich. Aber versucht doch mal diesen Code-Schnipsel:

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

Wem sub oder sup nicht ausreicht, der kann auch bei Formeln das volle Potential seiner ausgewählten Schriftarten nutzen:

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

Beziehungsweise:

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

Manche Schriftarten bieten verschiedene vordefinierte Sets beziehungsweise Schnitte an, die ihr mit folgendem Schnipsel aktivieren könnt:

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

Bei diesem Beispiel sind wir davon ausgegangen, dass das erste Set „ss01“ benannt worden ist.

Anzumerken ist, dass es sich hierbei noch nicht um einen Standard handelt. Um genau zu sein, befindet sich der Code gerade auf dem Weg zum „Editor’s Draft“. Es wird also noch dauern, bis alle Browser dieses CSS-Attribut interpretieren können. Außerdem muss eure OpenType-Schriftart natürlich die benötigten Zeichen unterstützten. Wer sich intensiver mit OpenType-Schriftarten beschäftigen will, dem kann ich das OpenType-Less-Boilerplate ans Herz legen. Derzeit unterstützen IE, Firefox, Opera und Chrome das Attribut, um OpenType-Schriftarten voll nutzen zu können. Mehr zum Thema Typografie und OpenType erfahrt ihr hier.