font-variant-alternates: OpenType-Features für typografische Feinheiten

1. OpenType-Features im Web: warum es eigene font-variant-Properties gibt

OpenType-Schriftdateien speichern zusätzlich zu den reinen Glyphen-Umrissen sogenannte Features, benannte Regeln in den GSUB- und GPOS-Tabellen der Schriftdatei, die festlegen, wie bestimmte Zeichenfolgen ersetzt oder positioniert werden sollen. Ein Feature mit dem Tag liga ersetzt etwa die Buchstabenfolge fi durch eine verbundene Ligatur-Glyphe, ein Feature wie smcp ersetzt Kleinbuchstaben durch Kapitälchen-Glyphen. Ohne CSS-Ansteuerung bleiben all diese Features ungenutzt, selbst wenn die Schriftdatei sie mitbringt.

CSS bietet dafür zwei Ebenen: Die font-variant-*-Properties (font-variant-ligatures, font-variant-alternates, font-variant-caps, font-variant-numeric, font-variant-east-asian) sprechen typografische Konzepte mit sprechenden Werten an, ohne dass Autoren die zugrunde liegenden vierstelligen OpenType-Tags kennen müssen. font-feature-settings arbeitet dagegen auf niedrigerer Ebene direkt mit diesen Tags. Für die meisten Anwendungsfälle sind die font-variant-Properties die bessere Wahl, weil sie lesbarer sind und der Browser bei fehlender Unterstützung sauber auf den Standardwert zurückfällt.

2. font-variant-ligatures: Standard-, Discretionary- und historische Ligaturen

font-variant-ligatures steuert, welche Ligaturen der Browser aktiviert. Der Wert common-ligatures (Standardwert in den meisten Browsern) aktiviert Standardligaturen wie fi oder fl, die in professionellen Schriftarten fast immer vorhanden sind und die Lesbarkeit meist verbessern, ohne aufzufallen. discretionary-ligatures schaltet zusätzliche, dekorative Ligaturen ein, die eine Schriftart optional mitbringt, etwa verschnörkelte Verbindungen zwischen bestimmten Buchstabenpaaren, die bewusst auffallen sollen.

historical-ligatures aktiviert Ligaturen, die aus historischen Schreibweisen stammen und heute eher in editorialem oder dekorativem Kontext eingesetzt werden, etwa bei Einladungskarten oder stilisierten Überschriften. no-common-ligatures deaktiviert selbst die Standardligaturen explizit, was in technischen Kontexten sinnvoll sein kann, in denen jede Zeichenfolge exakt einzeln erkennbar bleiben soll, etwa in Codeblöcken oder bei der Darstellung von Variablennamen.

3. font-variant-alternates: stilistische Sets, character-variant und swash

font-variant-alternates greift auf komplexere OpenType-Features zu, die eine Schriftart oft in mehreren benannten Varianten anbietet, etwa styleset() für stilistische Sets (ssXX-Tags), character-variant() für einzelne alternative Zeichenformen (cvXX-Tags) und swash() für verschnörkelte Anfangsbuchstaben. Weil diese Features je nach Schriftart unterschiedlich benannt und nummeriert sind, verlangt font-variant-alternates zusätzlich einen @font-feature-values-Block, der einen sprechenden Namen auf die schriftartspezifische Nummer abbildet.

Diese Indirektion mag auf den ersten Blick umständlich wirken, sorgt aber dafür, dass derselbe CSS-Code lesbar bleibt, auch wenn im Hintergrund unterschiedliche Schriftarten mit unterschiedlicher interner Nummerierung eingesetzt werden. Ohne den passenden @font-feature-values-Block ignoriert der Browser die styleset()- oder character-variant()-Anweisung stillschweigend und fällt auf die Standardglyphen zurück, was das Debuggen erschwert, wenn der Block fehlt oder einen Tippfehler enthält.

@font-feature-values "Custom Serif" {
  @styleset {
    swashy-caps: 1;
  }
  @character-variant {
    alt-ampersand: 2;
  }
}

