Grundlegende Text- und Schriftgestaltung

Was gehört zur Textgestaltung in CSS?

Text innerhalb eines Elements wird innerhalb der Inhaltsbox des Elements positioniert. Er beginnt oben links im Inhaltsbereich (oder oben rechts im Fall von RTL-Sprachen) und fließt bis zum Ende der Zeile. Sobald das Ende erreicht ist, geht es zur nächsten Zeile und fließt wieder bis zum Ende. Dieses Muster wiederholt sich, bis der gesamte Inhalt in der Box platziert ist. Textinhalte verhalten sich effektiv wie eine Reihe von Inline-Elementen, die in benachbarten Linien angeordnet sind und keine Zeilenumbrüche erzeugen, bis das Ende der Zeile erreicht ist oder Sie manuell einen Umbruch mit dem <br>-Element erzwingen.

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

• Schriftstile: Eigenschaften, die die Schrift eines Textes beeinflussen, zum Beispiel welche Schrift angewendet wird, ihre Größe und ob sie fett, kursiv usw. ist.
• Textlayout-Stile: Eigenschaften, die den Abstand und andere Layoutmerkmale des Textes beeinflussen, und es ermöglichen, beispielsweise den Abstand zwischen Zeilen und Buchstaben zu manipulieren und wie der Text innerhalb der Inhaltsbox ausgerichtet wird.

Schriften

Gehen wir direkt zu den Eigenschaften der Schriftgestaltung über. 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 legt die Farbe des Vordergrundinhalts der ausgewählten Elemente fest, was normalerweise der Text ist, aber auch ein paar andere Dinge umfassen kann, wie z.B. eine Unter- oder Überstreichung, die mit der text-decoration-Eigenschaft auf den Text gesetzt wird.

color kann jede CSS-Farbeinheit akzeptieren, zum Beispiel:

p {
  color: red;
}

Dies bewirkt, dass die Absätze rot werden, anstatt dem Standard-Browserstandard von Schwarz 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 eine Liste von Schriftarten) anzugeben, die der Browser auf die ausgewählten Elemente anwenden soll. Der Browser wendet nur eine Schriftart an, wenn sie auf dem Gerät, von dem aus auf die Website zugegriffen wird, verfügbar ist; wenn nicht, verwendet er einfach eine Browser- Standardschrift. Ein einfaches Beispiel sieht so aus:

p {
  font-family: "Arial";
}

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

Web-sichere Schriften

Apropos Schriftverfügbarkeit, es gibt nur eine bestimmte Anzahl von Schriften, die allgemein auf allen Systemen verfügbar sind und daher ohne große Sorgen verwendet werden können. Diese sind die sogenannten web-sicheren Schriften.

Meistens wollen wir als Webentwickler eine spezifischere Kontrolle über die Schriften, die zum Anzeigen unserer Textinhalte verwendet werden. Das Problem besteht darin, herauszufinden, welche Schrift auf dem Computer verfügbar ist, der unsere Webseiten anzeigt. Es gibt keinen Weg, dies in jedem Fall zu wissen, aber die web-sicheren Schriften sind bekanntlich in nahezu allen Instanzen der meistgenutzten Betriebssysteme (Windows, macOS, den häufigsten Linux-Distributionen, Android und iOS) verfügbar.

Die Liste der tatsächlichen web-sicheren Schriften wird sich mit der Evolution der Betriebssysteme ändern, aber es ist vernünftig, die folgenden Schriften als web-sicher zu betrachten, zumindest vorerst (viele von ihnen wurden dank der Microsoft Kernschriften für das Web -Initiative in den späten 90er und frühen 2000er Jahren populär gemacht):

Standardschriften

