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 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 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 nach der Reihenfolge der Deklaration. Daher solltelocal()
normalerweise 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 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
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
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 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
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
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 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
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
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. 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
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
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
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
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
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
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
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
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
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 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. 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
monospace
sans-serif
sci-fi
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-case: capitalize;
font-style: capitals;
text-transform: capitalize;
text-capitalize: true;
font-variant: capitalize;
Richtig oder falsch: Mit text-orientation
können Sie Text links, rechts oder mittig ausrichten.
Welche CSS-Eigenschaft kann verwendet werden, um den Abstand zwischen den Textzeilen zu ändern?
line-spacing
baseline-distance
leading
line-height
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.
- MDN Fundamentaler Text- und Schriftstil: