CSS font-style:italic / kursiv

Schräg gestellter Text: Kursiv oder italic, statt fetter Schrift

Der Schriftschnitt italic, auch als »kursiv« bezeichnet, hebt Begriffe, wörtliche Rede oder ganze Sätze im Fließtext hervor. Kursiv gesetzte Texte springen weniger hervor als fett gesetzte Schriften.

Eine Faustregel für den Einsatz von kursiver Schrift lautet: Was wir auf dem Papier unterstreichen würden.

Anstelle der CSS-Eigenschaft font-style: italic oder oblique kann HTML em oder i den Text als kursive Schrift bestimmen. Dabei ändert CSS italic nur den visuellen Charakter, em bzw. i geben dem Text eine inhaltliche Betonung.

italic vs oblique

CSS bietet zwei Optionen: italic und oblique. Dabei soll italic schräg gestellte Schrift nutzen, für die der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt hat. Wenn kein italic-Schnitt vorhanden ist, soll der Browser die Schrift programmatisch schräg stellen – oblique.

Einen Unterschied wird man gar nicht so einfach zu Gesicht bekommen: Wenn ein Italic-Font existiert, wird der Browser den Schnitt sowohl für italic als auch für oblique benutzen. Wir müssten als eine Schrift suchen, für die wir keinen Italic-Font haben und dann den maschinell kursiv gesetzten Text mit dem echten kursive Schnitt vergleichen.

Wikipedia Oblique type zeigt ein Beispiel für den Unterschied zwischen Italic und Oblique.

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
oder
<span style="font-style: normal;">Normal</span>
<span style="font-style: italic;">Italic</span>
<span style="font-style: oblique;">Oblique</span>

font-style und @font-face

Bei Schriften, die mit @ font-face als ladbare Schrift eingebunden sind, müssen spezielle italic- und bold-Schnitte ebenfalls geladen werden, damit der Browser kursiven Text nicht digital schrägstellt und den Fettschnitt nicht selbst bastelt.

/* arsenal-regular - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 400;
  src: local('Arsenal Regular'), local('Arsenal-Regular'),
       url('fonts/arsenal/arsenal-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal/arsenal-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
}
/* arsenal-italic - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: italic;
  font-weight: 400;
  src: local('Arsenal Italic'), local('Arsenal-Italic'),
       url('fonts/arsenal/arsenal-v2-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal/arsenal-v2-latin-italic.woff') format('woff'), /* Modern Browsers */
}
Screenshot: font-style:italic Originalschrift vs. schräggestellt
Erster Text: Orignal Italic-Schnitt
Zweiter Text: Kein Italic-Schnitt geladen, schrägstellt vom Browser

Den Unterschied zwischen dem originalen Italic-Schnitt und dem schräggestellten Text erkennt man z.B. schnell am a und am e.

Werte für font-style

normal
ist die Voreinstellung und stellt die Zeichen aufrecht dar. Die Angabe normal stellt sicher, dass vorangegangene Deklarationen den Schriftstil nicht beeinflussen.
italic
stellt die Schrift in einem kursiven Schnitt dar. Wenn kein Kursivschnitt (italic) auf dem Zielrechner installiert ist, benutzt der Browser oblique.
oblique
veranlasst den Browser, die Buchstaben schräg darzustellen, um einen Kursivschnitt nachzuahmen.
Sei Italic sei bold oder einfach normal