font-style & font-variant

Zuletzt aktualisiert am 15. Februar 2026

font-style steuert, ob Text kursiv, geneigt oder aufrecht dargestellt wird. font-variant bietet Zugriff auf typografische Feinheiten wie Small Caps, tabellarische Ziffern und Ligaturen. Beide Eigenschaften werden vererbt und ergänzen font-weight bei der typografischen Gestaltung. Während font-style: italic eine eigene Kursivschrift aktiviert, erzeugt oblique eine künstlich geneigte Version. font-variant ist besonders wertvoll für professionelle Typografie mit OpenType-Features.

Grundlagen

font-style: italic aktiviert den kursiven Schriftschnitt einer Schriftfamilie. Echte Kursivschriften (Italics) sind eigenständig gestaltete Buchstabenformen: Das a sieht zum Beispiel oft völlig anders aus als in der aufrechten Version. oblique hingegen neigt die normale Schrift einfach um einen Winkel (Standard: 14°). Wenn eine Schrift keinen Kursivschnitt hat und du italic verwendest, greift der Browser automatisch auf oblique zurück.

Für die semantische Betonung im Text verwendest du das HTML-Element <em>, das automatisch font-style: italic setzt. <i> ist für visuell hervorgehobenen Text ohne besondere Betonung gedacht, zum Beispiel für Fachbegriffe, Buchtitel oder fremdsprachige Ausdrücke. Screenreader betonen <em>, ignorieren aber reines CSS-Italic.

font-variant ist eine Sammeleigenschaft für typografische Features. Die wichtigsten Unter-Eigenschaften sind font-variant-caps (Small Caps), font-variant-numeric (Ziffernformate) und font-variant-ligatures (Ligaturen). Diese Features setzen voraus, dass die verwendete Schrift sie unterstützt. Nicht jede Schrift hat Small Caps oder tabellarische Ziffern.

Syntax & Werte

font-style

font-variant

Beispiele

italic vs. oblique

Echte Kursivschriften (italic) haben eigenständig gestaltete Buchstabenformen. Achte auf das a, f und g in Georgia Italic. oblique neigt die aufrechte Schrift einfach um einen Winkel, ohne die Buchstabenformen zu ändern. Bei sans-serif Schriften wie Arial ist italic und oblique oft identisch, weil kein separater Kursivschnitt existiert.

/* Echter Kursivschnitt: eigene Buchstabenformen */
.italic  { font-style: italic; }

/* Geneigte Normalschrift: gleiche Formen, nur geneigt */
.oblique { font-style: oblique; }

/* Bei Variable Fonts: benutzerdefinierter Winkel */
.tilted  { font-style: oblique 20deg; }

<div class="style-demo">
<div class="s-serif-normal"><div class="label">Georgia | font-style: normal</div>Aufrecht: a f g haben ihre normale Form</div>
<div class="s-serif-italic"><div class="label">Georgia | font-style: italic (echter Kursivschnitt)</div>Kursiv: a f g haben andere Buchstabenformen</div>
<div class="s-serif-oblique"><div class="label">Georgia | font-style: oblique (geneigt)</div>Oblique: a f g behalten ihre Form, Text wird geneigt</div>
<div class="s-sans-italic"><div class="label">Arial | font-style: italic</div>Sans-Serif: italic und oblique sehen identisch aus</div>
</div>

oblique mit benutzerdefiniertem Winkel (Variable Fonts)

Bei Variable Fonts mit einer Slant-Achse (slnt) kannst du den Neigungswinkel stufenlos einstellen. oblique <angle> mit einem konkreten Winkel funktioniert nur bei Variable Fonts. Bei statischen Schriften wird der Winkel ignoriert.

/* Variable Font mit Slant-Achse laden */
@font-face {
  font-family: "Inter";
  src: url("inter-variable.woff2") format("woff2");
  font-style: oblique 0deg 10deg; /* Unterstützter Winkelbereich */
  font-display: swap;
}

.normal { font-style: oblique 0deg; }   /* Aufrecht */
.slight { font-style: oblique 5deg; }   /* Leicht geneigt */
.medium { font-style: oblique 10deg; }  /* Mittel geneigt */
.strong { font-style: oblique 20deg; }  /* Wird auf Maximum (10deg) begrenzt */

Small Caps für Überschriften

Small Caps stellen Kleinbuchstaben als kleine Großbuchstaben dar. Sie eignen sich hervorragend für Überschriften, Akronyme oder Einleitungen und verleihen dem Text eine elegante typografische Note.

.heading {
  font-variant: small-caps;
  letter-spacing: 0.05em; /* Etwas Laufweite für Lesbarkeit */
}

/* Alle Buchstaben als kleine Großbuchstaben */
.all-small {
  font-variant-caps: all-small-caps;
}

