CSS-Zeilenhöhe nach Schriftgröße und Textart empfehlen
Fließtext mit 16 px erhält eine Zeilenhöhe von 1,5, also 24 px, Überschriften nutzen 1,2 und Bildunterschriften 1,4: Geben Sie Schriftgröße und Textart ein und übernehmen Sie einen fertigen Ausgangswert. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Schriftgröße
- 16
- Inhaltstyp
- Body text
- Schriftgröße (px)
- 16
- Empfohlenes Verhältnis
- 1,5
- Zeilenhöhe (px)
- 24
- Css
- line-height: 24px;
Dieses Werkzeug macht aus einer Schriftgröße und einer typografischen Rolle einen praktischen Ausgangswert für die CSS-Zeilenhöhe. Sie wählen Fließtext, Überschrift oder Bildunterschrift; anschließend erhalten Sie ein gängiges Verhältnis und den entsprechenden Pixelwert. Das hilft, wenn ein Entwurf bereits Schriftgrößen, aber noch keine Tokens für den vertikalen Rhythmus besitzt. Das Ergebnis ist deterministisch, lässt sich direkt in CSS übernehmen und versteht sich als Empfehlung, nicht als einzig richtige Einstellung für jede Schrift.
Wählen Sie zuerst die Rolle des Inhalts
Die Zeilenhöhe sollte sich danach richten, wie ein Text gelesen wird, statt überall denselben Multiplikator zu verwenden. Fließtext erstreckt sich meist über mehrere Zeilen und muss den Blick sicher vom Ende einer Zeile zum Anfang der nächsten führen; deshalb empfiehlt das Werkzeug 1.5. Überschriften sind gewöhnlich größer, kürzer und auf eine oder zwei Zeilen begrenzt.
Das engere Verhältnis 1.2 hält einen umbrochenen Titel optisch zusammen. Bildunterschriften sind kleiner, aber meist kurz, sodass 1.4 genügend Luft schafft, ohne benachbarte Inhalte zu überlagern. Jede andere unbekannte Textart führt ausdrücklich zu einem Fehler und wird nicht stillschweigend durch einen Standardwert ersetzt.
Dadurch lassen sich Tippfehler in Token-Pipelines an ihrer Quelle beheben. Die Verhältnisse sind bewährte Ausgangspunkte; passen Sie sie nach der Prüfung von Schrift und tatsächlichem Layout gezielt an.
Verstehen Sie Verhältnis und Pixelwert
Für die Empfehlung wird die positive Schriftgröße in CSS-Pixeln mit dem festen Verhältnis der gewählten Rolle multipliziert. Fließtext mit 16 Pixeln verwendet 1.5 und ergibt 24 Pixel; eine Überschrift mit 32 Pixeln verwendet 1.2 und ergibt 38.4 Pixel. In produktivem CSS ist das einheitenlose Verhältnis häufig sinnvoller, weil es bei geänderten Schriftgrößen proportional vererbt wird.
Der Pixelwert eignet sich weiterhin für feste Spezifikationen, Designübergaben, visuelle Qualitätssicherung, E-Mails und Tokens mit expliziten Längen. Ergebnisse werden auf vier Dezimalstellen gerundet, damit Bruchteile erhalten bleiben, ohne numerisches Rauschen auszugeben. Fehlende, nullwertige, negative, unendliche oder nicht numerische Eingaben lösen einen Fehler aus.
Der Wert beschreibt die Zeilenbox und nicht die sichtbare Glyphenhöhe. Schriften verteilen Oberlängen, Unterlängen und Innenabstände unterschiedlich. Nutzen Sie die Rechnung daher als reproduzierbare Basis und prüfen Sie den gerenderten Text vor der endgültigen Festlegung.
Prüfen Sie die Empfehlung im echten Layout
Setzen Sie den berechneten Wert im endgültigen Kontext ein und testen Sie repräsentative Inhalte statt nur eines idealen Satzes. Verwenden Sie für Fließtext mehrere Absätze, lange Links, Hervorhebungen, Zahlen und schmale mobile Breiten. Prüfen Sie, ob der Blick leicht zwischen den Zeilen wechselt und der Absatz zusammenhängend wirkt.
Testen Sie bei Überschriften den längsten realistischen Titel an jedem Breakpoint. Das Verhältnis 1.2 erzeugt oft einen kräftigen Block; eine Schrift mit hohen Akzenten oder ein Titel über drei Zeilen kann jedoch mehr Raum verlangen. Untersuchen Sie bei Bildunterschriften dichte Karten, Quellen, Tabellennotizen und lokalisierte Texte.
Berücksichtigen Sie auch Zoom und Ersatzschriften. Halten Sie nötige Anpassungen als bewusste Design-Tokens fest und nicht als verstreute CSS-Ausnahmen. Diese Fähigkeit misst keine Schriftmetriken, Zeilenlänge, Sprache, Stärke oder Rendering-Umgebung und ersetzt daher keine visuelle oder barrierebezogene Prüfung.
Sie liefert einen nachvollziehbaren, wiederholbaren Startwert.
Anwendungsfälle
Typografische Skala beginnen
Wandeln Sie gewählte Schriftgrößen vor der visuellen Feinabstimmung in erste Tokens für Fließtext, Überschriften und Bildtexte um.
Designdokumentation erzeugen
Erstellen Sie konsistente Verhältnisse, Pixelwerte und CSS-Deklarationen für Komponentenbibliothek oder Übergabe.
Textrollen validieren
Weisen Sie unbekannte Rollen in automatisierten Abläufen zurück, statt unbemerkt einen Standardabstand anzuwenden.
Häufige Fragen
Welche Verhältnisse empfiehlt das Werkzeug?
Es verwendet 1.5 für Fließtext, 1.2 für Überschriften und 1.4 für Bildunterschriften.
Soll ich in CSS das Verhältnis oder Pixel verwenden?
Einheitenlose Werte werden meist besser vererbt; Pixel helfen bei festen Spezifikationen und Designübergaben.
Garantiert das Ergebnis barrierefreien Text?
Nein. Es ist ein Ausgangspunkt; prüfen Sie die echte Schrift, Breite, Gestaltung, Zoomstufe und den Inhalt.
Welche Zeilenhöhe passt zu Fließtext mit 16 px?
Eine Zeilenhöhe von 1,5, also 24 px. Fließtext läuft über mehrere Zeilen, und der zusätzliche Raum hilft dem Auge, vom Ende einer Zeile zum Anfang der nächsten zu finden.
Warum bekommen Überschriften eine engere Zeilenhöhe als Absätze?
Weil sie größer und kürzer sind und oft nur eine oder zwei Zeilen füllen. Das Verhältnis 1,2 hält einen umbrochenen Titel zusammen, sodass eine Überschrift mit 32 px dann 38,4 px erhält.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/doc/line-height-recommend \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"content_type":"body_text"}'const res = await fetch("https://api.kit.forhosting.com/doc/line-height-recommend", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"content_type": "body_text"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/line-height-recommend",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"content_type": "body_text"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/line-height-recommend", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"content_type":"body_text"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"content_type":"body_text"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/line-height-recommend", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"font_size": 16,
"content_type": "body_text"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.line_height_recommend",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_mb | 25 |
max_pages | 200 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Nutzen Sie das Werkzeug im Browser oder die API für $0.002 je Anfrage.
Wählen Sie zuerst die Rolle des Inhalts
Verwenden Sie body_text für Absätze, Artikel und Beschreibungen, heading für Titel und Abschnittsüberschriften sowie caption für Bildhinweise, Quellen und kurze Zusatzangaben. Die Schreibweise body text wird zu body_text normalisiert.
Verstehen Sie Verhältnis und Pixelwert
Die Antwort enthält die normalisierte Größe, Textart, Empfehlung, line_height_px und eine kopierfertige CSS-Deklaration. Die Berechnung benötigt weder Netzwerk noch Modell, Zufall oder Uhrzeit; dieselbe Eingabe liefert stets dasselbe JSON.
Prüfen Sie die Empfehlung im echten Layout
Die interaktive Browsernutzung ist möglich; jede API-Anfrage kostet $0.002, wobei beide Wege dieselbe deterministische Funktion verwenden.
Technische Fragen
Welche Inhaltsarten werden erkannt?
Zulässig sind body_text (oder body text), heading und caption. Andere Werte liefern invalid_input.
Was kostet eine API-Anfrage?
Jede API-Anfrage kostet $0.002. Das Browserwerkzeug steht für die interaktive Nutzung bereit.