Grundlegende Text- und Schriftstilierung

Text innerhalb eines Elements wird im Inhaltsbereich des Elements angeordnet. 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 zur nächsten Zeile hinunter und fließt erneut bis zum Ende. Dieses Muster wiederholt sich, bis der gesamte Inhalt im Kasten platziert wurde. Textelemente verhalten sich dabei im Wesentlichen wie eine Reihe von Inline-Elementen, die auf nebeneinanderliegenden Zeilen angeordnet werden und erst am Ende der Zeile oder manuell durch das <br>-Element Zeilenumbrüche erzeugen.

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

• Schriftstile: Eigenschaften, die die Schrift eines Textes betreffen, z.B. welche Schrift angewendet wird, deren Größe und ob sie fett, kursiv usw. ist.
• Textlayout-Stile: Eigenschaften, die den Abstand und andere Layoutmerkmale des Textes beeinflussen und Manipulationen wie den Abstand zwischen Zeilen und Buchstaben sowie die Ausrichtung des Textes im Inhaltsbereich ermöglichen.

Lassen Sie uns direkt zu den Eigenschaften für die Schriftgestaltung übergehen. In diesem Beispiel wenden wir einige CSS-Eigenschaften auf das folgende HTML-Beispiel an:

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

Die color-Eigenschaft legt die Farbe des Vordergrundinhalts der ausgewählten Elemente fest, was in der Regel der Text ist, aber auch einige andere Dinge umfassen kann, wie z.B. eine Unter- oder Überstreichung, die mit der text-decoration-Eigenschaft auf Text angewendet wird.

Das color-Attribut kann jede CSS-Farbeinheit annehmen, zum Beispiel:

p {
  color: red;
}

Dies bewirkt, dass die Absätze rot werden, anstatt wie im Standardbrowser schwarz, so wie hier:

Um eine andere Schrift für Ihren Text festzulegen, verwenden Sie die font-family-Eigenschaft — diese ermöglicht es Ihnen, eine Schriftart (oder eine Liste von Schriftarten) anzugeben, die der Browser auf die ausgewählten Elemente anwenden soll. Der Browser wendet eine Schriftart nur an, wenn sie auf dem Computer verfügbar ist, auf dem die Website aufgerufen wird; wenn nicht, verwendet er einfach eine Standardschriftart des Browsers. Ein einfaches Beispiel sieht so aus:

p {
  font-family: Arial;
}

Dies würde bewirken, dass alle Absätze auf einer Seite die Schrift "arial" annehmen, die auf jedem Computer zu finden ist.

Websichere Schriftarten

Da wir gerade über die Verfügbarkeit von Schriftarten sprechen: Es gibt nur eine begrenzte Anzahl von Schriftarten, die im Allgemeinen auf allen Systemen verfügbar sind und daher ohne große Bedenken verwendet werden können. Diese sind die sogenannten websicheren Schriftarten.

Meistens möchten wir als Webentwickler die Schriftarten, die zur Anzeige unserer Textinhalte verwendet werden, spezifischer kontrollieren. Das Problem besteht darin, einen Weg zu finden, um zu wissen, welche Schriftart auf dem Computer verfügbar ist, der unsere Webseiten anzeigt. Es ist nicht möglich, dies in jedem Fall zu wissen, aber die websicheren Schriftarten sind bekannt dafür, auf fast allen Instanzen der meistgenutzten Betriebssysteme (Windows, macOS, die gängigsten Linux-Distributionen, Android und iOS) verfügbar zu sein.

Die Liste der tatsächlich websicheren Schriftarten wird sich im Lauf der Weiterentwicklung der Betriebssysteme ändern, aber es ist vernünftig zu erwarten, dass zumindest die folgenden Schriftarten als websicher gelten (viele von ihnen wurden in den späten 90er und frühen 2000er Jahren durch die Microsoft-Initiative Core fonts for the Web populär gemacht):

Standard-Schriften

CSS definiert fünf allgemeine Namen für Schriftarten: serif, sans-serif, monospace, cursive und fantasy. Diese sind sehr allgemein, und die exakte Schriftart, die bei diesen allgemeinen Namen verwendet wird, kann zwischen den einzelnen Browsern und Betriebssystemen, auf denen sie angezeigt werden, variieren. Sie stellen ein Worst-Case-Szenario dar, bei dem der Browser sein Bestes versucht, eine optisch passende Schrift zu liefern. serif, sans-serif, und monospace sind ziemlich vorhersehbar und sollten etwas Angemessenes bieten. Hingegen sind cursive und fantasy weniger vorhersehbar, und wir empfehlen, sie sehr sorgfältig und testweise zu verwenden.

Die fünf Namen sind wie folgt definiert:

Mein großer roter Elefant

body {
  font-family: serif;
}

Mein großer roter Elefant

body {
  font-family: sans-serif;
}

Mein großer roter Elefant

body {
  font-family: monospace;
}

Mein großer roter Elefant

body {
  font-family: cursive;
}

Mein großer roter Elefant

body {
  font-family: fantasy;
}

Schriftstapel

Da Sie die Verfügbarkeit der Schriftarten, die Sie auf Ihren Webseiten verwenden möchten, nicht garantieren können (selbst eine Web-Schriftart könnte aus irgendeinem Grund fehlschlagen), können Sie einen Schriftstapel angeben, sodass der Browser mehrere Schriftarten zur Auswahl hat. Dies beinhaltet einen font-family-Wert, der aus mehreren durch Kommas getrennten Schriftnamen besteht, z.B.,

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

In einem solchen Fall beginnt der Browser am Anfang der Liste und prüft, ob diese Schriftart auf dem Rechner verfügbar ist. Wenn sie verfügbar ist, wird sie auf die ausgewählten Elemente angewendet. Wenn nicht, geht es zur nächsten Schriftart weiter, und so weiter.

Es ist eine gute Idee, am Ende des Stapels einen geeigneten allgemeinen Schriftartnamen anzugeben, damit der Browser zumindest etwas Ungefähres bieten kann, sollte keine der aufgelisteten Schriftarten verfügbar sein. Um diesen Punkt zu betonen: Absätze erhalten die standardmäßige serifenfreie Standardschrift des Browsers, wenn keine andere Option verfügbar ist — was normalerweise Times New Roman ist — dies ist nicht gut für eine serifenfreie Schriftart!

Ein font-family-Beispiel

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

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

Das Ergebnis sieht nun so aus:

In unserem vorherigen Modul CSS-Werte und -Einheiten haben wir Längen- und Größeneinheiten überprüft. Die Schriftgröße (festgelegt mit der font-size-Eigenschaft) kann Werte annehmen, die in den meisten dieser Einheiten (und anderen, wie Prozentangaben) gemessen werden; die am häufigsten verwendeten Einheiten zur Textgrößenbestimmung sind jedoch:

• px (Pixel): Anzahl der Pixel, die der Text hoch sein soll. Dies ist eine absolute Einheit — sie ergibt in nahezu jeder Situation denselben endgültigen berechneten Wert für die Schrift auf der Seite.
• ems: 1 em entspricht der Schriftgröße, die auf das übergeordnete Element des aktuell gestalteten Elements angewendet wird (genauer gesagt der Breite eines Großbuchstaben M im übergeordneten Element). Dies kann knifflig sein, wenn Sie viele verschachtelte Elemente mit unterschiedlichen Schriftgrößen haben, aber es ist machbar, wie Sie unten sehen werden. Warum sich die Mühe machen? Es ist ziemlich natürlich, sobald Sie sich daran gewöhnt haben, und Sie können em verwenden, um alles zu vergrößern, nicht nur Text. Sie können eine ganze Website in em skalieren, was die Wartung erleichtert.
• rems: Diese funktionieren wie em, außer dass 1 rem der Schriftgröße entspricht, die auf das Root-Element des Dokuments (d.h. <html>) angewendet wird, nicht dem übergeordneten Element. Dies vereinfacht die Berechnung Ihrer Schriftgrößen erheblich.

Die font-size eines Elements wird von dessen übergeordnetem Element übernommen. Dies beginnt alles mit dem Stammes-Element des gesamten Dokuments — <html> — dessen Standard-font-size auf 16px über Browser hinweg gesetzt ist. Jeder Absatz (oder ein anderes Element, dem keine abweichende Größe vom Browser zugewiesen wurde) im Stammes-Element hat eine endgültige Größe von 16px. Andere Elemente können andere Standardgrößen haben. Zum Beispiel hat ein h1-Element standardmäßig eine Größe von 2em festgelegt, die dann eine endgültige Größe von 32px ergibt.