h1 {
  font-family: "Custom Serif", serif;
  font-variant-alternates: styleset(swashy-caps) character-variant(alt-ampersand);
}

4. font-variant-caps: Kapitälchen, Unicase und Titling Caps

font-variant-caps bündelt mehrere Großbuchstaben-Varianten unter einer Property. small-caps ersetzt Kleinbuchstaben durch kleinere, echte Kapitälchen-Glyphen (nicht einfach skalierte Großbuchstaben), was insbesondere für Abkürzungen im Fließtext ein deutlich ruhigeres Schriftbild ergibt als text-transform: uppercase. all-small-caps wendet dieselbe Ersetzung zusätzlich auf bereits vorhandene Großbuchstaben an, sodass ein komplett gleichmäßiges Kapitälchen-Bild entsteht.

titling-caps liefert spezielle, für große Schriftgrade optimierte Großbuchstaben-Glyphen, die in Überschriften oft ausgewogener wirken als die regulären Versalien derselben Schriftart. unicase aktiviert eine einheitliche Glyphenform, bei der Groß- und Kleinschreibung optisch kaum noch unterscheidbar sind, ein Stilmittel, das vor allem in reduzierter, geometrischer Typografie zum Einsatz kommt. Alle diese Werte funktionieren nur, wenn die eingesetzte Schriftart die entsprechenden OpenType-Features tatsächlich mitbringt, sonst bleibt die Darstellung unverändert.

.abkuerzung {
  font-variant-caps: small-caps;
}

h1.editorial {
  font-variant-caps: titling-caps;
}

5. font-feature-settings als Low-Level-Fallback: wann man es noch braucht

font-feature-settings spricht OpenType-Features direkt über ihre vierstelligen Tags an, etwa font-feature-settings: 'liga' 1, 'kern' 1. Das ist mächtiger, weil es jedes Feature ansprechen kann, das eine Schriftart mitbringt, auch solche, für die es keine eigene font-variant-Property gibt, etwa stylistic-set-Kombinationen außerhalb des Standard-Bereichs oder experimentelle Features einzelner Foundries.

Der Nachteil: font-feature-settings umgeht die semantische Ebene vollständig, ein Wert wie 'ss01' 1 sagt nichts darüber aus, was dieses Feature eigentlich bewirkt, und mehrere font-feature-settings-Deklarationen auf verschiedenen Ebenen überschreiben sich gegenseitig komplett statt sich zu ergänzen, anders als bei den font-variant-Properties. In der Praxis gilt daher: font-variant-* zuerst probieren, font-feature-settings nur für Features einsetzen, die keine eigene Property haben.

6. Praktisches Rezept: eine robuste @font-feature-values-Fallback-Kette

Weil styleset()- und character-variant()-Nummern zwischen Schriftarten variieren, empfiehlt sich ein @font-feature-values-Block pro eingesetzter Schriftfamilie, der dieselben sprechenden Namen konsistent auf die jeweils richtige interne Nummer abbildet. So bleibt der eigentliche CSS-Code, der font-variant-alternates verwendet, unabhängig davon, welche konkrete Schriftart gerade geladen ist, solange für jede Schriftart ein passender Block existiert.

Für Schriftarten ohne das gewünschte Feature bleibt font-variant-alternates einfach wirkungslos, der Browser fällt automatisch auf die Standardglyphen zurück, ohne dass ein Fehler entsteht. Diese Eigenschaft macht font-variant-alternates zu progressive enhancement im eigentlichen Sinn: Wer die passende Schriftart lädt, sieht die Feinheiten, wer eine andere Schriftart einsetzt oder auf eine Fallback-Schriftart ausweicht, sieht weiterhin lesbaren, korrekten Text.

@font-feature-values "Editorial Display" {
  @styleset {
    swashy-caps: 1;
  }
}

@font-feature-values "Fallback Serif" {
  @styleset {
    swashy-caps: 3;
  }
}

