Text kursiv formatieren

HTML und CSS bieten uns die Möglichkeit, Text kursiv zu formatieren. Ich spreche von Text wie diesem. Lassen Sie uns alles abdecken, was Sie wissen müssen.

Was ist kursiver Text und warum sollte man Text kursiv formatieren?

Sie formatieren Text meistens kursiv, um ihn hervorzuheben. Buchstäblich, um ein Wort zu betonen, damit jemand, der den Satz liest, diesem Wort oder dieser Phrase etwas zusätzliches Gefühl gibt, wie Sie es als Autor beabsichtigen. Oder es könnte einem bestimmten Styleguide folgen, wie z. B. die Hervorhebung des Titels von etwas, z. B. eines veröffentlichten Artikels.

Verwenden Sie das <em>-Tag

Das "em" in <em> steht wörtlich für emphasis (Hervorhebung). Browser machen standardmäßig kursiv Text, der in HTML <em>-Tags eingeschlossen ist.

<p>
  That was a <em>wonderful</em> party, Bebe.
</p>

Stellen Sie sich das Klangbild dieses Satzes vor, bei dem der Leser dieses Wort betont und dem Satz dadurch eine andere Ausstrahlung verleiht, als wenn er es nicht täte.

Verwenden Sie das <i>-Tag

Das <i>-Element dient dazu, Text kursiv zu formatieren, ohne eine Betonung zu implizieren. Es dient dazu, Text visuell von anderem Text abzuheben, ohne zu implizieren, dass ein Leser diesen Wörtern zusätzliches Gewicht beimisst. Vielleicht etwas wie

<p><i>Miranda thought:</i> What an interesting metaphor on the global economy.</p>
<p><i>Chris thought:</i> Is that mustard?</p>

Was ist der Unterschied zwischen <i> und <em>?

Noch einmal

• <em> ist für Betonung
• <i> ist für kursiven Text ohne Betonung

Wenn Sie versucht sind, <i> für den Titel von etwas zu verwenden, wie

<p>
  The book 
  <!-- Not the end of the world, but... --> 
  <i>Mr. Penumbra's 24-Hour Bookstore</i>
  is good.
</p>

<p>
  The book 
  <!-- ...this is more semantically correct. --> 
  <cite>Mr. Penumbra's 24-Hour Bookstore</cite>
  is good.
</p>

Glücklicherweise formatieren Browser Inhalte, die in <cite>-Tags eingeschlossen sind, kursiv, genau wie <i>, sodass hier keine weitere Arbeit erforderlich ist, wenn Sie ein Werk (z. B. Moby Dick) oder eine Publikation (z. B. The New York Times) zitieren.

Verwenden Sie Ihre eigene HTML-Klasse und CSS

Wenn das Ziel darin besteht, Text visuell abzuheben, dann müssen wir nicht unbedingt auf das <i>-Element zurückgreifen. Spans haben keine semantische Bedeutung und können für visuelle Hervorhebung gestylt werden.

<p>
  Shoes are <span class="emphasis">on sale</span> this week!
</p>

.emphasis {
  background: lightyellow;
  font-style: italic;
}

Die CSS-Eigenschaft font-style ist diejenige, die Sie benötigen, um Text kursiv zu machen, und die Sie auf jeden beliebigen Selektor anwenden können.

Vorsicht vor "Faux Italic"

Nicht alle Schriftarten haben kursive Zeichen. Oder Sie befinden sich in einer Situation, in der die kursive Version der Schriftart nicht geladen ist. In beiden Fällen wird der Browser versuchen, es trotzdem zu fälschen, was fast immer schrecklich aussieht (oder zumindest viel schlechter als die Verwendung einer echten kursiven Schriftart). 

Nichts wird Sie davor warnen – man muss einfach ein Auge dafür entwickeln. Hier ist ein Beispiel der Schriftart Merriweather in Faux Italic.

Unicode-Kursivschrift

Es gibt eine Fülle von Zeichen in Unicode, darunter Buchstaben, die eine kursive Anmutung haben.

Sie könnten dies verwenden, wenn Sie keine HTML-Kontrolle haben, um Dinge wie kursive Schrift zu tun, sagen wir, auf Twitter beim Verfassen eines Tweets.

Die Zugänglichkeit davon ist schrecklich. Es wird jedes Zeichen einzeln gelesen, was es (vermutlich, für mich) schwer macht, das Wort zu verstehen. Seien Sie sehr vorsichtig bei der Verwendung dieses Mittels, wenn Sie es überhaupt verwenden.

Kursivschrift in variablen Schriftarten

Dies ist ein eher fortgeschrittenes Konzept, aber es gibt sogenannte variable Schriftarten. Sie bieten Anpassungsmöglichkeiten direkt im Browser. Anstatt also eine zweite Schriftdatei für die fette Version zu haben, enthalten sie Informationen, um sich mit dieser einen Datei selbst fett zu machen. Aber "fett" ist nur ein Beispiel dafür, was eine variable Schriftart möglicherweise bietet. Nicht alle tun das unbedingt.

Eine variable Schriftart kann eine Option für "Schräg" oder "Kursiv" haben, und Sie könnten diesen Look auf diese Weise anwenden.

---

Da haben Sie es, fünf verschiedene Antworten auf die Frage, wann Text kursiv formatiert werden soll. Hoffentlich hilft dies auch bei der nächsten logischen Frage: Welche Methode sollte ich verwenden?