Grundlegende Text- und Schriftart-Stilgestaltung

Was ist bei der Textgestaltung in CSS zu beachten?

Text innerhalb eines Elements wird innerhalb des Content-Box des Elements platziert. Er beginnt oben links im Inhaltsbereich (oder oben rechts bei RTL-Sprachinhalten) und fließt bis zum Ende der Zeile. Sobald er das Ende erreicht, geht er in die nächste Zeile über und fließt erneut bis zum Ende. Dieses Muster wiederholt sich, bis der gesamte Inhalt in die Box eingefügt wurde. Textinhalt verhält sich effektiv wie eine Reihe von Inline-Elementen, die auf Linien nebeneinander angeordnet sind und keine Zeilenumbrüche erzeugen, bis das Ende der Linie erreicht ist, es sei denn, Sie erzwingen manuell einen Zeilenumbruch mithilfe des <br>-Elements.

Die CSS-Eigenschaften zur Textgestaltung fallen im Allgemeinen in zwei Kategorien, die wir in diesem Artikel separat betrachten werden:

• Schriftstile: Eigenschaften, die sich auf die Schrift eines Textes auswirken, z.B. welche Schriftart angewendet wird, deren Größe und ob sie fett, kursiv usw. ist.
• Textlayout-Stile: Eigenschaften, die sich auf den Zeilenabstand und andere Layoutmerkmale des Textes auswirken und beispielsweise die Anpassung des Abstands zwischen Zeilen und Buchstaben sowie die Ausrichtung des Textes innerhalb der Inhaltsbox ermöglichen.

Schriftarten

Lassen Sie uns direkt zu den Eigenschaften übergehen, die Schriftarten gestalten. In diesem Beispiel werden wir einige CSS-Eigenschaften auf das folgende HTML-Beispiel anwenden:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

Farbe

Die color-Eigenschaft setzt die Farbe des Vordergrundinhalts ausgewählter Elemente, was meist der Text ist, aber auch einige andere Dinge umfassen kann, wie etwa eine Unter- oder Überlinie, die mithilfe der text-decoration-Eigenschaft auf den Text gesetzt wird.

color kann jede CSS-Farbeinheit akzeptieren, zum Beispiel:

p {
  color: red;
}

Dadurch werden die Absätze rot anstelle des Standard-Schwarz der Browser, wie folgt:

Schriftfamilien

Um eine andere Schriftart für Ihren Text festzulegen, verwenden Sie die font-family-Eigenschaft — dies ermöglicht es Ihnen, eine Schriftart (oder Liste von Schriftarten) für den Browser zu spezifizieren, die auf die ausgewählten Elemente angewendet werden soll. Der Browser wendet nur dann eine Schriftart an, wenn sie auf dem Gerät verfügbar ist, auf dem die Website aufgerufen wird; andernfalls verwendet er einfach eine Standard-Schriftart des Browsers. Ein einfaches Beispiel sieht so aus:

p {
  font-family: "Arial";
}

Dies würde alle Absätze auf einer Seite die Arial-Schrift übernehmen lassen, die auf jedem Computer zu finden ist.

Web-sichere Schriftarten

Apropos Schriftverfügbarkeit: Es gibt nur eine bestimmte Anzahl von Schriftarten, die generell in allen Systemen verfügbar sind und daher ohne große Sorgen verwendet werden können. Diese werden als web-sichere Schriftarten bezeichnet.

Die meiste Zeit möchten wir als Webentwickler mehr spezifische Kontrolle über die Schriftarten haben, mit denen unsere Textinhalte angezeigt werden. Das Problem besteht darin, einen Weg zu finden, um zu wissen, welche Schriftart auf dem Computer verfügbar ist, der unsere Webseiten anzeigt. Es gibt keinen Weg, dies in jedem Fall zu wissen, aber die web-sicheren Schriftarten sind bekannt dafür, auf fast allen Instanzen der meistgenutzten Betriebssysteme verfügbar zu sein (Windows, macOS, die gängigsten Linux-Distributionen, Android und iOS).

