Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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

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

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.

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. Mehr zum Thema Typografie und OpenType erfahrt ihr hier.

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Oink

Es sit schade, das hier nicht gleich gezeigt wird, wie es die Darstellung beeinflusst. Also ein Bsp. wäre nicht verkehrt gewesen ;)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst