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 einige recht vernünftige Standardformatierungen.

Der Text wird jedoch wahrscheinlich den Großteil Ihrer Website ausmachen. Daher lohnt es sich, ihm etwas Stil zu verleihen. 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 unabhängig von von Nutzern installierten Schriftarten genau die Typografie, die Sie benötigen.

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

Außerdem gehen wir auf paragrafspezifische Eigenschaften wie text-indent und word-spacing ein. Abschließend behandeln wir fortgeschrittene Themen wie variable Schriftarten und Pseudoelemente, mit denen Sie die 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")
}

Deskriptoren

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
Legt das Anzeigeverhalten der Schriftart abhängig vom Downloadstatus fest.
font-family
Gibt den Namen der Schriftart für die Verwendung in schriftartbezogenen Properties an.
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 Bereich der verfügbaren Schriftstärken.
font-feature-settings
Ermöglicht den Zugriff auf OpenType-Schriftschnittfunktionen.
font-variation-settings
Ermöglicht eine detaillierte Steuerung der variablen Schriftarteinstellungen.
line-gap-override
Überschreibt den Standardzeilenabstand 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 anhand der Deklarationsreihenfolge. Daher sollte local() in der Regel 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 Schriftarten

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 oft verwechselt, obwohl sie unterschiedliche Zwecke erfüllen.

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:

<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 er es finden kann. 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

Browser Support

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

Source

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 in der MDN. Der Browser zeigt die erste verfügbare Schriftart aus der Liste an.

Wenn Sie font-family verwenden, sollten Sie mindestens eine generische Schriftfamilie angeben, für den Fall, dass die bevorzugten Schriftarten nicht im Browser des Nutzers verfügbar sind. Im Allgemeinen sollte die generische Fallback-Schriftfamilie Ihren bevorzugten Schriftarten ähneln. Wenn Sie font-family: "Helvetica" (eine serifenlose Schriftfamilie) verwenden, sollte sans-serif als Fallback verwendet werden.

Kursiv- und Schrägstriche verwenden

Browser Support

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

Source

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

Browser Support

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

Source

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 Schlüsselwörter 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

Browser Support

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

Source

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 werden für font-size auch einige absolute Keyword-Werte (xx-small, x-small, small, medium, large, x-large, xx-large) und einige relative Keyword-Werte (smaller, larger) akzeptiert. Die relativen Werte beziehen sich auf den font-size des übergeordneten Elements.

Abstand zwischen Zeilen ändern

Browser Support

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

Source

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

Browser Support

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

Source

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

Hinweis: Durch den angegebenen Wert erhöht sich der natürliche Abstand zwischen den Zeichen. 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.letter-spacing

Abstand zwischen Wörtern ändern

Browser Support

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

Source

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 möglichen Properties sind 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

Browser Support

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

Source

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

Browser Support

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

Source

Mit text-decoration können Sie Ihrem Text Zeilen hinzufügen. Unterstreichungen werden am häufigsten verwendet, aber es ist auch möglich, Linien über oder durch den Text zu ziehen.

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

Für das Attribut text-decoration-line sind die Keywords underline, overline und line-through zulässig. Sie können auch mehrere Keywords für mehrere Zeilen angeben.

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

Für das Attribut text-decoration-style sind die Keywords solid, double, dotted, dashed und wavy zulässig.

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

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

Text einrücken

Browser Support

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

Source

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.

Umgang mit überlaufenden oder ausgeblendeten Inhalten

Browser Support

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

Source

Mit text-overflow können Sie 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

Browser Support

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

Source

Mit der Property white-space wird festgelegt, wie Leerzeichen in einem Element behandelt werden sollen. Weitere Informationen finden Sie im white-spaceArtikel 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

Browser Support

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

Source

Mit word-break können Sie festlegen, wie Wörter umgebrochen werden, wenn sie die Zeile überschreiten würden. Standardmäßig werden Wörter im Browser nicht getrennt. Wenn Sie das Keyword break-all für word-break verwenden, wird der Browser angewiesen, Wörter bei Bedarf an einzelnen Zeichen zu trennen.

Textausrichtung ändern

Browser Support

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

Source

Mit text-align können Sie die horizontale Ausrichtung von Text in einem Block- oder Tabellenzellenelement angeben. 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 dem lateinischen Buchstaben left und dem arabischen Buchstaben right zugeordnet, der von rechts nach links geschrieben wird (Rechts-nach-links-Schreibrichtung, RTL). Das sind logische Ausrichtungen. Weitere Informationen finden Sie im Modul Logische Eigenschaften.

Mit center können Sie den Text in der Mitte des Blocks ausrichten.

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

Browser Support

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

Source

Mit direction können Sie die Textrichtung festlegen: ltr (linksläufig, Standardeinstellung) oder rtl (rechtsläufig). 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

Browser Support

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

Source

Mit writing-mode können Sie den Textfluss und die Anordnung ä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

Browser Support

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

Source

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

Browser Support

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

Source

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

Normalerweise müssen für „normale“ Schriftarten unterschiedliche Dateien für verschiedene Versionen der Schriftart importiert werden, z. B. fett, kursiv oder komprimiert. Variable Schriftarten sind Schriftarten, die viele verschiedene Varianten einer Schriftart 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

Browser Support

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

Source

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

::selection-Pseudoelement

Browser Support

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

Source

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

Browser Support

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

Source

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. Zu den CSS-Properties, die diese Kurzschreibweise enthält, gehören 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.

Wissen testen

Ihr Wissen über Typografie im Web testen

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

sans-serif
italic
sci-fi
monospace
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-capitalize: true;
text-transform: capitalize;
font-variant: capitalize;
font-style: capitals;
text-case: capitalize;

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

Falsch
Richtig

Mit welcher CSS-Eigenschaft kann der Abstand zwischen den Textzeilen geändert werden?

line-height
leading
baseline-distance
line-spacing

Ressourcen