.headline {
  font-family: "Editorial Display", "Fallback Serif", serif;
  font-variant-alternates: styleset(swashy-caps);
}

7. Zusammenspiel mit Variable Fonts: font-variation-settings ist etwas anderes

Ein häufiges Missverständnis ist, font-variant-alternates und font-variation-settings für dasselbe Konzept zu halten, obwohl sie unterschiedliche Technologien ansprechen. font-variant-alternates schaltet OpenType-Features (GSUB/GPOS) an, die feste, alternative Glyphen austauschen. font-variation-settings dagegen steuert die kontinuierlichen Design-Achsen eines Variable Fonts, etwa Gewicht (wght) oder Breite (wdth), die stufenlos zwischen definierten Werten interpolieren, statt eine feste Glyphe durch eine andere zu ersetzen.

Beide Mechanismen lassen sich in derselben Schriftart und demselben CSS-Regelblock kombinieren: Ein Variable Font kann sowohl variable Achsen für Gewicht und Breite als auch klassische OpenType-Features für Ligaturen und Kapitälchen mitbringen. In der Praxis bedeutet das, font-variation-settings für die Achsensteuerung zu verwenden und font-variant-alternates beziehungsweise die anderen font-variant-Properties parallel dafür einzusetzen, feste Glyphenaustausche zu aktivieren, ohne die beiden Konzepte zu vermischen.

.headline {
  font-family: "Variable Display";
  font-variation-settings: "wght" 650, "wdth" 110;
  font-variant-ligatures: discretionary-ligatures;
  font-variant-caps: small-caps;
}

8. Performance und Browser-Support: eine Teststrategie für den produktiven Einsatz

Die font-variant-Properties selbst kosten keine spürbare Rendering-Performance, weil das Ersetzen der Glyphen während des Text-Shapings passiert, ein Schritt, den der Browser ohnehin für jede Textdarstellung durchläuft. Die eigentliche Kostenfrage betrifft die Schriftdatei: Fonts mit vielen OpenType-Features sind tendenziell größer, weil zusätzliche Glyphen und Feature-Tabellen mitgeliefert werden müssen, was bei der Auswahl einer Schriftart für performancekritische Seiten mit abgewogen werden sollte.

Für den Support-Check reicht in der Praxis ein einfacher visueller Vergleich in den relevanten Zielbrowsern, weil font-variant-alternates und font-variant-caps fehlertolerant sind: Fehlt Unterstützung oder das passende Feature in der Schriftart, wird schlicht die Standardglyphe angezeigt, niemals ein fehlerhaftes oder kaputtes Layout. Das erlaubt, die Features produktiv einzusetzen, ohne aufwendige Browser-Weichen oder @supports-Abfragen aufbauen zu müssen.

9. Praxisbeispiel Editorial-Layout: Überschrift mit Swash, Fließtext ohne Extras

Ein typisches Editorial-Layout setzt OpenType-Features gezielt und sparsam ein: Die große Überschrift bekommt swash() für einen verschnörkelten Anfangsbuchstaben und discretionary-ligatures für einen dekorativen Charakter, während der Fließtext bewusst nur common-ligatures behält, um Lesbarkeit über weite Textmengen nicht zu gefährden. Zu viele aktivierte Alternates im Fließtext wirken schnell unruhig und lenken vom eigentlichen Inhalt ab.

Abkürzungen im Fließtext, etwa Firmennamen oder technische Kürzel, profitieren dagegen gezielt von font-variant-caps: small-caps, weil sie sich dadurch optisch besser in den Textfluss einfügen als vollständig großgeschriebene Wörter, die im Fließtext oft wie ein Ausrufezeichen wirken. Diese gezielte, kontextabhängige Kombination verschiedener Features ist der eigentliche Mehrwert gegenüber einer pauschalen text-transform-Lösung.

10. Zusammenfassung

11. FAQ: font-variant-alternates: Das Wichtigste auf einen Blick