Text und Typografie

The CSS Podcast – 036: Text und Typografie

Text ist einer der Grundbausteine des Webs.

Wenn Sie eine Website erstellen, müssen Sie Ihren Text nicht unbedingt formatieren. HTML verfügt tatsächlich über einen ziemlich vernünftigen Standardstil.

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 das Ändern einiger grundlegender Eigenschaften können Sie die Leseerfahrung 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. Dadurch wird sichergestellt, dass Sie unabhängig von den vom Nutzer installierten Schriftarten die genaue Typografie haben, die Sie benötigen.

Anschließend gehen wir auf die wichtigsten Eigenschaften von CSS-Schriftarten ein, darunter font-family, font-style, font-weight und font-size. Mit diesen Grundlagen wird der Stil und die Lesbarkeit von Text verbessert.

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.

Anhand von praktischen Beispielen und Tipps können Sie Ihr Verständnis und Ihre Anwendung dieser CSS-Techniken festigen.

Die @font-face-Regel

Die CSS-At-Regel @font-face ist wichtig für das Webdesign. Sie ermöglicht Ihnen, benutzerdefinierte Schriftarten zum Anzeigen von Text anzugeben und zu verwenden. Das Schöne an @font-face ist seine Vielseitigkeit: Sie können damit Schriftarten von einem Remote-Server oder einer auf dem Gerät des Nutzers installierten Schriftart beziehen.

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")
}

Beschreibungen

ascent-override

Passt den Anstiegsmesswert an und wirkt sich auf die Fläche über der Baseline aus.

descent-override

Passt den Abstiegsmesswert an und wirkt sich auf den Bereich unterhalb der Referenz aus.

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 eine zulässige horizontale Skalierung fest, die als einzelner Wert oder Bereich angegeben wird.

font-style

Hier legen Sie den Schriftstil und die Winkelbereiche für schräge Stile fest.

font-weight

Bestimmt die Schriftstärke oder den verfügbaren Schriftstärkebereich.

font-feature-settings

Ermöglicht den Zugriff auf OpenType-Schriftartfunktionen.

font-variation-settings

Feinabstimmung der Einstellungen für variable Schriftart.

line-gap-override

Überschreibt den standardmäßigen Zeilenabstand der Schriftart.

size-adjust

Wendet einen Skalierungsfaktor auf den Umriss und die Messwerte der Schriftart an.

src

Definiert die Schriftart, d. h. lokal oder remote. Dies ist für die Regel @font-face erforderlich. Die Kombination von url() und local() innerhalb von src ist eine gängige Strategie. Dabei wird, sofern verfügbar, eine lokale Schriftart verwendet, sodass als Fallback eine Remote-Schriftartdatei wiederhergestellt wird. 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 „websicherer“ Schriftarten, da sie benutzerdefinierte Typografie verwenden können. Die Möglichkeit der local()-Funktion, auf dem Gerät des Nutzers nach einer Schriftart zu suchen, ermöglicht eine nahtlose Nutzung, die nicht unbedingt von einer Internetverbindung abhängig ist.

MIME-Typen für die Schriftart

Format	MIME-Typ
TrueType	font/ttf
OpenType	font/otf
Web-Open-Schriftart	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 besprochen, ist @font-face eine Regel, mit der benutzerdefinierte Schriftarten definiert werden, die Sie in Ihrer Webanwendung verwenden möchten. Sie teilt dem Browser mit, wo die Schriftart heruntergeladen werden soll, wie sie während des Ladevorgangs angezeigt werden soll (mit dem Attribut font-display) und gibt an, welche Teilmenge von Zeichen heruntergeladen werden soll (mit dem unicode-range).

Im Gegensatz dazu ist font-family eine CSS-Eigenschaft, die in einer CSS-Regel verwendet wird, um einem Element eine bestimmte Schriftart oder eine Liste von Schriftarten zuzuweisen. Bei den unter font-family aufgeführten Schriftarten kann es sich um websichere Schriftarten, Systemschriftarten oder benutzerdefinierte Schriftarten handeln, die mit @font-face definiert sind.

Zusammenfassend lässt sich sagen, dass @font-face eine Schriftart deklariert und ihr einen Namen gibt. font-family wendet diese deklarierte Schriftart auf HTML-Elemente an.

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 Eigenschaft font-family wendet sie dann auf das Textelement an, wobei Arial als Fallback verwendet wird, wenn "CustomFont" nicht verfügbar ist.

Schriftart ändern

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

Für das Attribut font-family ist eine durch Kommas getrennte Liste von Strings zulässig, die entweder auf bestimmte oder allgemeine Schriftfamilien verweisen. Bestimmte Schriftfamilien sind Zeichenfolgen in Anführungszeichen, z. B. "Helvetica", "EB Garamond" oder "Times New Roman". Allgemeine Schriftfamilien sind Keywords wie serif, sans-serif und monospace. Eine vollständige Liste der Optionen auf MDN Der Browser zeigt die erste verfügbare Schriftart aus der bereitgestellten 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äge Schriftarten verwenden

Mit font-style können Sie festlegen, ob Text kursiv sein soll oder nicht. font-style akzeptiert eines der folgenden Keywords: normal, italic und oblique.

Text fett formatieren

Mit font-weight legen Sie die Fettformatierung von Text fest. Diese Eigenschaft akzeptiert Keyword-Werte (normal, bold), relative Keyword-Werte (lighter, bolder) und numerische Werte (100 bis 900).

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

Die Keywords lighter und bolder werden relativ zum übergeordneten Element berechnet. Unter MDN-Bedeutung der relativen Gewichtungen finden Sie ein praktisches Diagramm, das zeigt, wie dieser Wert bestimmt wird.

Textgröße ändern

Mit font-size können Sie die Größe Ihrer Textelemente festlegen. Diese Eigenschaft akzeptiert Längenwerte, Prozentsätze und einige Keyword-Werte.

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

Mit line-height können Sie die Höhe der einzelnen Zeilen in einem Element angeben. Diese Eigenschaft akzeptiert entweder eine Zahl, eine Länge, einen Prozentsatz oder das Keyword normal. Im Allgemeinen wird empfohlen, anstelle einer Länge oder eines Prozentsatzes eine Zahl zu verwenden, um Probleme bei der Übernahme zu vermeiden.

Leerzeichen zwischen Zeichen ändern

Mit letter-spacing können Sie den horizontalen Abstand zwischen den Zeichen in Ihrem Text steuern. Dieses Attribut akzeptiert Längenwerte wie em, px und rem.

Beachten Sie, dass der angegebene Wert den natürlichen Abstand zwischen den Zeichen erhöht. Versuche in der folgenden Demo, einen einzelnen Buchstaben auszuwählen, um die Größe des Letterbox-Bilds zu sehen und zu sehen, wie er sich mit letter-spacing ändert.

Abstand zwischen Wörtern ändern

Mit word-spacing können Sie die Abstände zwischen den einzelnen Wörtern im Text vergrößern oder verkleinern. Dieses Attribut akzeptiert Längenwerte wie em, px und rem. Die angegebene Länge gilt zusätzlich zum normalen Abstand für zusätzlichen Platz. Das bedeutet, dass word-spacing: 0 word-spacing: normal entspricht.

Kurzschreibweise: font

Mit der Kurzschreibweise font können Sie viele schriftartbezogene 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.

Weitere Informationen zur Reihenfolge dieser Properties findest du im font-Artikel von MDN.

Groß-/Kleinschreibung von Text ändern

Mit text-transform können Sie die Großschreibung Ihres Textes ändern, ohne den zugrunde liegenden HTML-Code ändern zu müssen. Diese Eigenschaft akzeptiert die folgenden Keyword-Werte: uppercase, lowercase und capitalize.

Text unterstrichen, überstrichen und durchgestrichen formatieren

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.

Das Attribut text-decoration ist eine Kurzschreibweise für die im Folgenden beschriebenen spezifischen Eigenschaften.

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.

Die Eigenschaft text-decoration ist eine Kurzschreibweise für alle oben genannten Attribute.

Text einrücken

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

Überlaufende oder versteckte Inhalte

Mit text-overflow kannst du angeben, wie ausgeblendete Inhalte dargestellt werden sollen. Es gibt zwei Optionen: clip (Standardeinstellung), mit der der Text an der Stelle des Überlaufs gekürzt wird, und ellipsis, mit der am Überlaufpunkt ein Auslassungszeichen (...) angezeigt wird.

Freiraum steuern

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

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

Umbruch von Wörtern steuern

Mit word-break können Sie die Umwandlung von Wörtern in eine Zeile ändern, wenn sie über die Zeile ü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

Mit text-align können Sie die horizontale Ausrichtung von Text in einem Block- oder Tabellenzellenelement festlegen. Diese Eigenschaft akzeptiert die Keyword-Werte left, right, start, end, center, justify und match-parent.

Mit den Werten left und right wird der Text an der linken bzw. rechten Seite des Blocks ausgerichtet.

Verwenden Sie start und end, um die Position des Anfangs und des Endes 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.

Verwenden Sie center, um den Text an der Mitte des Blocks auszurichten.

Mit dem Wert justify wird der Text organisiert und der Wortabstand wird automatisch so geändert, dass der Text sowohl am linken als auch am rechten Rand des Blocks ausgerichtet ist.

Textrichtung ändern

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. Für Englisch und alle anderen Sprachen, die von links nach rechts gelesen werden, verwenden Sie direction: ltr.

Textfluss ändern

Mit writing-mode können Sie den fließenden und angeordneten Textfluss ändern. Die Standardeinstellung ist horizontal-tb. Sie können writing-mode jedoch auch auf vertical-lr oder vertical-rl setzen, wenn Text horizontal dargestellt werden soll.

Textausrichtung ändern

Mit text-orientation können Sie die Ausrichtung der Zeichen in Ihrem Text festlegen. Die gültigen 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 mit Schatten versehen

Mit text-shadow können Sie Ihrem Text einen Schatten hinzufügen. Dieses Attribut erwartet drei Längen (x-offset, y-offset und blur-radius) und eine Farbe.

Weitere Informationen findest du 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.

Weitere Informationen finden Sie in unserem Artikel zu Variablenschriften.

Pseudoelemente

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

Die Pseudoelemente ::first-letter und ::first-line zielen auf den ersten Buchstaben bzw. die erste Zeile eines Textelements ab.

Pseudoelement ::selection

Mit dem Pseudoelement ::selection kannst du die Darstellung des vom Nutzer ausgewählten Texts ä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

Die font-variant-Eigenschaft ist eine Abkürzung für eine Reihe von CSS-Eigenschaften, 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.

Wissen testen

Ihr Wissen über Typografie im Web testen

Weitere Informationen

• In den Best Practices für Schriftarten werden das Importieren und Rendern von Schriftarten sowie weitere Best Practices für die Verwendung von Schriftarten im Web erläutert.
• MDN Fundamentaler Text- und Schriftstil: