font-style & font-variant

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.

Steckbrief font-style

Syntax: font-style: normal | italic | oblique [<angle>]
Initialwert: normal
Vererbt: Ja
Animierbar: Nein

Kategorie: Typografie
Werte: 13
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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 , das automatisch font-style: italic setzt.  ist für visuell hervorgehobenen Text ohne besondere Betonung gedacht, zum Beispiel für Fachbegriffe, Buchtitel oder fremdsprachige Ausdrücke. Screenreader betonen , 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

13 Werte

font-style

Wert	Beschreibung	Beispiel
`normal`	Aufrechte Schrift (Standard).	font-style: normal
`italic`	Echte Kursivschrift mit eigenem Schriftschnitt.	font-style: italic
`oblique`	Geneigte Version der normalen Schrift (Standard: 14°).	font-style: oblique
`oblique <angle>`	Geneigte Schrift mit benutzerdefiniertem Winkel (-90° bis 90°).	font-style: oblique 12deg
`inherit`	Erbt den Wert explizit vom Elternelement.	font-style: inherit

font-variant

Wert	Beschreibung	Beispiel
`normal`	Keine Varianten aktiv (Standard).	font-variant: normal
`small-caps`	Kleinbuchstaben als kleine Großbuchstaben darstellen.	font-variant: small-caps
`all-small-caps`	Alle Buchstaben als kleine Großbuchstaben.	font-variant-caps: all-small-caps
`tabular-nums`	Gleichbreite Ziffern, ideal für Tabellen und Aufzählungen.	font-variant-numeric: tabular-nums
`oldstyle-nums`	Mediävalziffern mit Ober- und Unterlängen.	font-variant-numeric: oldstyle-nums
`lining-nums`	Versalziffern mit einheitlicher Höhe (Standard in den meisten Fonts).	font-variant-numeric: lining-nums
`common-ligatures`	Standard-Ligaturen aktivieren (fi, fl, ff).	font-variant-ligatures: common-ligatures
`no-common-ligatures`	Standard-Ligaturen deaktivieren.	font-variant-ligatures: no-common-ligatures

Beispiele

5 Beispiele

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.

italic vs. oblique

/* 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>

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 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.

Small Caps für elegante Überschriften

.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>

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”.

Proportionale vs. tabellarische Ziffern

/* 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 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  statt reines font-style: italic für semantische Betonung. Screenreader erkennen  und können den Text betont vorlesen. Reines CSS-Italic wird von Screenreadern ignoriert, der Text klingt wie normaler Text. Das HTML-Element  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

5 Fehler

01 italic statt  für Betonung

font-style: italic auf einem  hat keine semantische Bedeutung. Screenreader ignorieren das CSS und lesen den Text ohne Betonung. Verwende  für betonte Textstellen.

02 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.

03 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.

04 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.

05 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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.

Apple Mail

Komplett

font-style und font-variant funktionieren vollständig
Gmail

Teilweise

font-style: italic funktioniert. font-variant wird weitgehend ignoriert
Outlook

Teilweise

font-style: italic funktioniert. font-variant und OpenType-Features werden nicht unterstützt
Thunderbird

Komplett
Yahoo Mail

Teilweise

font-style: italic funktioniert. font-variant eingeschränkt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da