Zeilenhöhe-Rechner
line-height berechnen: aus Schriftgröße und Verhältnis die Zeilenhöhe in px, Prozent und unitless ermitteln – CSS und Tailwind.
Der Zeilenhöhe-Rechner berechnet die line-height aus Schriftgröße und gewünschtem Verhältnis. Du erhältst den Wert unitless, in Pixeln, in Prozent und in rem, dazu die passende Tailwind-Klasse. Umgekehrt ermittelst du aus einer Zeilenhöhe in Pixeln das Verhältnis. Als Faustregel gelten 1,5 für Fließtext und 1,1 bis 1,3 für große Überschriften.
Unitless
1.5
Nächste Tailwind-Klasse: leading-normal
Pixel
24px
Prozent
150%
rem (bei 16 px Root)
1.5rem
font-size: 16px;
line-height: 1.5;Vorschau
Gute Typografie macht Text leicht lesbar. Die Zeilenhöhe bestimmt, wie viel Luft zwischen den Zeilen bleibt. Ist sie zu klein, wirken Absätze gedrängt. Ist sie zu groß, verlieren die Zeilen ihren Zusammenhang.
Was ist die Zeilenhöhe?
Die Zeilenhöhe (line-height) ist der Abstand von einer Grundlinie zur nächsten. Sie beeinflusst Lesbarkeit und Rhythmus eines Textes. In CSS ist ein Faktor ohne Einheit die robusteste Schreibweise.
Empfohlene Werte
| Tailwind-Klasse | Faktor | Einsatz |
|---|---|---|
leading-none | 1 | Große Überschriften |
leading-tight | 1.25 | Große Überschriften |
leading-snug | 1.375 | Überschriften, kompakte UI |
leading-normal | 1.5 | Fließtext |
leading-relaxed | 1.625 | Lange Texte, große Zeilenabstände |
leading-loose | 2 | Lange Texte, große Zeilenabstände |
So gehst du vor
- Schriftgröße eintragen und ein Verhältnis wählen.
- Ergebnis in unitless, px oder Prozent kopieren.
- Skalen für Überschriften und Fließtext gemeinsam planen, zum Beispiel mit dem Typografie-Skala-Generator.
Beispiel
Ein Fließtext mit 18 px Schriftgröße und Faktor 1,5 hat eine Zeilenhöhe von 27 px. Auf dem 4-px-Raster sind das 28 px. Passende Größen in rem liefert der PX-REM-EM-Umrechner.
Häufige Fragen
Wie berechne ich die line-height?
Multipliziere die Schriftgröße mit dem gewünschten Verhältnis. Bei 16 px und 1,5 ergibt das 24 px. In CSS schreibst du meist nur den Faktor, also line-height: 1.5.
Warum sollte line-height ohne Einheit stehen?
Ein Faktor ohne Einheit wird an Kindelemente vererbt und dort mit deren eigener Schriftgröße multipliziert. Ein Pixelwert oder Prozentwert wird dagegen berechnet und dann fest weitergegeben, was bei größeren Kindelementen zu engen Zeilen führt.
Welche Zeilenhöhe ist für Fließtext gut?
1,4 bis 1,6 haben sich bewährt. Die WCAG-Empfehlung zu Textabständen (Kriterium 1.4.12) nennt mindestens 1,5 für Absätze, damit Text auch bei angepassten Abständen lesbar bleibt.
Warum runden manche Teams auf ein 4-px-Raster?
Feste Rasterwerte halten vertikale Abstände im Design konsistent. Aus 16 px × 1,5 = 24 px passt gut, 14 px × 1,5 = 21 px wird auf 20 oder 24 px gerundet.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.