Das Objekt meiner Experimente mit CSS-Font-Features ist die Inria Sans auf die mich Zeichenschatz gebracht hat. Ich habe mich für diesen Font entschieden da er eine Liste von Features unterstützt die mich interessieren. Doch dazu später mehr.

Deklaration

Als erstes die langweiligen Basics: Ein Webfont besteht aus mehreren sogenannten Schnitten die jeweils in einer Datei vorliegt. Ein Schnitt kann z.B. eine fette oder kursive (oder beides gleichzeitig) Variante sein. Weil aber ein Standard nicht genug ist gibt es für diese Dateien verschiedene Formate die in verschiedenen Browsern genutzt werden können.

Mit diesem Wissen können wir jetzt die Font-Face-Declaration in CSS nutzen um die einzelnen Schnitte/Dateien einem Namen und den gewünschten Parametern zuzuordnen. Im folgenden am Beispiel einer normalen Fette in Kursiv und „normal“

@font-face {
	font-family:'Inria Serif';
	src:	url('InriaSerif-Italic.eot');
	src:	url('InriaSerif-Italic.eot?#iefix') format('embedded-opentype'),
		url('InriaSerif-Italic.woff2') format('woff2'),
		url('InriaSerif-Italic.woff') format('woff'),
		url('InriaSerif-Italic.svg') format('svg');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family:'Inria Serif';
	src:	url('InriaSerif-Regular.eot');
	src:	url('InriaSerif-Regular.eot?#iefix') format('embedded-opentype'),
		url('InriaSerif-Regular.woff2') format('woff2'),
		url('InriaSerif-Regular.woff') format('woff'),
		url('InriaSerif-Regular.svg') format('svg');
	font-weight: 400;
	font-style: normal;
}

Mit font-family kann man jetzt ganz normal auf die Schriftart unter dem gewählten Namen zugreifen.

Stylistic Sets

In einem Font kann es alternative Sätze an Glyphen geben. Zum Beispiel gibt es bei der Inria Sans verschnörkeltere Großbuchstaben für besondere Gelegenheiten. Solche Gruppen an Glyphen heißen „Stylistic Sets“. In CSS aktiviert man diese Gruppen mit der Property font-feature-settings. Die Gruppen sind durchnummeriert. So kann man den Wert für font-feature-settings aus dem Präfix „ss“ und der zweistelligen Nummer (mit führenden Nullen) zusammensetzen:

.selektor {
   font-feature-settings: 'ss01';
}

Welche Stylistic Sets es gibt unterscheidet sich in den verschiedenen Schriftfamilien, da muss man wohl immer etwas recherchieren.

Ligaturen

Als Ligaturen bezeichnet man Glyphen die mehrere Buchstaben zusammen darstellen. Das macht man, je nach Sprache bei verschiedenen Buchstaben um ein fließenderes Schriftbild zu erhalten. In der Inria gibt es eine Reihe von Ligaturen für Kombinationen mit dem kleinen f. Um diese zu nutzen muss man gar nichts machen, bei Inria sind die Ligaturen standardmäßig aktiv. Wenn man doch Einfluss nehmen will gibt es dafür die Eigenschaft font-variant-ligatures.

Nummernstyle

Für Nummern kann ein Schriftdesigner, ähnlich wie die Stylistic Sets, verschiedene Glyphen anbieten. Inria unterstützt Ziffern im alten Stil. Dabei werden die verschiedenen Ziffern mit etwas Unter- oder Oberlängen angezeigt.

Eine andere Darstellungsform ist für Zahlen und Beträge gedacht die untereinander angeordnet werden. Dabei haben alle Ziffern die gleiche Breite.

Beide Darstellungen kann man in CSS mit der Eigenschaft font-variant-numeric steuern. Die relevanten Werte sind oldstyle-nums beziehungsweise tabular-nums.

Brüche

Etwas das auch über font-variant-numeric gesteuert wird ist die Darstellung von Brüchen. Anstatt den Zähler und Nenner mit einem Schrägstrich getrennt nebeneinander anzuzeigen kann man, ähnlich wie bei Ligaturen, ein solches Muster in eine schönere Darstellung umwandeln. Der passende Wert für die CSS-Eigenschaft ist diagonal-fractions.

Ein Bild sagt mehr…

Damit das ganze nicht so trocken ist habe ich dazu Beispiele in meinem Laboratorien hinterlegt.

Andere Fonts können andere Features unterstützen, ich wünsche viel Spaß all die Vielfallt der Typographie zu erkunden.