The CSS Podcast – 036: Text & Typography
Text ist einer der zentralen Bausteine des Webs.
Beim Erstellen einer Website müssen Sie nicht unbedingt Ihren Text gestalten. HTML verfügt tatsächlich über einen ziemlich vernünftigen Standardstil.
Allerdings wird der Text wahrscheinlich den Großteil Ihrer Website ausmachen, daher lohnt es sich, ihn mit einem gewissen Stil aufzupeppen. Wenn Sie ein paar grundlegende Eigenschaften ändern, können Sie den Lesekomfort für Ihre Nutzer erheblich verbessern.
In diesem Modul sehen wir uns zuerst einige grundlegende CSS-Eigenschaften für Schriftarten wie font-family, font-style, font-weight und font-size an. Anschließend sehen wir uns Eigenschaften an, die sich auf Textabsätze auswirken, z. B. text-indent und word-spacing. Zum Abschluss dieses Moduls werden einige weiterführende Themen behandelt, z. B. variable Schriftarten und Pseudoelemente.
Schriftart ändern
Mit font-family können Sie die Schriftart des Texts ändern.
Für die Eigenschaft font-family ist eine durch Kommas getrennte Liste von Strings zulässig, die sich entweder auf bestimmte oder allgemeine Schriftfamilien beziehen. Bestimmte Schriftfamilien sind Strings in Anführungszeichen, z. B. „Helvetica“, „EB Garamond“ oder „Times New Roman“. Allgemeine Schriftfamilien sind Suchbegriffe wie serif, sans-serif und monospace. Eine vollständige Liste der Optionen finden Sie auf MDN. Der Browser zeigt das erste verfügbare Schriftbild aus der bereitgestellten Liste an.
Wenn Sie font-family verwenden, sollten Sie für den Fall, dass der Browser des Nutzers nicht Ihre bevorzugten Schriftarten enthält, mindestens eine generische Schriftfamilie angeben. Im Allgemeinen sollte die allgemeine Fallback-Schriftfamilie Ihren bevorzugten Schriftarten ähnlich sein: Wenn Sie font-family: "Helvetica" (eine serifenlose Schriftfamilie) verwenden, sollte Ihre Fallback-Schriftart sans-serif lauten, damit sie übereinstimmen.
Kursiv und schräg Schriftart verwenden
Mit font-style können Sie festlegen, ob Text kursiv dargestellt werden soll. font-style akzeptiert eines der folgenden Keywords: normal, italic oder oblique.
Text fett formatieren
Mit font-weight können Sie die Fettformatierung des Textes festlegen. Diese Eigenschaft akzeptiert Keyword-Werte (normal, bold), relative Keyword-Werte (lighter, bolder) und numerische Werte (100 bis 900).
Die Schlüsselwörter normal und bold entsprechen den numerischen Werten 400 bzw. 700.
Die Keywords lighter und bolder werden relativ zum übergeordneten Element berechnet. Auf der Seite Bedeutung relativer Gewichtungen von MDN finden Sie ein praktisches Diagramm, das zeigt, wie dieser Wert bestimmt wird.
Textgröße ändern
Mit font-size können Sie die Größe der Textelemente anpassen. 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
Verwenden Sie line-height, um die Höhe der einzelnen Zeilen in einem Element anzugeben. Diese Eigenschaft akzeptiert entweder eine Zahl, eine Länge, einen Prozentsatz oder das Keyword normal. Generell wird empfohlen, statt einer Länge oder eines Prozentsatzes eine Zahl zu verwenden, um Probleme bei der Vererbung zu vermeiden.
Abstand zwischen Zeichen ändern
Mit letter-spacing können Sie festlegen, wie groß der horizontale Abstand zwischen den Zeichen im Text sein soll. Diese Eigenschaft akzeptiert Längenwerte wie em, px und rem.
Beachten Sie, dass der angegebene Wert den natürlichen Abstand zwischen den Zeichen erhöht. Wählen Sie in der Demo unten einen einzelnen Buchstaben aus, um zu sehen, wie groß der Briefkasten ist und wie er sich mit letter-spacing ändert.
Abstand zwischen Wörtern ändern
Mit word-spacing können Sie den Abstand zwischen den einzelnen Wörtern in Ihrem Text vergrößern oder verkleinern. Diese Eigenschaft akzeptiert Längenwerte wie em, px und rem. Beachten Sie, dass die angegebene Länge zusätzlich zum normalen Abstand zusätzlichen Platz darstellt. Das bedeutet, dass word-spacing: 0 word-spacing: normal entspricht.
Kurzschreibweise (font)
Mit der Kurzschreibweise-Eigenschaft font kannst du mehrere schriftbezogene Eigenschaften gleichzeitig festlegen. Die Liste der möglichen Properties sind font-family, font-size, font-stretch, font-style, font-variant, font-weight und line-height.
Weitere Informationen zur Anordnung dieser Unterkünfte finden Sie im font-Artikel von MDN.
Groß-/Kleinschreibung von Text ändern
Mit text-transform können Sie die Groß-/Kleinschreibung Ihres Texts ändern, ohne den zugrunde liegenden HTML-Code ändern zu müssen. Diese Property akzeptiert die folgenden Keyword-Werte: uppercase, lowercase und capitalize.
Unterstreichen, Überstriche und Durchleitungen in Text einfügen
Mit text-decoration können Sie Ihrem Text Zeilen hinzufügen. Unterstrichen werden am häufigsten verwendet. Es ist jedoch möglich, Zeilen über oder durch den Text einzufügen.
Das Attribut text-decoration ist eine Kurzschreibweise für die spezifischeren Eigenschaften, die im Folgenden beschrieben werden.
In der Property text-decoration-line werden die Keywords underline, overline und line-through akzeptiert. 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.
In der Property text-decoration-style werden die Keywords solid, double, dotted, dashed und wavy akzeptiert.
Die Eigenschaft text-decoration-thickness akzeptiert beliebige Längenwerte und legt die Strichbreite aller Dekorationen aus text-decoration-line fest.
Das Attribut text-decoration ist eine Kurzschreibweise für alle oben genannten Eigenschaften.
Text einrücken
Mit text-indent können Sie Textblöcke einrücken. Dieses Attribut verwendet entweder eine Länge (z. B. 10px, 2em) oder einen Prozentsatz der Breite des enthaltenen Blocks.
Umgang mit überlaufenden oder ausgeblendeten Inhalten
Mit text-overflow kannst du festlegen, wie ausgeblendete Inhalte dargestellt werden sollen. Es gibt zwei Optionen: clip (Standardeinstellung), mit dem der Text am Überlaufpunkt gekürzt wird, und ellipsis, mit dem Auslassungspunkte (...) am Überlaufpunkt angezeigt werden.
Leerzeichen steuern
Mit der Eigenschaft white-space wird festgelegt, wie Leerzeichen in einem Element gehandhabt werden sollen. Weitere Informationen findest du im 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.
Festlegen, wie Wörter umgangen werden
Mit word-break können Sie ändern, wie Wörter „umgebrochen“ angezeigt werden, wenn sie über die Zeile hinausgehen. Standardmäßig teilt der Browser keine Wörter auf. Wenn Sie den Keyword-Wert break-all für word-break verwenden, wird der Browser angewiesen, bei Bedarf Wörter bei einzelnen Zeichen 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 von Anfang und Ende einer Textzeile im aktuellen Schreibmodus darzustellen. Daher wird start auf Englisch der left und in arabischer Schrift dem right zugeordnet, das von rechts nach links (RTL) geschrieben wird. Es sind logische Ausrichtungen. Weitere Informationen finden Sie im Modul Logische Attribute.
Verwenden Sie center, um den Text an der Mitte des Blocks auszurichten.
Mit dem Wert von justify wird der Text organisiert und die Wortabstände werden automatisch so geändert, dass der Text am linken und am rechten Rand des Blocks ausgerichtet ist.
Textrichtung ändern
Mit direction können Sie die Textrichtung festlegen, entweder ltr (Standardeinstellung von links nach rechts) 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 Sprachen mit linksläufiger Schreibrichtung direction: ltr.
Den Textfluss ändern
Mit writing-mode können Sie den Ablauf und die Anordnung von Text ändern. Die Standardeinstellung ist horizontal-tb. Du kannst writing-mode aber auch auf vertical-lr oder vertical-rl festlegen, wenn der Text horizontal fließen soll.
Ausrichtung von Text ä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 Eigenschaft ist nur relevant, wenn für writing-mode ein anderer Wert als horizontal-tb festgelegt ist.
Schatten zu Text hinzufügen
Mit text-shadow können Sie dem Text einen Schatten hinzufügen. Für diese Eigenschaft sind drei verschiedene Längen (x-offset, y-offset und blur-radius) und eine Farbe erforderlich.
Weitere Informationen findest du im Abschnitt text-shadow unseres Moduls zu Schatten.
Variable Schriftarten
Normalerweise müssen für „normale“ Schriftarten verschiedene Dateien für verschiedene Versionen des Schriftbilds importiert werden, z.B. fett, kursiv oder verdichtet. Variable Schriftarten sind Schriftarten, die viele verschiedene Varianten eines Schriftbilds in einer Datei enthalten können.
Weitere Informationen finden Sie in unserem Artikel über variable Schriftarten.
Pseudoelemente
Pseudoelemente ::first-letter und ::first-line
Die Pseudoelemente ::first-letter und ::first-line werden auf den ersten Buchstaben bzw. die erste Zeile eines Textelements ausgerichtet.
Pseudoelement ::selection
Mit dem Pseudoelement ::selection können Sie die Darstellung des vom Nutzer ausgewählten Textes ändern.
Bei Verwendung dieses Pseudoelements können nur bestimmte CSS-Eigenschaften genutzt werden: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.
font-variant
Die Eigenschaft font-variant ist eine Abkürzung für eine Reihe von CSS-Eigenschaften, mit denen Sie Schriftartvarianten wie small-caps und slashed-zero auswählen können. Zu dieser Abkürzung gehören font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures und font-variant-numeric. Klicken Sie auf die Links zu den einzelnen Properties, um mehr über ihre Nutzung zu erfahren.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Typografie im Web
Welches der folgenden Keywords kann als allgemeines Fallback für font-family verwendet werden?
serifmonospaceitalicitalic ist ein gültiges Keyword für font-style, nicht font-family.sci-fifantasy ist jedoch ein gültiger generischer Fallback für font-family.sans-serifhelvetica"Helvetica" ist kein allgemeines Keyword, sondern bezieht sich stattdessen auf eine bestimmte Schriftfamilie.Mit welcher Anweisung wird der erste Buchstabe jedes Worts in Großbuchstaben umgewandelt? This is a sentence. ➡ This Is A Sentence.
text-capitalize: true;text-case: capitalize;text-transform: capitalize;font-style: capitals;font-variant: capitalize;Richtig oder falsch: Mit text-orientation können Sie den Text links- oder rechtsbündig oder zentriert ausrichten.
text-orientation wird die Rotation der Buchstaben in einer Zeile geändert.text-orientation wird die Rotation der Buchstaben in einer Zeile geändert. Mit text-align können Sie Text links, rechts oder zentriert ausrichten (und mehr).Mit welcher CSS-Eigenschaft lässt sich der Abstand zwischen Textzeilen ändern?
line-spacingleadingbaseline-distanceline-heightRessourcen
- 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 behandelt.
- MDN-Grundlagen: Text- und Schriftstil