OpenType und CSS: Nützliche Snippets rund um font-feature-settings

14. März 2014 | Von | Kategorie: Non Print, Typografie

OpenType und CSS: Nützliche Snippets rund um font-feature-settings

 

Mit dem relativ neuen CSS-Attribut font-feature-setting ist es möglich, die Möglichkeiten von OpenType-Schriftarten auszureizen. Ihr wollt Ligaturen, Brüche oder sogenannte „Swashes“ mit euren Schriften darstellen? Dann seid ihr hier genau richtig.

OpenType und CSS: Nützliche Snippets rund um font-feature-settings

Holt mehr aus euren OpenType-Schriften raus. (Quelle: fox17 – Fotolia.com)

Ligaturen mit OpenType-Schriftarten

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“;

Brüche mit OpenType-Schriftarten darstellen

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;

Echte Kapitälchen

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;

Swash: Abstrich und Schweif

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;

Hoch- und tiefgestellter Text

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;

Alternative Schriftschnitte

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 .

 

via OpenType und CSS: Nützliche Snippets rund um font-feature-settings » t3n.

Keine Kommentare möglich.