Fundamentales zu Text- und Schriftstyling

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

Die CSS-Eigenschaften, die zum Styling von Text verwendet werden, fallen im Allgemeinen in zwei Kategorien, die wir in diesem Artikel getrennt betrachten:

• Schriftstile: Eigenschaften, die die Schriftart eines Textes beeinflussen, z.B. welche Schrift angewendet wird, deren Größe und ob sie fett, kursiv usw. ist.
• Text-Layout-Stile: Eigenschaften, die den Abstand und andere Layout-Merkmale des Textes betreffen, sodass zum Beispiel der Abstand zwischen Zeilen und Buchstaben manipuliert werden kann und wie der Text innerhalb der Inhaltsbox ausgerichtet wird.

Lassen Sie uns direkt weitermachen und die Eigenschaften zum Stylen von Schriften betrachten. In diesem Beispiel werden wir einige CSS-Eigenschaften auf folgendes 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>

Die Eigenschaft color legt die Farbe des Vordergrundinhalts der ausgewählten Elemente fest, die normalerweise der Text ist, aber auch eine Unter- oder Oberlinie umfassen kann, die mithilfe der Eigenschaft text-decoration auf den Text angewendet wurde.

color kann jede CSS-Farb-Einheit akzeptieren, zum Beispiel:

p {
  color: red;
}

Dies bewirkt, dass die Absätze rot werden, anstatt den standardmäßigen Browser-Standard von schwarz, wie folgt:

Um eine andere Schriftart für Ihren Text einzustellen, verwenden Sie die Eigenschaft font-family — dies 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 verfügbar ist, auf dem die Website angezeigt wird; andernfalls verwendet er einfach eine Browser-Standardschriftart. Ein einfaches Beispiel sieht so aus:

p {
  font-family: Arial;
}

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

Web-sichere Schriften

Apropos Verfügbarkeit von Schriften, 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.

Die meiste Zeit möchten wir als Webentwickler eine spezifischere Kontrolle über die Schriften haben, die zur Anzeige unseres Textinhalts verwendet werden. Das Problem besteht darin, einen Weg zu finden, um zu wissen, welche Schrift auf dem Computer verfügbar ist, der unsere Webseiten betrachtet. Es gibt keine Möglichkeit, dies in jedem Fall zu wissen, aber die web-sicheren Schriften sind bekanntlich auf nahezu allen Instanzen der am häufigsten verwendeten Betriebssysteme (Windows, macOS, die gängigsten Linux-Distributionen, Android und iOS) verfügbar.

Die Liste der tatsächlichen web-sicheren Schriften wird sich mit der Weiterentwicklung der Betriebssysteme ändern, aber es ist vernünftig, die folgenden Schriften zumindest kurzfristig als web-sicher zu betrachten (viele von ihnen sind dank der Microsoft Core fonts for the Web Initiative in den späten 90er und frühen 2000er Jahren populär geworden):

Standardschriften

CSS definiert fünf generische Namen für Schriften: serif, sans-serif, monospace, cursive und fantasy. Diese sind sehr generisch, und die genaue verwendete Schriftschnitt kann zwischen jedem Browser und jedem Betriebssystem, auf dem sie angezeigt werden, variieren. Es stellt ein worst-case scenario dar, bei dem der Browser sich bemühen wird, eine Schrift anzubieten, die angemessen aussieht. serif, sans-serif und monospace sind recht vorhersehbar und sollten etwas Vernünftiges bieten. Andererseits sind cursive und fantasy weniger vorhersehbar, und wir empfehlen, sie sehr vorsichtig zu verwenden und beim Testen vorzugehen.

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 webbasierte Schrift könnte aus irgendeinem Grund fehlschlagen), können Sie einen Schriftstapel bereitstellen, damit der Browser die Möglichkeit hat, verschiedene Schriften auszuwählen. Dies umfasst 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 mit dem ersten Element der Liste und überprüft, ob diese Schrift auf dem Computer verfügbar ist. Wenn sie dies ist, wendet der Browser sie auf die ausgewählten Elemente an. Falls nicht, geht er zur nächsten Schrift über, und so weiter.

Es ist eine gute Praxis, einen geeigneten generischen Schriftartnamen am Ende des Stapels bereitzustellen, damit der Browser zumindest etwas annähernd Sinnvolles bereitstellen kann, wenn keine der aufgeführten Schriften vorhanden ist. Um dies zu betonen, werden Absätze mit der Standard-Serifenschrift des Browsers dargestellt, wenn keine andere Option verfügbar ist — was normalerweise Times New Roman ist — was für eine serifenlose Schriftart nicht gut ist!

Ein Beispiel für eine Schriftfamilie

Lassen Sie uns unser vorheriges Beispiel ergänzen und den Absätzen eine serifenlose Schrift geben:

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

Dies ergibt folgendes Ergebnis:

Im Artikel über CSS-Werte und Einheiten des vorherigen Moduls haben wir Längen- und Größeneinheiten überprüft. Die Schriftgröße (eingestellt mit der Eigenschaft font-size) kann Werte akzeptieren, die in den meisten dieser Einheiten (und anderen, wie Prozenten) gemessen werden; jedoch sind die am häufigsten verwendeten Einheiten, die Sie zum Skalieren von Text verwenden,:

• px (Pixel): Die Anzahl der Pixel, die Sie als Höchstwert für den Text verwenden möchten. Dies ist eine absolute Einheit — sie ergibt in nahezu allen Situationen denselben Endwert für die Schrift auf der Seite.
• em: 1 em entspricht der Schriftgröße, die auf das übergeordnete Element des aktuellen Elements, das wir stylen, gesetzt wurde (genauer gesagt die Breite eines Großbuchstabens M, der sich im übergeordneten Element befindet). Dies kann schwierig sein herauszufinden, 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, sobald Sie sich daran gewöhnt haben, und Sie können em verwenden, um alles zu skalieren, nicht nur Text. Sie können eine gesamte Website mit em skalieren, was die Wartung vereinfacht.
• rem: Diese funktionieren genauso wie em, außer dass 1 rem der Schriftgröße entspricht, die auf das Root-Element des Dokuments (d.h. <html>) festgelegt ist, nicht dem übergeordneten Element. Das macht die Berechnung Ihrer Schriftgrößen viel einfacher.

Die font-size eines Elements wird von dessen übergeordnetem Element geerbt. Alles beginnt mit dem Root-Element des gesamten Dokuments — <html> — dessen Standard-font-size in allen Browsern auf 16px festgelegt ist. Jeder Absatz (oder jedes andere Element, das keine andere Größe hat, die vom Browser festgelegt wurde) innerhalb des Root-Elements hat eine endgültige Größe von 16px. Andere Elemente können unterschiedliche Standardgrößen haben. Zum Beispiel hat ein Element vom Typ h1 standardmäßig eine Größe von 2em, weshalb es eine endgültige Größe von 32px hat.

Die Dinge werden schwieriger, wenn Sie anfangen, die Schriftgröße verschachtelter Elemente zu ändern. Zum Beispiel, wenn Sie ein <article>-Element auf Ihrer Seite hätten und dessen font-size auf 1.5 em setzen möchten (was einer endgültigen Größe von 24 px entspricht) und Sie 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 dessen em-Wert auf 20/24, oder 0.83333333 em setzen. Die Berechnungen können komplex sein, daher müssen Sie beim Styling vorsichtig sein. Am besten verwenden Sie rem, wo immer möglich, um die Dinge einfach zu halten und vermeiden es, die font-size von Containerelementen zu setzen, wo dies möglich ist.

CSS bietet vier allgemeine 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 (Sie werden dies selten verwenden, es sei denn, Sie möchten aus irgendeinem Grund eine kursive Formatierung deaktivieren):

  • normal: Setzt den Text auf die normale Schrift (deaktiviert vorhandene Kursivität).
  • italic: Setzt den Text zu verwenden die kursiven Version der Schrift, falls vorhanden; andernfalls wird kursiv mit oblique simuliert.
  • oblique: Setzt den Text, um eine simulierte Version einer kursiven Schriftart zu verwenden, die durch Abschrägung der normal Version erstellt wurde.

• font-weight: Stellt ein, wie fett der Text ist. Dies hat viele verfügbare Werte, falls Sie viele Schriftvarianten zur Verfügung haben (wie -light, -normal, -bold, -extrabold, -black, usw.), aber in der Realität werden Sie selten andere verwenden außer normal und bold:

  • normal, bold: Normales und fett Schriftgewicht.
  • lighter, bolder: Setzt die Fettigkeit des aktuellen Elements so, dass es einen Schritt heller oder schwerer als die Fettigkeit seines übergeordneten Elements ist.
  • 100 – 900: Numerische Fettigkeitswerte, die eine feinere Kontrolle als die obigen Schlüsselwörter bieten, falls benötigt.

• text-transform: Ermöglicht es Ihnen, Ihre Schrift auf verschiedene Weise zu transformieren. Werte umfassen:

  • 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 so um, dass sie in einem festbreiten Quadrat geschrieben werden, ähnlich zu einer Monospace-Schriftart, um z.B. lateinische Zeichen mit asiatischen Sprachenzeichen (wie Chinesisch, Japanisch, Koreanisch) auszurichten.