CSS definiert fünf generische Namen für Schriften: serif, sans-serif, monospace, cursive und fantasy. Diese sind sehr generisch und das genaue Schriftbild, das von diesen generischen Namen verwendet wird, kann sich zwischen jedem Browser und jedem Betriebssystem, auf dem sie angezeigt werden, unterscheiden. Es repräsentiert ein Worst-Case-Szenario, bei dem der Browser sein Bestes tun wird, um eine Schriftart zu liefern, die angemessen aussieht. serif, sans-serif und monospace sind ziemlich vorhersehbar und sollten etwas Angemessenes bieten. Andererseits sind cursive und fantasy weniger vorhersehbar und wir empfehlen, diese sehr vorsichtig zu verwenden und beim Testen dabei.

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 die Verfügbarkeit der Schriften, die Sie auf Ihren Webseiten verwenden möchten, nicht garantieren können (selbst eine Web-Schrift könnte aus irgendeinem Grund fehlschlagen), können Sie einen Schriftstapel angeben, damit der Browser mehrere Schriften zur Auswahl hat. Dies beinhaltet einen font-family-Wert, der aus mehreren durch Kommas getrennten Schriftarten 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 Computer verfügbar ist. Wenn ja, wendet er diese Schriftart auf die ausgewählten Elemente an. Wenn nicht, fährt er mit der nächsten Schriftart fort und so weiter.

Es ist eine gute Idee, einen geeigneten generischen Schriftartnamen am Ende des Stapels anzugeben, damit der Browser, wenn keine der aufgeführten Schriftarten verfügbar ist, zumindest etwas etwa passend bereitstellen kann. Um diesen Punkt zu betonen, erhalten Absätze die Serifenschrift des Browsers, wenn keine andere Option verfügbar ist – was normalerweise Times New Roman ist – das ist keine gute Wahl für eine serifenlose Schrift!

Ein Beispiel für font-family

Fügen wir unserem vorherigen Beispiel etwas hinzu, indem wir den Absätzen eine serifenlose Schrift zuweisen:

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

Dies ergibt das folgende Ergebnis:

Schriftgröße

Im Artikel CSS-Werte und -Einheiten des vorherigen Moduls haben wir Länge und Maßstäbeinheiten überprüft. Die Schriftgröße (eingestellt mit der font-size-Eigenschaft) kann Werte annehmen, die in den meisten dieser Einheiten (und andere, wie Prozentsätze) gemessen werden; jedoch sind die am häufigsten verwendeten Einheiten zur Größenänderung von Text:

• px (Pixel): Die Anzahl der Pixel hoch, die Sie den Text haben möchten. Dies ist eine absolute Einheit – sie führt in fast jeder Situation zum selben endgültigen berechneten Wert für die Schrift auf der Seite.
• em: 1 em ist gleich der Schriftgröße, die auf das Elternelement des aktuellen Elements, das wir gestalten, gesetzt ist (genauer gesagt die Breite eines Großbuchstabens M, der sich im Elternelement befindet). Dies kann kompliziert werden, 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 ganz natürlich, wenn Sie sich daran gewöhnt haben, 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 vereinfacht.
• rem: Diese funktionieren genauso wie em, außer dass 1 rem der Schriftgröße entspricht, die auf das Wurzelelement des Dokuments gesetzt ist (d.h. <html>), nicht dem Elternelement. Dies erleichtert die Berechnung Ihrer Schriftgrößen erheblich.

Die font-size eines Elements wird von diesem Element von seinem Elternelement geerbt. Das alles beginnt mit dem Wurzelelement des gesamten Dokuments — <html> — dessen Standard-font-size in allen Browsern auf 16px eingestellt ist. Jeder Absatz (oder ein anderes Element, das keine andere Größe eingestellt hat) im Wurzelelement hat eine endgültige Größe von 16px. Andere Elemente können unterschiedliche Standardgrößen haben. Zum Beispiel hat ein h1-Element standardmäßig eine Größe von 2em, also wird es eine endgültige Größe von 32px haben.

Die Dinge werden komplizierter, wenn Sie die Schriftgröße von verschachtelten Elementen ändern. Zum Beispiel, wenn Sie ein <article>-Element auf Ihrer Seite hätten und dessen font-size auf 1,5 em setzen würden (was eine endgültige Größe von 24 px hätte), und dann wollten, dass die Absätzen innerhalb der <article>-Elemente eine berechnete Schriftgröße von 20 px hätten, 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 seinen em-Wert auf 20/24 oder 0,83333333 em setzen. Die Mathematik kann kompliziert sein, deshalb müssen Sie vorsichtig sein, wie Sie die Dinge gestalten. Es ist am besten, rem zu verwenden, wo Sie können, um die Dinge einfach zu halten, und die Einstellung der font-size von Container-Elementen zu vermeiden, wo möglich.

Schriftstil, Schriftgewicht, Textumwandlung und Textdekoration

CSS bietet vier häufig verwendete Eigenschaften, um das visuelle Gewicht/den visuellen Akzent von Text zu ändern:

• font-style: Wird verwendet, um Kursivschrift ein- oder auszuschalten. Mögliche Werte sind wie folgt (Sie werden dies selten verwenden, es sei denn, Sie möchten aus irgendeinem Grund einige Kursivstylings deaktivieren):

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

• font-weight: Legt fest, wie fett der Text ist. Dies hat viele verfügbare Werte für den Fall, dass viele Schriftvarianten verfügbar sind (wie -light, -normal, -bold, -extrabold, -black usw.), aber in der Praxis werden Sie selten andere Werte als normal und bold verwenden:

  • normal, bold: Normaler und fetter Schriftgrad.
  • lighter, bolder: Setzt die Fettheit des aktuellen Elements auf einen Schritt heller oder schwerer als die Fettheit seines Elternelements.
  • 100 – 900: Numerische Fettigkeitswerte, die feinere Kontrolle als die obigen Schlüsselwörter bieten, falls erforderlich.

• text-transform: Ermöglicht es Ihnen, Ihren Text umzuwandeln. Zu den Werten gehören:

  • none: Verhindert jegliche Transformation.
  • uppercase: Verwandelt den gesamten Text in Großbuchstaben.
  • lowercase: Verwandelt den gesamten Text in Kleinbuchstaben.
  • capitalize: Verwandelt alle Wörter so, dass der erste Buchstabe großgeschrieben wird.
  • full-width: Verwandelt alle Glyphen so, dass sie in ein festes breites Quadrat passen, ähnlich einer Monospace-Schrift, und ermöglicht das Ausrichten von beispielsweise lateinischen Zeichen zusammen mit asiatischen Spracheglyphen (wie Chinesisch, Japanisch, Koreanisch).

• text-decoration: Setzt/hobesetzt Textdekorationen an Schriften (meistens verwenden Sie dies, um die standardmäßige Unterstreichung bei Links zu entfernen, wenn Sie diese gestalten). Verfügbare Werte sind:

  • none: Entfernt alle vorhandenen Textdekorationen.
  • underline: Unterstreicht den Text.
  • overline: Setzt einen Überstrich über den Text.
  • line-through: Setzt einen Durchstreich-Strich über den Text.

  Sie sollten beachten, dass text-decoration mehrere Werte gleichzeitig akzeptieren kann, wenn Sie mehrere Dekorationen gleichzeitig hinzufügen möchten, zum Beispiel text-decoration: underline overline. Beachten Sie auch, dass text-decoration eine Kurzform 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.

Sehen wir uns an, wie wir einige dieser Eigenschaften zu unserem Beispiel hinzufügen können:

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:

Textschlagschatten

Sie können Schlagschatten auf Ihren Text anwenden, indem Sie die text-shadow-Eigenschaft verwenden. 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 Versatz des Schattens vom ursprünglichen Text – dies kann die meisten verfügbaren CSS-Längen- und Maßstäbeinheiten akzeptieren, aber Sie werden meistens px verwenden; positive Werte verschieben den Schatten nach rechts und negative Werte nach links. Dieser Wert muss enthalten sein.
2. Der vertikale Versatz des Schattens vom ursprünglichen Text. Dies verhält sich ähnlich wie der horizontale Versatz, außer dass es den Schatten nach oben/unten verschiebt, nicht links/rechts. Dieser Wert muss enthalten sein.
3. Der Unschärferadius: Ein höherer Wert bedeutet, dass der Schatten weiter gestreut wird. Wenn dieser Wert nicht enthalten ist, wird er auf 0 gesetzt, was keine Unschärfe bedeutet. Dies kann die meisten verfügbaren CSS-Längen- und Maßgrößeneinheiten akzeptieren.
4. Die Grundfarbe des Schattens, die jede CSS-Farbeinheit annehmen kann. Wenn sie nicht eingeschlossen ist, wird sie standardmäßig auf currentColor gesetzt, d.h. die Farbe des Schattens wird von der color-Eigenschaft des Elements übernommen.