Die Liste der tatsächlichen web-sicheren Schriftarten wird sich mit der Entwicklung der Betriebssysteme ändern, aber es ist vernünftig, die folgenden Schriftarten als web-sicher zu betrachten, zumindest für den Moment (viele von ihnen wurden durch die Microsoft-Initiative Core fonts for the Web in den späten 90ern und frühen 2000ern populär gemacht):

Standard-Schriftarten

CSS definiert fünf generische Namen für Schriftarten: serif, sans-serif, monospace, cursive und fantasy. Diese sind sehr allgemein gehalten, und das exakte Schriftbild, das basierend auf diesen generischen Namen benutzt wird, kann von Browser zu Browser und von Betriebssystem zu Betriebssystem variieren, auf dem sie angezeigt werden. Sie repräsentieren ein Worst-Case-Szenario, bei dem der Browser sein Bestes versucht, um eine passende Schriftart bereitzustellen. serif, sans-serif und monospace sind recht vorhersehbar und sollten etwas vernünftiges bieten. Andererseits sind cursive und fantasy weniger vorhersehbar, und wir empfehlen, diese mit Vorsicht zu verwenden und bei der Verwendung regelmäßig zu testen.

Die fünf Namen sind wie folgt definiert:

My big red elephant

body {
  font-family: serif;
}

My big red elephant

body {
  font-family: sans-serif;
}

My big red elephant

body {
  font-family: monospace;
}

My big red elephant

body {
  font-family: cursive;
}

My big red elephant

body {
  font-family: fantasy;
}

Schriftstapel

Da Sie nicht garantieren können, dass die Schriftarten, die Sie auf Ihren Webseiten verwenden möchten, verfügbar sind (selbst eine Webschrift könnte aus irgendeinem Grund fehlschlagen), können Sie einen Schriftstapel angeben, damit der Browser aus mehreren Schriftarten wählen kann. Dies beinhaltet einen font-family Wert, der aus mehreren durch Kommas getrennten Schriftnamen besteht, zum Beispiel:

p {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

In einem solchen Fall beginnt der Browser am Anfang der Liste und schaut, ob diese Schriftart auf dem Gerät verfügbar ist. Wenn ja, wird diese Schriftart auf die ausgewählten Elemente angewendet. Wenn nicht, fährt er mit der nächsten Schriftart fort, und so weiter.

Es ist eine gute Idee, einen geeigneten generischen Schriftnamen am Ende des Stapels anzugeben, damit falls keine der aufgeführten Schriftarten verfügbar ist, der Browser zumindest etwas annähernd Passendes bereitstellen kann. Um diesen Punkt zu betonen, werden Absätze standardmäßig mit der Serifenschrift des Browsers angezeigt, wenn keine andere Option verfügbar ist — was normalerweise Times New Roman ist — das ist für eine serifenlose Schriftart nicht gut!

Ein Beispiel für font-family

Lassen Sie uns unser vorheriges Beispiel fortführen und den Absätzen eine serifenlose Schriftart geben:

p {
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

Dies ergibt dann das folgende Ergebnis:

Schriftgröße

In unserem letzten Modul über CSS-Werte und -Einheiten haben wir Längen- und Größeneinheiten besprochen. Die Schriftgröße (eingestellt mit der font-size-Eigenschaft) kann Werte in den meisten dieser Einheiten (und andere, wie Prozentsätze) annehmen; die am häufigsten verwendeten Einheiten zur Texteinstellung sind jedoch:

• px (Pixel): Die Anzahl der Pixel, die die Textgröße sein soll. Dies ist eine absolute Einheit — sie ergibt denselben endgültigen berechneten Wert für die Schrift auf der Seite in fast jeder Situation.
• ems: 1 em entspricht der Schriftgröße, die für das übergeordnete Element des aktuellen zu gestaltenden Elements festgelegt wurde (genauer gesagt, der Breite eines Großbuchstabens M, der innerhalb des übergeordneten Elements enthalten ist). Wenn Sie viele verschachtelte Elemente mit verschiedenen Schriftgrößen haben, kann dies kompliziert werden, ist aber machbar, wie Sie unten sehen werden. Warum sich die Mühe machen? Es ist ganz natürlich, sobald Sie sich daran gewöhnen, und Sie können em verwenden, um alles zu dimensionieren, nicht nur Text. Sie können eine gesamte Website mit em dimensionieren, was die Wartung einfach macht.
• rems: Diese funktionieren genauso wie em, mit dem Unterschied, dass 1 rem der Schriftgröße entspricht, die für das Root-Element des Dokuments (d.h. <html>) festgelegt wurde, nicht dem übergeordneten Element. Das macht das Rechnen zur Berechnung Ihrer Schriftgrößen viel einfacher.

Die font-size eines Elements wird von dem übergeordneten Element dieses Elements geerbt. Das alles beginnt mit dem Stamm-Element des gesamten Dokuments — <html> — dem standardmäßig in den Browsern eine font-size von 16px zugewiesen wird. Jeder Absatz (oder ein anderes Element, für das nicht eine andere Größe vom Browser festgelegt wurde) innerhalb des Root-Elements hat eine Endgröße von 16px. Andere Elemente können unterschiedliche Standardgrößen haben. Zum Beispiel hat ein h1-Element standardmäßig eine Einstellung von 2em, so dass es eine endgültige Größe von 32px hat.

Die Dinge werden komplizierter, wenn Sie die Schriftgröße von verschachtelten Elementen ändern. Wenn Sie z.B. ein <article>-Element auf Ihrer Seite haben und dessen font-size auf 1,5 em (was einer Endgröße von 24 px entspricht) setzen und dann möchten, dass die Absätze innerhalb der <article>-Elemente eine berechnete Schriftgröße von 20 px haben, welchen em-Wert würden Sie verwenden?

<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>

Sie müssten deren em-Wert auf 20/24, oder 0.83333333 em setzen. Die Berechnungen können kompliziert sein, daher müssen Sie vorsichtig sein, wie Sie Dinge gestalten. Am besten verwenden Sie rem, wo Sie können, um die Dinge einfach zu halten, und vermeiden Sie, die font-size von Container-Elementen festzulegen, wo möglich.

Schriftart-Stil, Schriftgewicht, Textumwandlung und Textdekoration

CSS bietet vier übliche Eigenschaften, um das visuelle Gewicht/Die Betonung des Textes zu ändern:

• font-style: Verwendet, um kursiven Text ein- oder auszuschalten. Mögliche Werte sind wie folgt (sie verwenden dies selten, es sei denn, sie möchten aus irgendeinem Grund vorhandenes kursiv ausschalten):

  • normal: Setzt den Text auf die normale Schrift (schaltet vorhandene Kursivschrift aus).
  • italic: Setzt den Text auf die kursiven Version der Schrift, falls verfügbar; wenn nicht, wird die Kursivschrift mit Schräg verwendet simuliert.
  • oblique: Setzt den Text auf die simulierte Version einer kursiven Schriftart, die durch Schrägeneigung der normalen Version erzeugt wird.

• font-weight: Setzt, wie fett der Text ist. Diese Eigenschaft bietet viele Werte für den Fall, dass viele Schriftvarianten verfügbar sind (wie -leicht, -normal, -fett, -extrafett, -schwarz, etc.), aber realistisch werden Sie selten einen davon verwenden, außer normal und bold:

  • normal, bold: Normales und fettes Schriftgewicht.
  • lighter, bolder: Setzt die Fettschrift des aktuellen Elements ein Schritt leichter oder schwerer als die Fettschrift des übergeordneten Elements.
  • 100 – 900: Numerische Fettigkeitswerte, die eine detailliertere Kontrolle als die obigen Schlüsselwörter erlauben, falls erforderlich.

• text-transform: Ermöglicht das Festlegen der Transformation auf Ihrer Schrift. Werte umfassen:

  • none: Verhindert jede Transformation.
  • uppercase: Wandelt den gesamten Text in Großbuchstaben um.
  • lowercase: Wandelt den gesamten Text in Kleinbuchstaben um.
  • capitalize: Wandelt alle Wörter um, sodass der erste Buchstabe großgeschrieben wird.
  • full-width: Wandelt alle Glyphen so um, dass sie innerhalb eines festen quadratischen Rasters geschrieben werden, ähnlich wie bei einem Monospace-Font und ermöglicht so die Ausrichtung von z. B. lateinischen Zeichen zusammen mit asiatischen Schriftzeichen (wie Chinesisch, Japanisch, Koreanisch).

• text-decoration: Setzt/Entfernt Textdekorationen auf Schriftarten (Sie werden dies hauptsächlich verwenden, um die Standard-Unterstreichung auf Links beim Stylen zu entfernen). Verfügbare Werte sind:

  • none: Hebt alle bereits vorhandenen Textdekorationen auf.
  • underline: Unterstreicht den Text.
  • overline: Gibt dem Text eine Overline.
  • line-through: Platziert einen Durchstrich auf dem Text.

  Beachten Sie, dass text-decoration mehrere Werte gleichzeitig akzeptieren kann, wenn Sie mehrere Dekorationen zeitgleich hinzufügen möchten, z. B. text-decoration: underline overline. Beachten Sie auch, dass text-decoration eine Kurzschreibweise für text-decoration-line, text-decoration-style und text-decoration-color ist. Sie können Kombinationen dieser Eigenschaftswerte verwenden, um interessante Effekte zu erzeugen, z. B. text-decoration: line-through red wavy.

Lassen Sie uns einige dieser Eigenschaften in unserem Beispiel hinzufügen:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

Unser neues Ergebnis sieht jetzt so aus:

Text-Schatten

Sie können Schlagschatten zu Ihrem Text mit der text-shadow-Eigenschaft hinzufügen. Diese nimmt bis zu vier Werte an, wie im folgenden Beispiel gezeigt:

text-shadow: 4px 4px 5px red;

Die vier Eigenschaften sind wie folgt:

1. Der horizontale Offset des Schattens vom Originaltext — das kann die meisten verfügbaren CSS-Längen- und Größeneinheiten akzeptieren, aber Sie werden am häufigsten px verwenden; positive Werte verschieben den Schatten nach rechts, und negative Werte nach links. Dieser Wert muss enthalten sein.
2. Der vertikale Offset des Schattens vom Originaltext. Diese verhält sich ähnlich wie der horizontale Offset, mit dem Unterschied, dass er den Schatten nach oben/unten statt nach links/rechts verschiebt. Dieser Wert muss enthalten sein.
3. Der Unschärferadius: Ein höherer Wert bedeutet, dass der Schatten weiter verbreitet wird. Wenn dieser Wert nicht enthalten ist, wird er standardmäßig auf 0 gesetzt, was keine Unschärfe bedeutet. Auch dieser kann die meisten verfügbaren CSS-Längen- und Größeneinheiten akzeptieren.
4. Die Grundfarbe des Schattens, die jede CSS-Farbenheit annehmen kann. Wenn nicht enthalten, wird es standardmäßig auf currentColor gesetzt, d.h. die Schattenfarbe wird von der color-Eigenschaft des Elements übernommen.

Mehrfach-Schatten

Sie können mehrere Schatten auf den gleichen Text anwenden, indem Sie mehrere Schattenwerte durch Kommas getrennt angeben, z.B.:

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

Würden wir dies auf das <h1>-Element in unserem Tommy The Cat-Beispiel anwenden, würden wir so enden:

Text-Layout

Mit den grundlegenden Schriftarteigenschaften aus dem Weg, werfen wir einen Blick auf Eigenschaften, die wir verwenden können, um Textlayouts zu beeinflussen.

Text-Ausrichtung

Die text-align-Eigenschaft wird verwendet, um zu steuern, wie der Text innerhalb seiner enthaltenen Inhaltsbox ausgerichtet wird. Die verfügbaren Werte sind unten aufgelistet. Sie funktionieren weitgehend genauso, wie sie es in einer normalen Textverarbeitungsanwendung tun:

• left: Linksbündig den Text ausrichtet.
• right: Rechtsbündig den Text ausrichtet.
• center: Zentriert den Text.
• justify: Machen den Text verbreiten, und variieren die Lücken zwischen den Worten so, dass alle Zeilen des Textes die gleiche Breite haben. Sie müssen dies vorsichtig verwenden — es kann schrecklich aussehen, besonders wenn es auf einen Absatz mit vielen langen Wörtern angewendet wird. Wenn Sie dies verwenden, sollten Sie auch etwas anderes zusammen mit verwenden, wie hyphens, um einige der längeren Wörter über Zeilen hinweg zu brechen.

Wenn wir text-align: center; auf das <h1> in unserem Beispiel angewendet hätten, würden wir damit enden:

h1 {
  text-align: center;
}

Zeilenhöhe

Die line-height-Eigenschaft setzt die Höhe jeder Textzeile. Diese Eigenschaft kann nicht nur die meisten Längen- und Größeneinheiten annehmen, sondern kann auch eine einheitslose Zahl annehmen, die als Multiplikator fungiert und allgemein als die beste Option betrachtet wird. Mit einem einheitslosen Wert, wird die font-size multipliziert und liefert das line-height. Fließtext sieht im Allgemeinen schöner aus und ist einfacher zu lesen, wenn die Zeilen auseinander stehen. Die empfohlene Zeilenhöhe liegt bei etwa 1,5 – 2 (doppelter Zeilenabstand). Um unsere Zeilen auf 1,6-mal die Höhe der Schrift zu setzen, würden wir verwenden:

p {
  line-height: 1.6;
}

Wenn wir dies auf die <p>-Elemente in unserem Beispiel anwenden, hätten wir folgendes Ergebnis:

Buchstaben- und Wortabstand

Die letter-spacing und word-spacing-Eigenschaften ermöglichen es Ihnen, den Abstand zwischen Buchstaben und Worten in Ihrem Text festzulegen. Sie werden diese nicht sehr häufig verwenden, könnten aber ein Bedürfnis dafür finden, um einen spezifischen Look zu erzielen oder die Lesbarkeit einer besonders dichten Schriftart zu verbessern. Sie können die meisten Längeneinheiten annehmen.

Zur Veranschaulichung könnten wir einen Wort- und Buchstabenabstand auf die erste Zeile jedes <p>-Elements in unserem HTML-Beispiel mit:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

Dies rendert unser HTML wie folgt:

Andere interessante Eigenschaften

Die obigen Eigenschaften geben Ihnen eine Vorstellung davon, wie man beginnt, Text auf einer Webseite zu gestalten, aber es gibt viel mehr Eigenschaften, die Sie verwenden könnten. Wir wollten hier nur die wichtigsten abdecken. Sobald Sie sich daran gewöhnt haben, diese oben genannten zu verwenden, sollten Sie auch die folgenden erkunden:

Schriftartenstile:

• font-variant: Zwischen Small Caps und normalen Schriftalternativen wechseln.
• font-kerning: Schrift-Kerning-Optionen ein- und ausschalten.
• font-feature-settings: Verschiedene OpenType Schriftmerkmale ein- und ausschalten.
• font-variant-alternates: Die Verwendung alternativer Glyphen für eine gegebene Schriftart steuern.
• font-variant-caps: Die Verwendung alternativer Großbuchstaben-Glyphen steuern.
• font-variant-east-asian: Die Nutzung alternativer Glyphen für ostasiatische Schriftarten wie Japanisch und Chinesisch steuern.
• font-variant-ligatures: Steuern, welche Ligaturen und kontextabhängige Formen in Text verwendet werden.
• font-variant-numeric: Die Nutzung alternativer Glyhen für Ziffern, Brüche und Ordnungszeichen steuern.
• font-variant-position: Steuerung der Nutzung von alternativen Glyphen in kleineren Größen, positioniert als hochgestellt oder tiefgestellt.
• font-size-adjust: Die visuelle Größe der Schrift unabhängig von ihrer tatsächlichen Schriftgröße anpassen.
• font-stretch: Zwischen möglichen alternativen gestreckten Versionen einer bestimmten Schriftart wechseln.
• text-underline-position: Die Position von durch text-decoration-line bestimmte Unterstreichungen festlegen.
• text-rendering: Versuchen, einige Textdarstellungsoptimierungen durchzuführen.

Textlayout-Stile:

• text-indent: Bestimmen, wie viel horizontaler Platz vor dem Beginn der ersten Zeile des Textinhalts gelassen wird.
• text-overflow: Definieren, wie nicht angezeigter überschüssiger Inhalt den Nutzern signalisiert wird.
• white-space: Definieren, wie Leerzeichen und damit verbundene Zeilenumbrüche innerhalb des Elements gehandhabt werden.
• word-break: Bestimmen, ob Zeilen innerhalb von Worten gebrochen werden sollen.
• direction: Die Textausrichtung definieren. (Dies hängt von der Sprache ab, und normalerweise ist es besser, HTML dies zu überlassen, da es mit dem Textinhalt gekoppelt ist.)
• hyphens: Silbentrennung für unterstützte Sprachen ein- und auschalten.
• line-break: Zeilenumbrüche für asiatische Sprachen lockern oder verstärken.
• text-align-last: Definieren, wie die letzte Zeile eines Blocks oder einer Zeile, kurz vor einem erzwungenen Zeilenumbruch, ausgerichtet wird.
• text-orientation: Die Orientierung des Textes in einer Zeile definieren.
• overflow-wrap: Bestimmen, ob der Browser Zeilen innerhalb von Wörtern brechen darf, um Überlauf zu verhindern.
• writing-mode: Bestimmen, ob Textzeilen horizontal oder vertikal angelegt werden und in welcher Richtung sie voranschreiten.

Einheitliche Schrift

Viele Schriftarteigenschaften können auch über die Kurzschreibweise font gesetzt werden. Diese sind in folgender Reihenfolge geschrieben: font-style, font-variant, font-weight, font-stretch, font-size, line-height, und font-family.

Unter all diesen Eigenschaften sind nur font-size und font-family erforderlich, wenn die font-Kurzschreibweise verwendet wird.

Ein Schrägstrich muss zwischen den font-size und line-height Eigenschaften gesetzt werden.

Ein vollständiges Beispiel würde so aussehen:

font:
  italic normal bold normal 3em/1.5 "Helvetica",
  "Arial",
  sans-serif;

Mit Text-Stilgestaltung experimentieren

OK, jetzt sind Sie dran. Für diese Aufgabe haben wir keine spezifischen Übungen für Sie. Wir möchten Sie einfach dazu ermutigen, einige Schrift-/Textlayout-Eigenschaften auszuprobieren. Schauen Sie selbst, was Sie sich einfallen lassen können!

1. Klicken Sie auf "Abspielen" im folgenden Codeblock, um das Beispiel im MDN-Playground zu bearbeiten.
2. Fügen Sie einige Deklarationen zur bereitgestellten leeren p { }-Regel hinzu, um das Styling des bereitgestellten Textes zu ändern. Seien Sie so kreativ, wie Sie möchten.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mithilfe der Zurücksetzen-Schaltfläche im MDN-Playground zurücksetzen. Verwenden Sie die vorherigen Abschnitte im Artikel, um weitere Informationen zu den Schrift- und Textstilen zu finden, die Sie festlegen können.

<p>Some sample text for your delight</p>

p {

}

Zusammenfassung

Wir hoffen, Sie haben es genossen, mit Texten in diesem Artikel zu spielen! Der nächste Artikel wird Ihnen alles vermitteln, was Sie über das Stylen von HTML-Listen wissen müssen.

Siehe auch

• Alles über die CSS-Schriftfamilieneigenschaft, explainers.dev
• Web-sichere Schriftarten, Scrimba ^{MDN-Lernpartner}

• Übersicht: CSS-Textgestaltung
• Weiter