Grundlegende Text- und Schriftgestaltung

Text innerhalb eines Elements wird innerhalb des Inhaltsfelds des Elements dargestellt. Er beginnt oben links im Inhaltsbereich (oder oben rechts bei RTL-Spracheninhalten) und fließt bis zum Ende der Zeile. Sobald das Ende erreicht ist, springt er zur nächsten Zeile und fließt erneut bis zum Ende. Dieses Muster wiederholt sich, bis der gesamte Inhalt in das Feld 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 Zeilenende erreicht ist oder Sie einen Zeilenumbruch manuell mit dem <br>-Element erzwingen.

Die CSS-Eigenschaften zur Gestaltung von Text 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, ihre Größe und ob sie fett, kursiv usw. ist.
• Textlayoutstile: Eigenschaften, die die Abstände und anderen Layoutmerkmale des Textes betreffen, z.B. die Abstände zwischen Zeilen und Buchstaben sowie die Ausrichtung des Textes im Inhaltsfeld.

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 normalerweise der Text ist, aber auch andere Dinge umfassen kann, wie ein Unterstrich oder Überstrich auf Text, der mit der text-decoration-Eigenschaft platziert wird.

color kann jede CSS-Farbenheit akzeptieren, zum Beispiel:

p {
  color: red;
}

Dadurch werden die Absätze rot statt des standardmäßigen Schwarzes, wie man es im Browser voreingestellt sieht:

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 Schriften) anzugeben, die der Browser auf die ausgewählten Elemente anwenden soll. Der Browser wird nur eine Schriftart anwenden, wenn sie auf dem Computer, auf dem die Website aufgerufen wird, verfügbar ist; falls nicht, wird er einfach eine Browser-Standardschrift verwenden. Ein einfaches Beispiel sieht so aus:

p {
  font-family: Arial;
}

Dadurch würden alle Absätze auf einer Seite die Schriftart Arial annehmen, die auf jedem Computer zu finden ist.

Web-sichere Schriften

Was die Verfügbarkeit von Schriften betrifft, gibt es nur eine begrenzte Anzahl von Schriften, die im Allgemeinen auf allen Systemen verfügbar sind und daher ohne große Bedenken verwendet werden können. Dies sind die sogenannten web-sicheren Schriften.

Die Liste der tatsächlich web-sicheren Schriften wird sich ändern, wenn sich Betriebssysteme entwickeln, aber es ist vernünftig, die folgenden Schriften als derzeit sicher zu betrachten (viele von ihnen wurden durch die Microsoft-Initiative Core fonts for the Web in den späten 90er Jahren 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 durch diese generischen Namen verwendet wird, kann zwischen jedem Browser und jedem Betriebssystem, auf dem sie angezeigt werden, variieren. Es stellt ein worst case scenario dar, bei dem der Browser sein Bestes tut, um eine Schrift bereitzustellen, die angemessen aussieht. serif, sans-serif und monospace sind ziemlich vorhersehbar und sollten etwas Vernünftiges liefern. Andererseits sind cursive und fantasy weniger vorhersehbar, und wir empfehlen, sie sehr sorgfältig zu verwenden und währenddessen 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 die Verfügbarkeit der Schriften, die Sie auf Ihren Webseiten verwenden möchten, nicht garantieren können (selbst eine Webschrift könnte aus irgendeinem Grund fehlschlagen), können Sie einen Schriftstapel anbieten, damit der Browser mehrere Schriften 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 Schrift auf dem Computer verfügbar ist. Wenn dies der Fall ist, wendet er diese Schrift auf die ausgewählten Elemente an. Wenn nicht, geht er zur nächsten Schrift weiter und so weiter.

Es ist eine gute Idee, am Ende des Stapels eine geeignete generische Schriftart anzugeben, damit der Browser zumindest etwas passend Ähnliches bereitstellen kann, wenn keine der aufgeführten Schriften verfügbar ist. Um diesen Punkt zu betonen, erhalten Absätze die Standardschrift des Browsers - was normalerweise Times New Roman ist - wenn keine andere Option verfügbar ist, was für eine sans-serif Schrift nicht geeignet ist!

Ein Beispiel für die Schriftfamilie

Lassen Sie uns unser vorheriges Beispiel erweitern und den Absätzen eine sans-serif Schrift geben:

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

Dies ergibt das folgende Ergebnis:

In unserem vorherigen Modulartikel CSS-Werte und -Einheiten haben wir Längen- und Größeneinheiten durchgesehen. Die Schriftgröße (eingestellt mit der font-size-Eigenschaft) kann Werte annehmen, die in den meisten dieser Einheiten (und anderen, wie Prozentangaben) gemessen werden; jedoch sind die häufigsten Einheiten, die Sie zum Größen der Schriftarten verwenden werden:

• px (Pixel): Die Höhe, die Sie für den Text in Pixeln festlegen möchten. Dies ist eine absolute Einheit — sie führt in fast jeder Situation zu demselben endgültigen berechneten Wert auf der Seite.
• ems: 1 em entspricht der Schriftgröße, die auf das übergeordnete Element des aktuellen Elements, das wir gestalten, eingestellt ist (genauer gesagt, der Breite eines großen Buchstabens M, der im übergeordneten Element enthalten ist). Dies kann kompliziert werden, wenn Sie viele verschachtelte Elemente mit unterschiedlichen Schriftgrößen festgelegt haben, aber es ist machbar, wie Sie unten sehen werden. Warum sich die Mühe machen? Es ist ganz natürlich, sobald man sich daran gewöhnt hat, 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 erleichtert.
• rems: Diese funktionieren genau wie em, außer dass 1 rem der auf das Wurzelelement des Dokuments eingestellten Schriftgröße entspricht (d.h. <html>), nicht dem übergeordneten Element. Das macht die Mathematik zur Berechnung Ihrer Schriftgrößen viel einfacher.

Die font-size eines Elements wird von dem übergeordneten Element dieses Elements vererbt. Das Ganze beginnt mit dem Wurzelelement des gesamten Dokuments — <html> — dessen Standard font-size auf 16 px in den Browsern festgelegt ist. Jeder Absatz (oder ein anderes Element, für das keine andere Größe vom Browser festgelegt ist) innerhalb des Wurzelelements hat eine endgültige Größe von 16 px. Andere Elemente können unterschiedliche Standardgrößen haben. Zum Beispiel hat ein h1-Element standardmäßig eine Größe von 2 em, also hat es eine endgültige Größe von 32 px.

Die Dinge werden komplizierter, wenn Sie beginnen, die Schriftgröße von verschachtelten Elementen zu ändern. Zum Beispiel, wenn Sie ein <article>-Element auf Ihrer Seite haben und seine font-size auf 1,5 em festlegen (was auf eine Endgröße von 24 px berechnet wird), 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 seinen em-Wert auf 20/24 oder 0.83333333 em setzen. Die Mathematik kann kompliziert sein, also müssen Sie darauf achten, wie Sie die Dinge gestalten. Es ist am besten, wo möglich rem zu verwenden, um die Dinge einfach zu halten, und vermeiden Sie es, die font-size von Behälterelementen so weit wie möglich festzulegen.

CSS bietet vier gängige Eigenschaften, um das visuelle Gewicht/die Betonung von Text zu ändern:

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

  • normal: Setzt den Text auf die normale Schrift (macht vorhandene Kursivschreibweise aus).
  • italic: Setzt den Text auf die kursivierte Version der Schrift, falls verfügbar; andernfalls simuliert es die Kursivschrift mit oblique.
  • oblique: Setzt den Text auf eine simulierte Version einer kursive Schrift, die erstellt wird, indem die normale Version geneigt wird.

• font-weight: Legt fest, wie fett der Text ist. Dies hat viele verfügbare Werte, falls Sie viele Schriftvariationen verfügbar haben (wie -light, -normal, -bold, -extrabold, -black usw.), aber realistischerweise werden Sie nicht viele davon verwenden, außer normal und bold:

  • normal, bold: Normales und fettes Schriftgewicht.
  • lighter, bolder: Setzt das aktuelle Element auf eine Stufe leichter oder schwerer als das Schriftgewicht des übergeordneten Elements.
  • 100 – 900: Numerische Schriftstärkenwerte, die eine feinere Kontrolle als die oben genannten Schlüsselwörter bieten, falls erforderlich.

• text-transform: Ermöglicht es Ihnen, Ihre Schrift transformiert darzustellen. Werte umfassen:

  • none: Verhindert jegliche Transformation.
  • uppercase: Transformiert den gesamten Text zu Großbuchstaben.
  • lowercase: Transformiert den gesamten Text zu Kleinbuchstaben.
  • capitalize: Transformiert alle Wörter, damit der erste Buchstabe großgeschrieben wird.
  • full-width: Transformiert alle Zeichen, um innerhalb eines festen Quadrats geschrieben zu werden, ähnlich wie eine Monospace-Schrift, was die Ausrichtung von, z.B., lateinischen Zeichen zusammen mit asiatischen Sprachzeichen (wie Chinesisch, Japanisch, Koreanisch) ermöglicht.

• text-decoration: Setzt/entfernt Textdekorationen auf Schriften (dies werden Sie hauptsächlich verwenden, um den Standardunterstrich auf Links beim Gestalten zu entfernen). Verfügbare Werte sind:

  • none: Entfernt vorhandene Textdekorationen.
  • underline: Unterstreicht den Text.
  • overline: Fügt dem Text einen Überstrich hinzu.
  • line-through: Legt einen Durchstrich über den Text.

  Es sollte beachtet werden, dass text-decoration mehrere Werte gleichzeitig akzeptieren kann, wenn Sie mehrere Dekorationen gleichzeitig hinzufügen möchten, z.B. 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 erzielen, 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 Textschlagschatten mit der text-shadow-Eigenschaft anwenden. 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 Originaltext — dies kann die meisten verfügbaren CSS-Längen- und Größeneinheiten annehmen, aber Sie werden am häufigsten px verwenden; positive Werte verschieben den Schatten nach rechts, negative nach links. Dieser Wert muss enthalten sein.
2. Der vertikale Versatz des Schattens vom Originaltext. Dies verhält sich ähnlich wie der horizontale Versatz, außer dass es den Schatten nach oben/unten verschiebt, nicht nach 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 standardmäßig 0 gesetzt, was keine Unschärfe bedeutet. Dies kann die meisten verfügbaren CSS-Längen- und Größeneinheiten annehmen.
4. Die Grundfarbe des Schattens, die jede CSS-Farbenheit annehmen kann. Wenn nicht enthalten, wird standardmäßig currentcolor gesetzt, d.h. die Farbe des Schattens wird von der color-Eigenschaft des Elements übernommen.

Mehrfachschatten

Sie können mehrere Schatten auf denselben Text anwenden, indem Sie mehrere Schattenwerte durch Kommas getrennt 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, erhalten wir dies:

Nach den grundlegenden Schriftstileigenschaften werfen wir einen Blick auf die Eigenschaften, mit denen wir das Textlayout beeinflussen können.

Die text-align-Eigenschaft wird verwendet, um zu steuern, wie der Text innerhalb seines umgebenden Inhaltsfelds ausgerichtet wird. Die verfügbaren Werte sind unten aufgeführt. Sie funktionieren im Grunde genauso wie in einer regulären Textverarbeitungsanwendung:

• left: Linksbündigt den Text.
• right: Rechtsbündigt den Text.
• center: Zentriert den Text.
• justify: Verbreitert den Text, indem die Lücken zwischen den Wörtern variieren, damit alle Zeilen des Textes dieselbe Breite haben. Dies muss man sorgfältig 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 überlegen, etwas anderes zusammen damit zu verwenden, wie hyphens, um einige der längeren Wörter über die Zeilen zu brechen.

Wenn wir text-align: center; auf die <h1> in unserem Beispiel anwenden, haben wir dies:

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 einheitslosen Wert, der als Multiplikator wirkt und im Allgemeinen als beste Option angesehen wird. Mit einem einheitslosen Wert wird die font-size multipliziert und ergibt die line-height. Körpertext sieht im Allgemeinen schöner aus und ist leichter lesbar, wenn die Zeilenabstände vorhanden sind. Die empfohlene Zeilenhöhe liegt bei etwa 1,5 – 2 (doppelter Abstand). Um unsere Textzeilen 1,6-mal so hoch wie die Schrift zu setzen, würden wir verwenden:

p {
  line-height: 1.6;
}

Dies auf die <p>-Elemente in unserem Beispiel angewendet ergibt dieses Ergebnis:

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

Zur Veranschaulichung könnten wir einige Abstände zwischen Buchstaben und Wörtern an der ersten Zeile jedes <p>-Elements in unserem HTML-Beispiel anwenden:

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

Dies gibt uns folgendes Erscheinungsbild unseres HTML:

Die oben genannten Eigenschaften geben Ihnen einen Eindruck davon, wie man beginnt, Text auf einer Webseite zu gestalten, aber es gibt viele weitere Eigenschaften, die Sie verwenden könnten. Wir wollten hier nur die wichtigsten abdecken. Sobald Sie sich an die Verwendung dieser gewöhnt haben, sollten Sie auch die folgenden erkunden:

Schriftstile:

• font-variant: Wechseln Sie zwischen kleinen Großbuchstaben und normalen Schriftalternativen.
• font-kerning: Schalten Sie Schrift-Kerning-Optionen ein und aus.
• font-feature-settings: Schalten Sie verschiedene OpenType Schriftfunktionen ein und aus.
• font-variant-alternates: Kontrollieren Sie die Verwendung von alternativen Glyphen für ein gegebenes Schriftbild.
• font-variant-caps: Kontrollieren Sie die Verwendung von alternativen Großbuchstabenglyphen.
• font-variant-east-asian: Kontrollieren Sie die Verwendung von alternativen Glyphen für ostasiatische Schriften, wie Japanisch und Chinesisch.
• font-variant-ligatures: Kontrollieren Sie, welche Ligaturen und kontextabhängigen Formen im Text verwendet werden.
• font-variant-numeric: Kontrollieren Sie die Verwendung von alternativen Glyphen für Zahlen, Brüche und Ordnungszahlen.
• font-variant-position: Kontrollieren Sie die Verwendung von alternativen Glyphen in kleinerer Schriftgröße, die als hoch- oder tiefgestellt positioniert 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 bestimmten Schrift.
• text-underline-position: Geben Sie die Position der Unterstriche an, die mit der text-decoration-line-Eigenschaft underline-Wert gesetzt werden.
• text-rendering: Versuchen, einige Text-Rendering-Optimierungen durchzuführen.

Textlayoutstile:

• text-indent: Legt fest, wie viel horizontaler Raum vor dem Beginn der ersten Zeile des Textinhalts gelassen werden soll.
• text-overflow: Definieren Sie, wie überlaufende Inhalte, die nicht angezeigt werden, den Benutzern signalisiert werden.
• white-space: Definieren Sie, wie Leerzeichen und zugehörige Zeilenumbrüche innerhalb des Elements gehandhabt werden.
• word-break: Geben Sie an, ob Zeilen innerhalb von Wörtern gebrochen werden sollen.
• direction: Definieren Sie die Textrichtung. (Dies hängt von der Sprache ab und normalerweise ist es besser, HTML übernehmen zu lassen, da es mit dem Textinhalt verknüpft ist.)
• hyphens: Schalten Sie die Trennung von Wörtern für unterstützte Sprachen ein und aus.
• line-break: Entspannen oder verstärken Sie das Zeilenbrechen für asiatische Sprachen.
• text-align-last: Definieren Sie, wie die letzte Zeile eines Blocks oder einer 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 brechen darf, um Überlauf zu verhindern.
• writing-mode: Definieren Sie, ob Textzeilen horizontal oder vertikal angeordnet sind und die Richtung, in der nachfolgende Zeilen fließen.

Viele Schriftarten-Eigenschaften können auch über die Kurzformeigenschaft font gesetzt 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 Sie die font-Kurzformeigenschaft verwenden.

Ein Schrägstrich muss 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;

Gut, Sie sind dran. Für diese Aufgabe haben wir keine spezifischen Übungen für Sie. Wir möchten nur, dass Sie ein bisschen mit einigen Schrift-/Textlayout-Eigenschaften experimentieren. Sehen Sie selbst, was Sie sich einfallen lassen können!

1. Klicken Sie auf "Play" im untenstehenden Codeblock, 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 Reset-Schaltfläche im MDN Playground löschen. Beziehen Sie sich auf die vorherigen Abschnitte im Artikel, um mehr Informationen über die Schrift- und Textstile zu finden, die Sie einstellen können.

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

p {

}

Wir hoffen, Sie hatten Spaß am Experimentieren mit Texten in diesem Artikel! Der nächste Artikel gibt Ihnen alles, was Sie über das Gestalten von HTML-Listen wissen müssen.

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

• Übersicht: CSS-Textgestaltung
• Weiter