The CSS Podcast – 036: Text & Typography
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 vonurl()
undlocal()
innerhalb vonsrc
. 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 solltelocal()
in der Regel vorurl()
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
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
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
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
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
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
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
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
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
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
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
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
Mit der Property white-space
wird festgelegt, wie Leerzeichen in einem Element behandelt werden sollen. Weitere Informationen finden Sie im 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
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
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
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
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
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
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.
Weitere Informationen finden Sie in unserem Artikel zu variablen Schriftarten.
Pseudo-Elemente
::first-letter
- und ::first-line
-Pseudoelemente
Die Pseudoelemente ::first-letter
und ::first-line
sind jeweils auf den ersten Buchstaben und die erste Zeile eines Textelements ausgerichtet.
::selection
-Pseudoelement
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
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.
Mit welcher CSS-Eigenschaft kann der Abstand zwischen den Textzeilen geändert werden?
line-height
leading
baseline-distance
line-spacing
Ressourcen
- Im Artikel Best Practices für Schriftarten erfahren Sie mehr über das Importieren, Rendern und andere Best Practices für die Verwendung von Schriftarten im Web.
- Grundlegende Text- und Schriftstiloptionen der MDN