Es wird komplizierter, wenn Sie anfangen, die Schriftgröße verschachtelter Elemente zu ändern. Zum Beispiel, wenn Sie ein <article>-Element auf Ihrer Seite haben und dessen font-size auf 1.5 em setzen würden (was in einer endgültigen Größe von 24 px berechnet wird), und dann wünschen, dass die Absätze innerhalb der <article>-Elemente eine berechnete Schriftgröße von 20 px haben sollen, 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 dessen em-Wert auf 20/24, also 0.83333333 em, setzen. Die Mathematik kann kompliziert sein, also müssen Sie vorsichtig sein, wie Sie Dinge gestalten. Es ist am besten, rem zu verwenden, wo immer Sie können, um die Dinge einfach zu halten, und vermeiden Sie, die font-size von Container-Elementen soweit wie möglich zu setzen.

CSS bietet vier allgemeine Eigenschaften, um die visuelle Gewichtung/Betonung von Text zu ändern:

• font-style: Wird verwendet, um kursiven Text ein- oder auszuschalten. Die möglichen Werte sind wie folgt (Sie werden dies selten verwenden, es sei denn, Sie möchten aus irgendeinem Grund eine kursive Gestaltung deaktivieren):

  • normal: Setzt den Text auf die normale Schrift (deaktiviert vorhandene Kursivschrift).
  • italic: Setzt den Text so, dass er die kursive Version der Schrift verwendet, falls verfügbar; wenn nicht, wird Kursivschrift durch Schrägschrift simuliert.
  • oblique: Setzt den Text so, dass er eine simulierte Version einer kursiven Schrift verwendet, die durch Schrägstellen der normalen Version erstellt wurde.

• font-weight: Legt fest, wie fett der Text ist. Es gibt viele verfügbare Werte, wenn Sie viele Schriftvarianten zur Verfügung haben (wie -light, -normal, -bold, -extrabold, -black usw.), aber realistisch werden Sie selten etwas davon außer normal und bold verwenden:

  • normal, bold: Normales und fettes Schriftgewicht.
  • lighter, bolder: Setzt die Fettschrift des aktuellen Elements eine Stufe leichter oder schwerer als die des Elternelements.
  • 100 – 900: Numerische Gewichtswerte, die eine feinere Steuerung als die oben genannten Schlüsselwörter ermöglichen, falls nötig.

• text-transform: Ermöglicht es Ihnen, Ihre Schrift zu transformieren. Die Werte sind:

  • none: Verhindert jegliche Transformation.
  • uppercase: Wandelt den gesamten Text in Großbuchstaben um.
  • lowercase: Wandelt den gesamten Text in Kleinbuchstaben um.
  • capitalize: Wandelt alle Wörter so um, dass der erste Buchstabe großgeschrieben wird.
  • full-width: Wandelt alle Glyphen um, sodass sie innerhalb eines festen rechteckigen Felds geschrieben werden, ähnlich wie bei einer Schriftart mit fester Breite, sodass beispielsweise lateinische Zeichen mit asiatischen Schriftzeichen (wie Chinesisch, Japanisch, Koreanisch) ausgerichtet werden können.

• text-decoration: Setzt/entfernt Textdekorationen auf Schriften (Sie werden dies hauptsächlich verwenden, um die standardmäßige Unterstreichung bei Links beim Styling zu entfernen). Die verfügbaren Werte sind:

  • none: Hebt etwaige vorhandene Textdekorationen auf.
  • underline: Unterstreicht den Text.
  • overline: Gibt dem Text eine Linie darüber.
  • line-through: Gibt dem Text einen durchgestrichenen Strich.

  Sie sollten beachten, dass text-decoration mehrere Werte auf einmal annehmen kann, wenn Sie mehrere Dekorationen gleichzeitig hinzufügen möchten, beispielsweise text-decoration: underline overline. Beachten Sie auch, dass text-decoration eine Abkürzungseigenschaft 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, zum Beispiel: text-decoration: line-through red wavy.

Lassen Sie uns ein paar dieser Eigenschaften zu 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 so aus:

Sie können Ihrem Text Schatten hinzufügen, indem Sie die text-shadow-Eigenschaft verwenden. Diese Eigenschaft 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 Versatz des Schattens vom Originaltext — diese Eigenschaft kann die meisten verfügbaren CSS-Längen- und Größeneinheiten annehmen, aber am häufigsten werden Sie px verwenden; positive Werte verschieben den Schatten nach rechts, negative nach links. Dieser Wert muss angegeben werden.
2. Der vertikale Versatz des Schattens vom Originaltext. Dieser verhält sich ähnlich wie der horizontale Versatz, außer dass er den Schatten nach oben/unten verschiebt, nicht nach links/rechts. Dieser Wert muss angegeben werden.
3. Der Unschärferadius: Ein höherer Wert bedeutet, dass der Schatten weiter verteilt wird. Wenn dieser Wert nicht angegeben wird, wird er standardmäßig auf 0 gesetzt, was bedeutet, dass keine Unschärfe vorhanden ist. Diese Eigenschaft kann die meisten verfügbaren CSS-Längen- und Größeneinheiten annehmen.
4. Die Basisfarbe des Schattens, die jede CSS-Farbeinheit annehmen kann. Wenn sie nicht angegeben wird, wird sie standardmäßig auf currentColor gesetzt, d.h. die Schattenfarbe wird von der color-Eigenschaft des Elements übernommen.

Mehrfache Schatten

Sie können demselben Text mehrere Schatten hinzufügen, indem Sie mehrere Schattenwerte durch Kommas getrennt aufführen, beispielsweise:

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

Wenn wir dies auf das <h1>-Element in unserem Tommy The Cat-Beispiel anwenden, würden wir folgendes Ergebnis erzielen:

Nach der Betrachtung der grundlegenden Schrifteigenschaften werfen wir einen Blick auf Eigenschaften, die das Textlayout beeinflussen können.

Die text-align-Eigenschaft wird verwendet, um zu steuern, wie Text innerhalb seines umschließenden Inhaltsbereichs ausgerichtet wird. Die verfügbaren Werte sind unten aufgelistet. Sie funktionieren im Wesentlichen genauso wie in einer normalen Textverarbeitungsanwendung:

• left: Linksbündigt den Text.
• right: Rechtsbündigt den Text.
• center: Zentriert den Text.
• justify: Streckt den Text, variiert die Lücken zwischen den Wörtern, sodass alle Textzeilen 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 möchten, sollten Sie auch über die Verwendung eines anderen von zusammen nachdenken, wie hyphens, um einige der längeren Wörter über die Zeilen zu trennen.

Wenn wir text-align: center; auf das <h1> in unserem Beispiel anwenden, würden wir folgendes Ergebnis erzielen:

h1 {
  text-align: center;
}

Die line-height-Eigenschaft legt die Höhe jeder Textzeile fest. Diese Eigenschaft kann nicht nur die meisten Längen- und Größeneinheiten annehmen, sondern auch einen einheitenlosen Wert, der als Multiplikator wirkt und allgemein als die beste Option gilt. Mit einem einheitenlosen Wert wird die font-size multipliziert und ergibt die line-height. Fließtext sieht im Allgemeinen schöner aus und ist leichter zu lesen, wenn die Zeilen weiter auseinander liegen. Die empfohlene Zeilenhöhe liegt bei etwa 1,5 – 2 (doppelt spaced). Um unsere Textlinien auf das 1,6-fache der Höhe der Schrift festzulegen, würden wir verwenden:

p {
  line-height: 1.6;
}

Die Anwendung auf die <p>-Elemente in unserem Beispiel würde folgendes Ergebnis liefern:

Die letter-spacing- und word-spacing-Eigenschaften ermöglichen es Ihnen, den Abstand zwischen Buchstaben und Wörtern in Ihrem Text festzulegen. Sie werden dies nicht oft verwenden, könnten jedoch einen Zweck finden, um ein bestimmtes Aussehen zu erzielen oder die Lesbarkeit einer besonders dichten Schrift zu verbessern. Sie können die meisten Längeneinheiten annehmen.

Um dies zu veranschaulichen, könnten wir etwas Wort- und Buchstabensperrung auf die erste Zeile jedes <p>-Elements in unserem HTML-Beispiel anwenden mit:

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

Das rendert unser HTML als:

Die obigen Eigenschaften geben Ihnen eine Vorstellung davon, wie Sie Text auf einer Webseite gestalten können, es gibt jedoch noch viele andere Eigenschaften, die Sie verwenden könnten. Wir wollten hier nur die wichtigsten abdecken. Sobald Sie sich an die Verwendung der obigen gewöhnt haben, sollten Sie auch die folgenden erkunden:

Schriftstile:

• font-variant: Zwischen kleinen Großbuchstaben und normalen Schriftalternativen wechseln.
• font-kerning: Schriftkerning-Optionen ein- und ausschalten.
• font-feature-settings: Verschiedene OpenType-Schriftmerkmale ein- und ausschalten.
• font-variant-alternates: Steuert die Verwendung von alternativen Glyphen für eine gegebene Schriftart.
• font-variant-caps: Steuert die Verwendung von alternativen Großbuchstabenglyphen.
• font-variant-east-asian: Steuert die Verwendung von alternativen Glyphen für ostasiatische Schriften wie Japanisch und Chinesisch.
• font-variant-ligatures: Steuert, welche Ligaturen und kontextabhängigen Formen im Text verwendet werden.
• font-variant-numeric: Steuert die Verwendung von alternativen Glyphen für Zahlen, Brüche und Ordnungsmarkierungen.
• font-variant-position: Steuert die Verwendung von alternativen Glyphen in kleineren Größen, die als hochgestellt oder tiefgestellt positioniert sind.
• font-size-adjust: Passt die visuelle Größe der Schrift unabhängig von ihrer tatsächlichen Schriftgröße an.
• font-stretch: Zwischen möglichen Alternativen gestreckter Versionen einer gegebenen Schrift wechseln.
• text-underline-position: Gibt die Position von Unterstreichungen an, die mit dem text-decoration-line-Eigenschaft underline-Wert gesetzt wurden.
• text-rendering: Versucht, einige Textrendering-Optimierungen vorzunehmen.

Textlayout-Stile:

• text-indent: Gibt an, wie viel horizontaler Abstand vor dem Beginn der ersten Zeile des Textinhalts gelassen werden soll.
• text-overflow: Definiert, wie überfließender Inhalt, der nicht angezeigt wird, den Benutzern signalisiert wird.
• white-space: Definiert, wie Leerraum und zugehörige Zeilenumbrüche innerhalb des Elements gehandhabt werden.
• word-break: Gibt an, ob Zeilen innerhalb von Wörtern umbrochen werden sollen.
• direction: Definiert die Textrichtung. (Dies hängt von der Sprache ab, und in der Regel ist es besser, HTML dies handhaben zu lassen, da es mit dem Textinhalt verknüpft ist.)
• hyphens: Schaltet die Silbentrennung für unterstützte Sprachen ein und aus.
• line-break: Locker oder verstärkt den Zeilenumbruch für asiatische Sprachen.
• text-align-last: Definiert, wie die letzte Zeile eines Blocks oder einer Zeile, direkt vor einem erzwungenen Zeilenumbruch, ausgerichtet ist.
• text-orientation: Definiert die Orientierung des Textes in einer Zeile.
• overflow-wrap: Gibt an, ob der Browser innerhalb von Wörtern Zeilen umbrochen kann, um Überlauf zu verhindern.
• writing-mode: Definiert, ob Zeilen von Text horizontal oder vertikal angeordnet sind und die Richtung, in die nachfolgende Zeilen fließen.

Viele Schrifteigenschaften können auch durch die Abkürzungseigenschaft font festgelegt werden. Diese sind in der folgenden 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-Kurzform Eigenschaft verwendet wird.

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

Ein vollständiges Beispiel würde folgendermaßen aussehen:

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

OK, jetzt sind Sie an der Reihe. Für diese Aufgabe haben wir keine spezifischen Übungen für Sie. Wir möchten einfach nur, dass Sie mit einigen Schrift-/Textlayout-Eigenschaften herumspielen. Sehen Sie selbst, was Sie entwickeln können!

1. Klicken Sie auf "Play" im Codeblock unten, um das Beispiel im MDN Playground zu bearbeiten.
2. Fügen Sie einige Deklarationen zur bereitgestellten leeren p { }-Regel hinzu, um die Gestaltung des bereitgestellten Textes zu ändern. Seien Sie so kreativ, wie Sie wollen.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Beziehen Sie sich auf die vorherigen Abschnitte im Artikel, um weitere Informationen über die festgelegten Schrift- und Textstile zu finden.

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

p {

}

Wir hoffen, Ihnen hat das Experimentieren mit Text in diesem Artikel gefallen! Der nächste Artikel wird Ihnen alles bieten, was Sie über die Gestaltung von HTML-Listen wissen müssen.

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

• Übersicht: CSS zur Textgestaltung
• Weiter