<div class="caps-demo">
<div class="sc-normal"><div class="label">Ohne Small Caps</div>Kapitel Eins: Der Anfang</div>
<div class="sc-small"><div class="label">font-variant: small-caps</div>Kapitel Eins: Der Anfang</div>
<div class="sc-all"><div class="label">font-variant-caps: all-small-caps</div>Kapitel Eins: Der Anfang</div>
</div>

Tabellarische Ziffern

tabular-nums macht alle Ziffern gleich breit. Das ist unverzichtbar für Tabellen und Listen mit Zahlen, weil die Ziffern sauber untereinander stehen. Ohne tabular-nums haben proportionale Ziffern unterschiedliche Breiten: Eine “1” ist schmaler als eine “8”.

/* Standard: proportionale Breite */
.proportional {
  font-variant-numeric: proportional-nums;
}

/* Gleichbreite Ziffern für Tabellen */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Kombiniert: tabellarisch + Mediävalziffern */
.fancy {
  font-variant-numeric: tabular-nums oldstyle-nums;
}

<div class="num-demo">
<div class="num-col num-proportional">
  <div class="num-col-title">Proportional (Standard)</div>
  <div>1.111,00</div>
  <div>88.888,00</div>
  <div>12.345,67</div>
  <div>999,99</div>
</div>
<div class="num-col num-tabular">
  <div class="num-col-title">Tabular (gleichbreit)</div>
  <div>1.111,00</div>
  <div>88.888,00</div>
  <div>12.345,67</div>
  <div>999,99</div>
</div>
</div>

Ligaturen

Ligaturen verbinden bestimmte Buchstabenpaare wie “fi”, “fl” oder “ff” zu einem eleganten Zeichen. Die meisten Browser aktivieren Standard-Ligaturen automatisch. Der Effekt ist nur bei Schriften mit eingebauten Ligaturen sichtbar. Viele System-Schriften haben keine, während professionelle Web-Fonts wie “Fira Code” oder “Inter” deutliche Ligaturen bieten.

/* Ligaturen aktivieren (meist Standard) */
.with-ligatures {
  font-variant-ligatures: common-ligatures;
}

/* Ligaturen deaktivieren */
.no-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

/* Alle Ligaturen ausschalten */
.none {
  font-variant-ligatures: none;
}

Barrierefreiheit

Verwende <em> statt reines font-style: italic für semantische Betonung. Screenreader erkennen <em> und können den Text betont vorlesen. Reines CSS-Italic wird von Screenreadern ignoriert, der Text klingt wie normaler Text. Das HTML-Element <i> hat keine semantische Betonung und wird ebenfalls nicht betont vorgelesen, eignet sich aber für Fachbegriffe oder Titel.

Small Caps sind rein dekorativer Natur. Screenreader lesen Text in Small Caps genauso vor wie normalen Text. Verwende Small Caps daher nie als Ersatz für Großbuchstaben, wenn die Großschreibung eine semantische Bedeutung hat (wie bei Akronymen). Für Akronyme nutze <abbr> mit einem title-Attribut.

Kursiver Text kann für Nutzer mit Legasthenie schwerer lesbar sein. Verwende Kursivschrift sparsam und nur für kurze Textpassagen, nicht für ganze Absätze. Besonders bei kleinen Schriftgrößen leidet die Lesbarkeit von kursivem Text.

Häufige Fehler

• italic statt <em> für Betonung: font-style: italic auf einem <span> hat keine semantische Bedeutung. Screenreader ignorieren das CSS und lesen den Text ohne Betonung. Verwende <em> für betonte Textstellen.
• oblique und italic verwechseln: italic nutzt einen eigenen Schriftschnitt mit angepassten Buchstabenformen. oblique neigt die normale Schrift einfach. Bei den meisten System-Schriften sieht man kaum einen Unterschied, aber bei professionellen Schriften sind Italics deutlich eleganter.
• font-variant-numeric ohne passende Schrift: tabular-nums oder oldstyle-nums funktionieren nur, wenn die Schrift diese OpenType-Features enthält. Viele einfache Schriften haben nur proportionale Versalziffern.
• Small Caps für ganze Absätze: Small Caps sind für kurze Texte wie Überschriften, Akronyme oder Einleitungen gedacht. Ein ganzer Absatz in Small Caps ist schwer lesbar und wirkt aufdringlich.
• font-feature-settings statt font-variant: font-feature-settings: "smcp" macht dasselbe wie font-variant: small-caps, ist aber die ältere Low-Level-API. font-variant ist die moderne, besser lesbare Alternative und kaskadiert korrekt.

Browser-Kompatibilität

font-style wird von allen Browsern vollständig unterstützt. font-variant mit Small Caps funktioniert ebenfalls überall. Die erweiterten font-variant-Untereigenschaften (numeric, ligatures, caps) werden seit 2015/2016 von allen modernen Browsern unterstützt.

Email-Kompatibilität

font-style wird in HTML-Emails gut unterstützt. font-variant funktioniert nur eingeschränkt, weil die meisten Email-Clients OpenType-Features nicht unterstützen.

Verwandte Eigenschaften