Text und Typografie

Text ist einer der Grundbausteine des Webs.

Wenn Sie eine Website erstellen, müssen Sie Ihren Text nicht unbedingt formatieren. HTML bietet eigentlich ziemlich vernünftige Standardformatierungen.

Der Text auf Ihrer Website wird jedoch wahrscheinlich den größten Teil Ihrer Website ausmachen. Daher lohnt es sich, sie mit etwas Stil aufzupeppen. Durch die Änderung einiger grundlegender Eigenschaften können Sie die Lesbarkeit für Ihre Nutzer erheblich verbessern.

In diesem Modul beginnen wir mit der Regel @font-face, mit der Sie benutzerdefinierte Schriftarten in Ihre Webseiten importieren können. So haben Sie die gewünschte Typografie unabhängig von von Nutzern installierten Schriftarten zur Verfügung.

Anschließend werden die wichtigsten CSS-Schrifteigenschaften behandelt, darunter font-family, font-style, font-weight und font-size. Diese Grundlagen bilden die Grundlage für die Textbearbeitung, sowohl in Bezug auf Stil als auch auf Lesbarkeit.

Außerdem gehen wir auf absatzspezifische Eigenschaften wie text-indent und word-spacing ein, bevor wir zum Schluss mit erweiterten Themen wie variablen Schriftarten und Pseudoelementen kommen, mit denen Sie Ihre typografische Steuerung weiter optimieren können.

Es werden praktische Beispiele und Tipps zur Vertiefung Ihres Verständnisses und zur Anwendung dieser CSS-Techniken bereitgestellt.

Die @font-face-Regel

Die CSS-At-Rule @font-face ist im Webdesign unerlässlich. Mit ihr können Sie benutzerdefinierte Schriftarten für die Textanzeige angeben und verwenden. Der Vorteil von @font-face ist seine Vielseitigkeit: Sie können Schriftarten von einem Remote-Server oder von einer Schriftart beziehen, die auf dem Gerät des Nutzers installiert ist.

Syntax

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Schlagworte

ascent-override
Mit diesem Messwert wird der Aufwärtstrend angepasst, was sich auf den Bereich über der Baseline auswirkt.
descent-override
Passt den Abstiegsmesswert an, was sich auf den Abstand unter der Grundlinie auswirkt.
font-display
Steuert das Anzeigeverhalten der Schriftart abhängig vom Downloadstatus.
font-family
Gibt der Schriftart einen Namen, der in schriftbezogenen Eigenschaften verwendet werden soll.
font-stretch
Legt die zulässige horizontale Skalierung als einzelnen Wert oder Bereich fest.
font-style
Definiert den Schriftstil und unterstützt Neigungsbereiche für Schrägstriche.
font-weight
Bestimmt die Schriftstärke oder den verfügbaren Bereich der Schriftstärken.
font-feature-settings
Ermöglicht den Zugriff auf OpenType-Schriftschnittfunktionen.
font-variation-settings
Feinabstimmung der Einstellungen für variable Schriftart.
line-gap-override
Überschreibt den standardmäßigen Zeilenabstand der Schriftart.
size-adjust
Werden auf den Umriss und die Metrics der Schrift ein Skalierungsfaktor angewendet.
src
Definiert die Schriftartquelle, lokal oder remote. Dies ist für die @font-face-Regel erforderlich. Eine gängige Strategie ist die Kombination von url() und local() innerhalb von src. Dabei wird bei Verfügbarkeit eine lokale Schriftart verwendet und als Fallback auf eine Remote-Schriftdatei zurückgegriffen. Browser priorisieren Ressourcen nach der Reihenfolge der Deklaration. Daher sollte local() normalerweise vor url() stehen.
unicode-range
Begrenzt die Zeichen, für die diese Schriftart verwendet werden soll.

Beschreibung

@font-face befreit Designer von den Einschränkungen von „websicheren“ Schriftarten, da sie benutzerdefinierte Typografie verwenden können. Die Funktion local() ermöglicht die Suche nach einer Schriftart auf dem Gerät des Nutzers und bietet so eine nahtlose Nutzung, die nicht unbedingt von einer Internetverbindung abhängt.

MIME-Typen für die Schriftart

Format MIME-Typ
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

Der Unterschied zwischen @font-face und font-family

In CSS werden @font-face und font-family häufig verwechselt, dienen aber unterschiedlichen Zwecken.

Wie bereits erwähnt, ist @font-face eine Regel, mit der benutzerdefinierte Schriftarten definiert werden, die Sie in Ihrer Webanwendung verwenden möchten. Es teilt dem Browser mit, wo er die Schriftart herunterladen und wie er sie beim Laden anzeigen soll (mit der Eigenschaft font-display). Außerdem wird angegeben, welche Zeichen heruntergeladen werden sollen (mit unicode-range).

font-family ist dagegen eine CSS-Eigenschaft, die in einer CSS-Regel verwendet wird, um einem Element eine bestimmte Schriftart oder eine Liste von Schriftarten zuzuweisen. Die unter font-family aufgeführten Schriftarten können Web-Safe-Schriftarten, Systemschriften oder benutzerdefinierte Schriftarten sein, die mit @font-face definiert wurden.

Zusammenfassend lässt sich sagen, dass mit @font-face eine Schriftart deklariert und benannt wird und font-family diese deklarierte Schriftart auf HTML-Elemente anwendet.

Hier ein Beispiel für die Verwendung beider Typen:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

In diesem Beispiel definiert @font-face „CustomFont“ und teilt dem Browser mit, wo sie zu finden ist. Die Property font-family wendet sie dann auf das Body-Element an. Arial wird als Fallback verwendet, wenn „CustomFont“ nicht verfügbar ist.

Schriftart ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit font-family können Sie die Schriftart des Texts ändern.

Für die Property font-family kann eine durch Kommas getrennte Liste von Strings verwendet werden, die sich entweder auf spezifische oder generische Schriftfamilien beziehen. Bestimmte Schriftfamilien sind Strings in Anführungszeichen, z. B. „Helvetica“, „EB Garamond“ oder „Times New Roman“. Generische Schriftfamilien sind Keywords wie serif, sans-serif und monospace. Eine vollständige Liste der Optionen finden Sie auf der MDN-Website. Der Browser zeigt die erste verfügbare Schriftart aus der Liste an.

Wenn du font-family verwendest, solltest du mindestens eine allgemeine Schriftfamilie angeben, für den Fall, dass der Browser des Nutzers deine bevorzugte Schriftarten nicht verwendet. Im Allgemeinen sollte die allgemeine Fallback-Schriftfamilie Ihren bevorzugten Schriftarten ähneln: Wenn Sie font-family: "Helvetica" (eine Sans-Serif-Schriftfamilie) verwenden, sollte Ihre Fallback-Datei sans-serif sein.

Kursiv- und Schrägstriche verwenden

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit font-style kannst du festlegen, ob Text kursiv sein soll oder nicht. Für font-style ist eines der folgenden Keywords zulässig: normal, italic und oblique.

Text fett formatieren

Unterstützte Browser

  • Chrome: 2.
  • Rand: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit font-weight können Sie den Text fett formatieren. Für dieses Attribut sind Keyword-Werte (normal, bold), relative Keyword-Werte (lighter, bolder) und numerische Werte (100 bis 900) zulässig.

Die Keywords normal und bold entsprechen den numerischen Werten 400 und 700.

Die Keywords lighter und bolder werden relativ zum übergeordneten Element berechnet. Im MDN-Artikel Bedeutung relativer Gewichte finden Sie ein praktisches Diagramm, das zeigt, wie dieser Wert ermittelt wird.

Textgröße ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit font-size können Sie die Größe Ihrer Textelemente steuern. Für diese Property sind Längenwerte, Prozentsätze und einige Keyword-Werte zulässig.

Neben Längen- und Prozentwerten akzeptiert font-size einige absolute Keyword-Werte (xx-small, x-small, small, medium, large, x-large, xx-large) und einige relative Keyword-Werte (smaller, larger). Die relativen Werte beziehen sich auf die font-size des übergeordneten Elements.

Abstand zwischen Zeilen ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit line-height können Sie die Höhe jeder Zeile in einem Element angeben. Für diese Property sind entweder eine Zahl, eine Länge, ein Prozentsatz oder das Keyword normal zulässig. Im Allgemeinen wird empfohlen, eine Zahl anstelle einer Länge oder eines Prozentsatzes zu verwenden, um Probleme mit der Vererbung zu vermeiden.

Abstand zwischen Zeichen ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit letter-spacing können Sie den horizontalen Abstand zwischen den Zeichen in Ihrem Text steuern. Für dieses Attribut sind Längenwerte wie em, px und rem zulässig.

Hinweis: Mit dem angegebenen Wert wird der natürliche Abstand zwischen den Zeichen vergrößert. In der folgenden Demo können Sie einen einzelnen Buchstaben auswählen, um die Größe seines Briefkastens und die damit verbundenen Änderungen zu sehen.

Abstand zwischen Wörtern ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit word-spacing können Sie die Länge des Leerzeichens zwischen den einzelnen Wörtern im Text erhöhen oder verringern. Für dieses Attribut sind Längenwerte wie em, px und rem zulässig. Die angegebene Länge bezieht sich auf zusätzlichen Abstand zusätzlich zum normalen Abstand. Das bedeutet, dass word-spacing: 0 word-spacing: normal entspricht.

font Kurzschrift

Mit der Kurzschreibweise font können Sie viele schriftbezogene Eigenschaften gleichzeitig festlegen. Die Liste der möglichen Attribute ist font-family, font-size, font-stretch, font-style, font-variant, font-weight und line-height.

In diesem Artikel des MDNfont erfahren Sie, wie Sie diese Properties anordnen.

Groß- oder Kleinschreibung des Texts ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit text-transform können Sie die Groß- und Kleinschreibung des Textes ändern, ohne die zugrunde liegende HTML-Datei zu ändern. Für diese Property sind die folgenden Keyword-Werte zulässig: uppercase, lowercase und capitalize.

Text unter-, über- oder durchstreichen

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit text-decoration können Sie Ihrem Text Zeilen hinzufügen. Am häufigsten werden Unterstriche verwendet, aber es ist möglich, Zeilen oberhalb oder direkt durch den Text hinzuzufügen.

Die Property text-decoration ist eine Kurzform für die unten beschriebenen spezifischeren Properties.

Die Property text-decoration-line akzeptiert die Keywords underline, overline und line-through. Sie können auch mehrere Keywords für mehrere Zeilen angeben.

Mit der Eigenschaft text-decoration-color wird die Farbe aller Dekorationen aus text-decoration-line festgelegt.

Die Eigenschaft text-decoration-style akzeptiert die Keywords solid, double, dotted, dashed und wavy.

Die Eigenschaft text-decoration-thickness akzeptiert beliebige Längenwerte und legt die Strichbreite aller Verzierungen aus text-decoration-line fest.

Das Attribut text-decoration ist eine Kurzform für alle oben genannten Properties.

Text einrücken

Unterstützte Browser

  • Chrome: 1.
  • Rand: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit text-indent können Sie Textblöcke einrücken. Diese Property kann entweder eine Länge (z. B. 10px, 2em) oder einen Prozentsatz der Breite des enthaltenden Blocks annehmen.

Überlaufende oder versteckte Inhalte

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Quelle

Mit text-overflow kannst du angeben, wie ausgeblendete Inhalte dargestellt werden. Es gibt zwei Optionen: clip (Standardeinstellung), bei der der Text am Überlaufpunkt abgeschnitten wird, und ellipsis, bei der am Überlaufpunkt ein Auslassungspunkt (…) angezeigt wird.

Weißraum steuern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit der Property white-space wird angegeben, wie Leerzeichen in einem Element behandelt werden sollen. Weitere Informationen findest du in diesem white-space-Artikel auf MDN.

white-space: pre kann zum Rendern von ASCII-Art oder sorgfältig eingerückten Codeblöcken nützlich sein.

Zeilenumbruch von Wörtern steuern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Quelle

Mit word-break können Sie die Umwandlung von Wörtern in eine Zeile ändern, wenn sie überlaufen würden. Standardmäßig teilt der Browser Wörter nicht auf. Durch die Verwendung des Keyword-Werts break-all für word-break wird der Browser angewiesen, Wörter bei einzelnen Zeichen gegebenenfalls zu unterbrechen.

Textausrichtung ändern

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Mit text-align können Sie die horizontale Ausrichtung von Text in einem Block- oder Tabellenzellenelement festlegen. Für diese Property sind die Keyword-Werte left, right, start, end, center, justify und match-parent zulässig.

Mit den Werten left und right wird der Text links bzw. rechts am Block ausgerichtet.

Verwenden Sie start und end, um den Anfang und das Ende einer Textzeile im aktuellen Schreibmodus anzugeben. Daher wird start der englischen Sprache left und right in arabischer Schrift, die von rechts nach links geschrieben wird, zugeordnet. Es sind logische Ausrichtungen. Weitere Informationen finden Sie im Modul Logische Eigenschaften.

Mit center können Sie den Text zentrieren.

Der Wert von justify organisiert den Text und ändert den Wortabstand automatisch so, dass der Text sowohl am linken als auch am rechten Rand des Blocks ausgerichtet ist.

Textrichtung ändern

Unterstützte Browser

  • Chrome: 2.
  • Rand: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Verwenden Sie direction, um die Textrichtung festzulegen, entweder ltr (von links nach rechts, Standardeinstellung) oder rtl (von rechts nach links). Einige Sprachen wie Arabisch, Hebräisch oder Persisch werden von rechts nach links geschrieben. Daher sollte direction: rtl verwendet werden. Verwenden Sie für Englisch und alle anderen linksläufigen Sprachen direction: ltr.

Textfluss ändern

Unterstützte Browser

  • Chrome: 48.
  • Rand: 12.
  • Firefox: 41.
  • Safari: 10.1.

Quelle

Mit writing-mode können Sie den fließenden und angeordneten Textfluss ändern. Standardmäßig ist horizontal-tb festgelegt. Sie können writing-mode aber auch auf vertical-lr oder vertical-rl festlegen, wenn der Text horizontal ausgerichtet werden soll.

Textausrichtung ändern

Unterstützte Browser

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Quelle

Mit text-orientation können Sie die Ausrichtung der Zeichen im Text festlegen. Gültige Werte für dieses Attribut sind mixed und upright. Diese Property ist nur relevant, wenn writing-mode auf einen anderen Wert als horizontal-tb festgelegt ist.

Text einen Schatten hinzufügen

Unterstützte Browser

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Quelle

Mit text-shadow können Sie Ihrem Text einen Schatten hinzufügen. Für diese Eigenschaft sind drei Längen (x-offset, y-offset und blur-radius) und eine Farbe erforderlich.

Weitere Informationen finden Sie im Abschnitt text-shadow unseres Moduls zu Schatten.

Variable Schriftarten

Für „normale“ Schriftarten ist es normalerweise erforderlich, verschiedene Dateien für verschiedene Versionen des Schriftbilds zu importieren, z. B. für fett, kursiv oder komprimierte Inhalte. Variable Schriftarten sind Schriftarten, die viele verschiedene Varianten eines Schriftbilds in einer Datei enthalten können.

Roboto Flex in zufälligen Kombinationen von Breite und Gewicht

Weitere Informationen finden Sie in unserem Artikel zu variablen Schriftarten.

Pseudo-Elemente

::first-letter- und ::first-line-Pseudoelemente

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Die Pseudoelemente ::first-letter und ::first-line sind jeweils auf den ersten Buchstaben und die erste Zeile eines Textelements ausgerichtet.

::selection-Pseudoelement

Unterstützte Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Quelle

Mit dem Pseudo-Element ::selection können Sie das Aussehen von vom Nutzer ausgewähltem Text ändern.

Bei Verwendung dieses Pseudoelements können nur bestimmte CSS-Eigenschaften verwendet werden: color, background-color, text-decoration, text-shadow, stroke-color, fill-color und stroke-width.

font-variant

Unterstützte Browser

  • Chrome: 1.
  • Rand: 12.
  • Firefox: 1.
  • Safari: 1.

Quelle

Die Property font-variant ist eine Kurzform für eine Reihe von CSS-Properties, mit denen Sie Schriftvarianten wie small-caps und slashed-zero auswählen können. Diese Kurzschreibweise enthält die CSS-Eigenschaften font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures und font-variant-numeric. Über die Links zu den einzelnen Properties erhalten Sie weitere Informationen zur Verwendung.

Wissenstest

Ihr Wissen über Typografie im Web testen

Welches der folgenden Keywords kann als generischer font-family-Fallback verwendet werden?

italic
sci-fi
serif
monospace
sans-serif
helvetica

Mit welcher Anweisung wird der erste Buchstabe jedes Wortes in Großbuchstaben umgewandelt? Beispiel: This is a sentence. ➡ This Is A Sentence.

text-transform: capitalize;
text-capitalize: true;
font-style: capitals;
font-variant: capitalize;
text-case: capitalize;

Richtig oder falsch: Mit text-orientation können Sie Text links, rechts oder mittig ausrichten.

Falsch
Richtig

Welche CSS-Eigenschaft kann verwendet werden, um den Abstand zwischen den Textzeilen zu ändern?

line-spacing
leading
line-height
baseline-distance

Ressourcen