• text-decoration: Schaltet Textdekorationen auf Schriften ein/aus (Sie werden dies hauptsächlich verwenden, um den Standardunterstrichungen auf Links beim Stilne zu entfernen). Verfügbare Werte sind:

  • none: Entfernt jegliche bereits vorhandene Textdekorationen.
  • underline: Unterstreicht den Text.
  • overline: Gibt dem Text eine Oberlinie.
  • line-through: Setzt einen Durchstrich über den Text.

  Sie sollten beachten, 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 Shorthand-Eigenschaft für text-decoration-line, text-decoration-style und text-decoration-color ist. Sie können Kombinationen dieser Eigenschaftswerte verwenden, um interessante Effekte zu erstellen, z.B.: 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 Drop-Schatten zu Ihrem Text mit der Eigenschaft text-shadow hinzufügen. Diese nimmt bis zu vier Werte, wie im folgenden Beispiel gezeigt:

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

Die vier Werte sind wie folgt:

1. Das horizontale Offset des Schattens vom Ursprungstext — dies kann die meisten verfügbaren CSS Längen- und Größeneinheiten annehmen, am häufigsten verwenden Sie jedoch px; positive Werte bewegen den Schatten nach rechts, und negative Werte nach links. Dieser Wert muss hinzugefügt werden.
2. Das vertikale Offset des Schattens vom Ursprungstext. Dies verhält sich ähnlich wie das horizontale Offset, nur dass es den Schatten nach oben/unten bewegt, nicht nach links/rechts. Dieser Wert muss hinzugefügt werden.
3. Der Unschärferadius: Ein höherer Wert bedeutet, dass der Schatten breiter verteilt wird. Wenn dieser Wert nicht hinzugefügt wird, ist der Standardwert 0, was keine Unschärfe bedeutet. Dies kann die meisten verfügbaren CSS Längen- und Größeneinheiten annehmen.
4. Die Basisfarbe des Schattens, die jede CSS-Farb-Einheit annehmen kann. Wenn nicht angegeben, ist der Standardwert currentcolor, d.h. die Farbe des Schattens wird von der color-Eigenschaft des Elements übernommen.

Mehrere Schatten

Sie können mehrere Schatten auf dasselbe Text anbeziehen, indem Sie mehrere Schattenwerte durch Kommas getrennt auflisten, 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 dieses Ergebnis:

Mit den grundlegenden Schriftschatz-Eigenschaften aus dem Weg lassen Sie uns einen Blick auf die Eigenschaften werfen, die wir verwenden können, um das Layout des Textes zu beeinflussen.

Die Eigenschaft text-align wird verwendet, um zu steuern, wie Text innerhalb seiner umschließenden Inhaltsbox ausgerichtet ist. Die verfügbaren Werte sind unten aufgelistet. Sie funktionieren nahezu genauso wie in einer regulären Textverarbeitungsanwendung:

• left: Links ausgerichteter Text.
• right: Rechts ausgerichteter Text.
• center: Zentrierter Text.
• justify: Lässt den Text sich ausbreiten, indem er die Lücken zwischen den Wörtern variiert, sodass alle Textzeilen die gleiche Breite haben. Sie müssen dies sorgfältig 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 überlegen, etwas anderes zusätzlich zu verwenden, wie z.B. hyphens, um einige der längeren Wörter über mehrere Zeilen zu brechen.

Wenn wir text-align: center; auf das <h1>-Element in unserem Beispiel anwenden, erhalten wir dieses:

h1 {
  text-align: center;
}

Die Eigenschaft line-height legt die Höhe jeder Textzeile fest. Diese Eigenschaft kann nicht nur die meisten Längen- und Größeneinheiten annehmen, sondern kann auch einen einheitslosen Wert annehmen, der als Multiplikator wirkt und im Allgemeinen als die beste Option angesehen wird. Mit einem einheitslosen Wert wird die font-size multipliziert und ergibt die line-height. Fließtext sieht generell schöner aus und ist leichter zu lesen, wenn die Zeilen weiter auseinander liegen. Die empfohlene Zeilenhöhe liegt bei etwa 1.5 – 2 (doppelter Abstand). Um unsere Textzeilen auf eine Höhe von 1,6-mal der Schrift zu setzen, würden wir verwenden:

p {
  line-height: 1.6;
}

Die Anwendung dieser Eigenschaft für die <p>-Elemente in unserem Beispiel würde dieses Ergebnis ergeben:

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

Um dies zu veranschaulichen, könnten wir sowohl den Wort- als auch den Buchstabenabstand auf der ersten Zeile jeder <p>-Element in unserem HTML-Beispiel anwenden:

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

Dies rendert unser HTML so:

Die oben genannten Eigenschaften geben Ihnen einen Eindruck davon, wie Sie beginnen können, Text auf einer Webseite zu stylen, aber es gibt viele weitere Eigenschaften, die Sie verwenden könnten. Wir wollten hier nur die wichtigsten abdecken. Sobald Sie sich mit den oben genannten Eigenschaften vertraut gemacht haben, sollten Sie auch die folgenden erkunden:

Schriftstile:

• font-variant: Wechseln Sie zwischen Kapitälchen und normalen Schriftalternativen.
• font-kerning: Schalten Sie die Schriftkerning-Optionen ein und aus.
• font-feature-settings: Schalten Sie verschiedene OpenType-Schriftfunktionen ein und aus.
• font-variant-alternates: Steuern Sie die Verwendung alternativer Glyphen für einen bestimmten Schriftschnitt.
• font-variant-caps: Kontrollieren Sie die Verwendung alternativer Großbuchstabenglyphen.
• font-variant-east-asian: Kontrolle der Verwendung alternativer Glyphen für ostasiatische Schriften wie Japanisch und Chinesisch.
• font-variant-ligatures: Kontrolle über welche Ligaturen und kontextuellen Formen im Text verwendet werden.
• font-variant-numeric: Kontrolle über die Verwendung alternativer Glyphen für Zahlen, Brüche und Ordinalzeichen.
• font-variant-position: Kontrolle über die Verwendung alternativer Glyphen in kleineren Größen, die als Hoch- oder Tiefstellungen 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 mit der text-decoration-line-Eigenschaft underline gesetzten Unterstreichungen an.
• text-rendering: Versuchen Sie, einige Optimierungen für die Textrenderung durchzuführen.

Textlayout-Stile:

• text-indent: Geben Sie an, wie viel horizontaler Platz vor dem Anfang der ersten Textzeile gelassen werden soll.
• text-overflow: Definieren Sie, wie überlaufener Inhalt, der nicht angezeigt wird, den Benutzern signalisiert wird.
• white-space: Definieren Sie, wie Leerzeichen und zugehörige Zeilenumbrüche innerhalb des Elements behandelt werden.
• word-break: Geben Sie an, ob Zeilen innerhalb von Wörtern gebrochen werden sollen.
• direction: Definieren Sie die Textausrichtung. (Dies hängt von der Sprache ab und es ist normalerweise besser, HTML diesen Teil übernehmen zu lassen, da es in Bezug zum Textinhalt steht)
• hyphens: Schalten Sie die Trennfunktion für unterstützte Sprachen ein oder aus.
• line-break: Entspannen oder stärken Sie den Zeilenumbruch für asiatische Sprachen.
• text-align-last: Definieren Sie, wie die letzte Zeile eines Blocks oder einer Zeile, direkt vor einem erzwungenen Zeilenumbruch, ausgerichtet wird.
• 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 in welche Richtung die nachfolgenden Zeilen fließen.

Viele Schriftschtz-Eigenschaften können auch über die Kürzeleigenschaft font gesetzt werden. Diese werden in der folgenden Reihenfolge geschrieben: font-style, font-variant, font-weight, font-stretch, font-size, unsupported templ: cssexref, und font-family.

Von all diesen Eigenschaften sind nur font-size und font-family erforderlich, wenn die font-Kürzeleigenschaft verwendet wird.

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

Ein vollständiges Beispiel würde so aussehen:

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

OK, jetzt sind Sie dran. Für diese Aufgabe haben wir keine spezifischen Übungen für Sie. Wir möchten einfach, dass Sie ein bisschen mit einigen Schrift-/Textlayout-Eigenschaften herumspielen. Sehen Sie, was Sie selbst herausfinden 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 Leerregel p { } 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 Reset-Taste im MDN Playground löschen. Verweisen Sie auf die vorherigen Abschnitte im Artikel, um weitere Informationen zu den einstellbaren Schrift- und Textstilen zu finden.

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

p {

}

Wir hoffen, dass Sie es genossen haben, mit Text zu spielen. Der nächste Artikel wird Ihnen alles Wichtige darüber mitteilen, wie HTML-Listen gestylt werden.

• All about the CSS font-family property, explainers.dev
• Web-safe fonts, Scrimba ^{MDN Lernpartner}

• Übersicht: CSS-Textgestaltung
• Weiter