Ein Live-Playground für CSS-Text: Schriftfamilie, Größe in px, rem oder clamp(), Schriftstärke, Unterstreichungsstil, Ausrichtung, Zeilenhöhe und Abstände, mit Tailwind-Klassen.
Text gestaltest du in CSS mit einer Handvoll Eigenschaften: font-family wählt die Schriftart, font-size legt die Größe fest (rem ist am besten), font-weight: 700 macht ihn fett, text-decoration fügt eine Unterstreichung hinzu und text-align: center zentriert ihn. line-height und letter-spacing steuern die Abstände. Ändere sie im Playground unten und kopiere das CSS.
Die Eigenschaften, die du am häufigsten brauchst
Ziel
CSS
Tailwind
Fett
font-weight: 700
Kursiv
font-style: italic
Unterstreichen
text-decoration: underline
Text zentrieren
text-align: center
Größerer Text
font-size: 1.25rem
Lockerere Zeilen
line-height: 1.6
leading-relaxed (1.625)
Statt sechs einzelner Referenzseiten deckt dieser eine Playground Schriftart, Größe, Stärke, Stil, Details der Unterstreichung, Ausrichtung, Zeilenhöhe und Zeichenabstand gemeinsam ab, schreibt beim Ändern das CSS und die Tailwind-Klassen mit und ergänzt erprobte Rezepte zum Zentrieren von Text, für Font Stacks und zum Laden von Webfonts.
Tippe deinen eigenen Satz in den Playground oder behalte den Beispieltext.
Ändere Schriftart, Größeneinheit, Stärke, Dekoration und Abstände. Vorschau und CSS aktualisieren sich sofort.
Kopiere den CSS-Block oder die Tailwind-Klassen für dieselben Einstellungen.
Nutze die Rezepte weiter unten zum Zentrieren, für Font Stacks und für @font-face.
Fließtext liest sich am besten bei etwa 16 bis 18 Pixeln, mit einer Zeilenhöhe von 1.5 bis 1.7 und Zeilen von ungefähr 60 bis 75 Zeichen.
Gib Schriftgrößen in rem an, damit sie der Browsereinstellung der Leser folgen. Verwende clamp() für Überschriften, die mit dem Bildschirm wachsen sollen.
Lade nur die Schriftstärken, die du verwendest. Jede zusätzliche Stärke eines Webfonts ist eine weitere Datei zum Herunterladen.
Unterstreiche keinen Text, der kein Link ist. Leser erwarten, dass unterstrichene Wörter anklickbar sind.
Häufige Fragen
Wie mache ich Text in CSS fett?
Verwende font-weight: bold oder eine Zahl wie 600 oder 700. Zahlen zwischen 100 und 900 wählen aus den Stärken, die die Schrift mitbringt. Hat die Schrift nur einen normalen Schnitt, täuscht der Browser Fettdruck vor, indem er die Buchstaben verdickt, was schwerer und weniger scharf aussieht als eine echte fette Schriftdatei.
Wie zentriere ich Text vertikal?
text-align zentriert nur horizontal. Um vertikal in einer Box zu zentrieren, mach die Box zu einem Flex- oder Grid-Container: display: grid; place-items: center; zentriert den Text in einer Zeile in beide Richtungen. Für eine einzelne Zeile in einer Leiste mit fester Höhe funktioniert auch eine line-height, die der Höhe der Leiste entspricht.
Wie ändere ich Farbe oder Dicke der Unterstreichung?
Verwende text-decoration-color, text-decoration-thickness und text-underline-offset. Zum Beispiel ergibt text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; eine dickere blaue Unterstreichung mit Abstand unter den Buchstaben.
Sollte line-height eine Einheit haben?
Meist nicht. Ein Wert ohne Einheit wie 1.5 wird mit der eigenen Schriftgröße jedes Elements multipliziert, sodass Überschriften und Kleingedrucktes im Block sinnvolle Abstände behalten. Ein fester Wert wie 24px wird unverändert vererbt und kann größeren Text einengen.
Was ist ein Font Stack?
Eine kommagetrennte Liste von Schriften in font-family. Der Browser verwendet die erste verfügbare und geht die Liste weiter durch, wenn sie fehlt, bis zu einer generischen Familie wie sans-serif oder serif, die es immer gibt.
Größeneinheiten: px, rem und clamp()
Pixel ergeben eine exakte Größe, die die bevorzugte Textgröße der Leser ignoriert. rem bezieht sich auf die Schriftgröße des Root-Elements, standardmäßig 16px, daher sind 1.125rem für die meisten Menschen 18px und wachsen bei Lesern mit, die einen größeren Standard eingestellt haben.
clamp(min, preferred, max) ist für Größen gedacht, die mit dem Fenster skalieren sollen. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) ist nie kleiner als 28px oder größer als 48px und bewegt sich fließend dazwischen. Behalte im mittleren Wert einen rem-Anteil, damit Browser-Zoom und Texteinstellungen weiterhin wirken.
Gut lesbare Standardwerte
Die meisten Leseprobleme entstehen durch drei Einstellungen: zu kleiner Text, zu lange Zeilen und zu eng gesetzte Zeilen. Eine max-width von etwa 65ch für Absätze, eine Schriftgröße von mindestens 1rem und eine Zeilenhöhe um 1.6 beheben die meisten davon noch vor jeder Gestaltung.
Große Überschriften brauchen das Gegenteil: eine engere Zeilenhöhe von etwa 1.1 bis 1.2 und oft einen leicht negativen Zeichenabstand. Kleine Labels in Großbuchstaben lesen sich mit etwas positivem Zeichenabstand besser.
Webfonts laden, ohne die Seite zu bremsen
Jeder Webfont ist ein Download, der Text verzögern kann. font-display: swap zeigt sofort die Ersatzschrift an und tauscht sie aus, sobald der Webfont da ist, sodass Leser nie auf unsichtbaren Text starren. Selbst gehostete WOFF2-Dateien ersparen eine Verbindung zu einer weiteren Domain.
Wenn du Google Fonts nutzt, fordere in einem einzigen Link nur die Familien und Stärken an, die du brauchst, und füge die vorgeschlagenen preconnect-Hinweise hinzu. Eine Ersatzschrift im Stack mit ähnlichen Proportionen verringert den Sprung, wenn die Schrift eingewechselt wird.
Text horizontal und vertikal zentrieren
Horizontal: text-align
text-align zentriert die Zeilen innerhalb des Blocks. Um den Block selbst zu zentrieren, gib ihm eine Breite und margin-inline: auto.
In beide Richtungen: Grid mit place-items
Zwei CSS-Zeilen am Container zentrieren beliebigen Inhalt in beide Richtungen, egal wie groß er ist.
Unterstreichungen, die gestaltet wirken
Farbe, Dicke, Abstand und Stil
Die Dekorationseigenschaften verändern die Unterstreichung, ohne die Textfarbe anzutasten. text-decoration-skip-ink verhindert, dass Linien durch Unterlängen schneiden.
Eine Schrift mit @font-face oder Google Fonts laden
Selbst gehostete Schrift mit @font-face
Lass src auf deine WOFF2-Datei zeigen. Ein Block pro Stärke und Stil, den du tatsächlich verwendest.
Google-Fonts-Link
Fordere nur die Stärken an, die du verwendest. display=swap setzt font-display für dich.
Gut lesbare Standardwerte als Ausgangspunkt
Eine kleine, sinnvolle Text-Grundlage
Fließtextgröße, Zeilenhöhe und Zeilenlänge einmal festgelegt; Überschriften enger. Passe Farben und Größen an dein Design an.
Tailwind-Entsprechungen
CSS und die passenden Tailwind-Klassen (Standard-Theme)