Mehrere Schatten

Sie können mehrere Schatten auf denselben Text anwenden, indem Sie mehrere durch Kommas getrennte Schattenwerte angeben, zum Beispiel:

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, erhielten wir dies:

Textlayout

Mit den grundlegenden Schriftarten-Eigenschaften haben wir nun die Möglichkeiten, die Textgestaltung zu beeinflussen.

Textausrichtung

Die text-align-Eigenschaft wird verwendet, um zu steuern, wie Text innerhalb seiner enthaltenen Inhaltsbox ausgerichtet wird. Die verfügbaren Werte sind unten aufgeführt. Sie funktionieren so ziemlich genau wie in einem normalen Textverarbeitungsprogramm:

• left: Linksbündiger Text.
• right: Rechtsbündiger Text.
• center: Zentrierter Text.
• justify: Der Text wird verteilt, indem die Abstände zwischen den Wörtern variiert werden, sodass alle Zeilen des Textes die gleiche Breite haben. Sie müssen dies sorgfältig verwenden – es kann schrecklich aussehen, insbesondere wenn es auf einen Absatz mit vielen langen Wörtern angewendet wird. Wenn Sie dies verwenden möchten, sollten Sie auch über die Verwendung von etwas Anderem nachdenken, wie hyphens, um einige der längeren Wörter über die Linien hinweg zu unterteilen.

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

h1 {
  text-align: center;
}

Zeilenhöhe

Die line-height-Eigenschaft legt die Höhe jeder Textzeile fest. Diese Eigenschaft kann nicht nur die meisten Längen- und Maßgrößeneinheiten annehmen, sondern auch einen einheitenlosen Wert, der als Multiplikator fungiert und im Allgemeinen als die beste Option angesehen wird. Mit einem einheitenlosen Wert wird die font-size multipliziert und es ergibt sich die line-height. Fließtext sieht im Allgemeinen schöner aus und ist leichter zu lesen, wenn die Zeilenabstände weiter auseinander liegen. Die empfohlene Zeilenhöhe liegt bei etwa 1,5 – 2 (doppelter Abstand). Um unsere Textzeilen auf das 1,6-fache der Höhe der Schriftart zu setzen, würden wir folgendermaßen vorgehen:

p {
  line-height: 1.6;
}

Wenn wir dies auf die <p>-Elemente in unserem Beispiel anwenden, würden wir diesen Effekt erzielen:

Buchstaben- und Wortabstand

Die letter-spacing- und word-spacing-Eigenschaften ermöglichen es, den Abstand zwischen Buchstaben und Wörtern in Ihrem Text festzulegen. Sie werden dies nicht sehr oft verwenden, könnten aber ein Konzept dafür entwickeln, um ein bestimmtes Aussehen zu erreichen oder um die Lesbarkeit eines besonders dichten Schriftbildes zu verbessern. Sie können die meisten Längeneinheiten annehmen.

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

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

Dies rendert unser HTML so:

Weitere Eigenschaften, die einen Blick wert sind

Die oben genannten Eigenschaften geben Ihnen eine Vorstellung davon, wie Sie textbasiertes Styling auf einer Webseite beginnen können, aber es gibt viele weitere Eigenschaften, die Sie verwenden könnten. Wir wollten hier nur die wichtigsten abdecken. Sobald Sie sich an die Verwendung der oben genannten gewöhnt haben, sollten Sie auch die folgenden erkunden:

Schriftstile:

• font-variant: Wechseln Sie zwischen Kapitälchen und normalen Schriftersetzungen.
• font-kerning: Schalten Sie die Schriftweite-Optionen ein und aus.
• font-feature-settings: Schalten Sie verschiedene OpenType-Schriftartenfunktionen ein und aus.
• font-variant-alternates: Kontrolle der Verwendung von alternativen Glyphen für eine gegebene Schriftart.
• font-variant-caps: Kontrolle der Verwendung von alternativen Buchstabenglyphen.
• font-variant-east-asian: Kontrolle der Verwendung von alternativen Glyphen für ostasiatische Schriften, wie Japanisch und Chinesisch.
• font-variant-ligatures: Kontrollieren, welche Ligaturen und kontextuellen Formen im Text verwendet werden.
• font-variant-numeric: Kontrolle der Verwendung von alternativen Glyphen für Zahlen, Brüche und Ordnungszahlen.
• font-variant-position: Kontrolle der Verwendung von alternativen Glyphen kleineren Formats, die als Hoch- oder Tiefstellung platziert sind.
• font-size-adjust: Passen Sie die visuelle Größe der Schrift unabhängig von ihrer tatsächlichen Schriftgröße an.
• font-stretch: Wechseln Sie zwischen möglichen alternativen gedehnten Versionen einer gegebenen Schriftart.
• text-underline-position: Geben Sie die Position von Unterstrichen an, die mit der text-decoration-line-Eigenschaft underline gesetzt wurden.
• text-rendering: Versuchen, einige Textdarstellungsoptimierungen durchzuführen.

Textlayout-Stile:

• text-indent: Geben Sie an, wie viel horizontaler Abstand vor dem Beginn der ersten Zeile des Textinhalts verbleiben soll.
• text-overflow: Definieren Sie, wie überlaufener Inhalt, der nicht angezeigt wird, den Benutzern signalisiert wird.
• white-space: Definieren Sie, wie Leerzeichen und damit verbundene Zeilenumbrüche innerhalb des Elements behandelt werden.
• word-break: Geben Sie an, ob Zeilen innerhalb von Wörtern unterbrochen werden sollen.
• direction: Definieren Sie die Textausrichtung. (Dies hängt von der Sprache ab und normalerweise ist es besser, HTML dies erledigen zu lassen, da es mit dem Textinhalt verknüpft ist.)
• hyphens: Schalten Sie Trennstriche für unterstützte Sprachen ein und aus.
• line-break: Begünstigen oder verringern Sie den Zeilenumbruch für asiatische Sprachen.
• text-align-last: Definieren Sie, wie die letzte Zeile eines Blocks oder eine Zeile, direkt vor einem erzwungenen Zeilenumbruch, ausgerichtet ist.
• text-orientation: Definieren Sie die Ausrichtung des Textes in einer Zeile.
• overflow-wrap: Geben Sie an, ob der Browser Zeilen innerhalb von Wörtern unterbrechen darf, um einen Überlauf zu verhindern.
• writing-mode: Geben Sie an, ob Textzeilen horizontal oder vertikal angeordnet sind und in welche Richtung aufeinanderfolgende Zeilen fließen.

Schrift-Kurzform

Viele Schrifteigenschaften können auch über die Kurzform-Eigenschaft font festgelegt werden. Diese werden 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-Kurzform-Eigenschaft verwendet wird.

Es muss ein Schrägstrich zwischen den font-size- und line-height-Eigenschaften eingefügt werden.

Ein vollständiges Beispiel würde so aussehen:

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

Spielen mit textbasiertem Styling

In Ordnung, jetzt sind Sie dran. Für diese Aufgabe haben wir keine spezifischen Übungen für Sie vorbereitet. Wir möchten einfach, dass Sie ein wenig mit einigen Schrift-/Textlayout-Eigenschaften experimentieren. Sehen Sie selbst, was Sie entwickeln können!

1. Klicken Sie auf "Play" im Code-Block unten, 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 mit der Zurücksetzen-Schaltfläche im MDN Playground löschen. Lesen Sie die vorherigen Abschnitte des Artikels, um mehr über die einstellbaren Schrift- und Textstile zu erfahren.

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

p {

}

Zusammenfassung

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

Siehe auch

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

• Übersicht: CSS-Textgestaltung
• Weiter