Zeilenhöhe auf Baseline-Raster
Schrift mit 16 px und Verhältnis 1,5 auf einem Raster von 8 px ergibt eine Zeilenhöhe von 24 px: genau 3 Rasterzeilen, sodass jede Zeile auf denselben Schienen steht. Verfehlt der Idealwert das Raster, wird er auf ganze Rasterzeilen gerundet. 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
- Raster
- 8
- Bevorzugtes Verhältnis
- 1,5
- Einrasten
- nearest
- Ideale Zeilenhöhe
- 24
- Zeilenhöhe
- 24
- Verhältnis
- 1,5
Ein Baseline-Raster hält jede Textzeile auf denselben unsichtbaren horizontalen Schienen, sodass Absätze, Bildunterschriften und mehrspaltige Layouts von der Seitenkopfzeile bis zur Fußzeile einen gemeinsamen Vertikalrhythmus teilen. Designer und Front-End-Ingenieure wählen eine Rastereinheit —oft vier, sechs oder acht Pixel— und brauchen eine Zeilenhöhe, die ein exaktes Vielfaches dieser Einheit ist, nicht ein schwebendes Ratio, das pro Zeile um einen halben Pixel driftet. Dieser Rechner für Zeilenhöhe auf dem Baseline-Raster nimmt Ihre Schriftgröße, das bevorzugte einheitenlose Ratio und die Rasterzeilenhöhe und snapt die ideale Zeilenbox auf die nächste (oder die nächsthöhere, oder die nächstniedrigere) ganze Anzahl von Rasterzeilen. Sie erhalten die gesnapte Zeilenhöhe in Pixeln, das effektive Ratio zum Einfügen in CSS, wie viele Rasterzeilen diese Zeile belegt und ob der Idealwert bereits auf dem Raster lag.
So funktioniert das Snappen der Zeilenhöhe auf das Baseline-Raster
Beginnen Sie mit der vertrauten einheitenlosen Zeilenhöhen-Regel: multiplizieren Sie die Schriftgröße mit einem bevorzugten Ratio wie eins Komma fünf, um eine ideale Zeilenbox in derselben Einheit wie die Schrift zu erhalten (fast immer CSS-Pixel). Dieses Produkt liest sich angenehm, liegt aber selten exakt auf Ihrem Baseline-Raster. Teilen Sie die ideale Zeilenhöhe durch die Rasterzeilenhöhe, um zu erfahren, wie viele Zeilen die Textzeile belegen will; wenden Sie danach einen Snap-Modus an.
Nearest rundet auf die nächste ganze Zeilenanzahl und ist die Voreinstellung für Fließtext, wenn Sie die kleinste visuelle Abweichung vom bevorzugten Ratio wollen. Up (ceil) vergrößert die Zeilenbox immer, damit der Text nie enger wirkt als ideal —nützlich bei rechtlichen Fußnoten oder langen Zeilenmaßen, die Luft brauchen—. Down (floor) verkleinert Richtung Raster, wenn Sie ein knappes vertikales Budget schützen müssen, etwa Kartenhöhe oder Druckspalte.
Nach dem Snap multiplizieren Sie die ganzzahlige Zeilenanzahl mit der Rastereinheit für die endgültige Zeilenhöhe und teilen durch die Schriftgröße, um das einheitenlose Ratio zu erhalten, das Sie in eine CSS-Custom-Property legen können. Mindestens eine Rasterzeile wird erzwungen, damit pathologische Eingaben die Zeilenhöhe nicht auf null kollabieren.
Wo sich eine rastergenaue Zeilenhöhe lohnt
Designsysteme erzeugen Abstands- und Typografie-Skalen aus einer einzigen Rasterkonstante; wenn Autoren eine neue Größe hinzufügen, hält dieser Rechner jedes Zeilenhöhen-Token auf den Schienen —ohne Tabellenkalkulation. Druck- und PDF-Pipelines, die CSS auf feste Seitenraster abbilden, nutzen dieselbe Snap-Logik, damit Bildschirmvorschauen dem Druckbogen entsprechen. Validierungsfehler werden nicht berechnet.
Halten Sie bevorzugte Ratios moderat, pinnen Sie Goldens an die gerundeten Felder, und Sie erhalten reproduzierbaren Vertikalrhythmus für Design-Tokens, Edge-Worker und Styleguide-Generatoren, ohne eine eigene Layout-Engine aufzubauen.
Anwendungsfälle
Design-Token und Typografie-Skalen erzeugen
Wenn Sie eine neue Schriftgröße zu einem Designsystem hinzufügen, snappen Sie das bevorzugte Ratio auf das gemeinsame Baseline-Raster, damit jedes Zeilenhöhen-Token ein ganzzahliges Vielfaches der Rastereinheit bleibt.
Mehrspaltige und Karten-Layouts
Richten Sie Fließtext-, Caption- und Überschriften-Zeilenboxen über Spalten und gestapelte Karten aus, indem Sie für jede Größe gesnapte Zeilenhöhen gegen ein Raster berechnen.
Vertikalrhythmus für Druck und PDF
Abbildung von Bildschirm-Typografie-Skalen auf eine feste Druck-Baseline, damit CSS-zu-PDF-Pipelines den Absatzabstand konsistent mit dem Seitenraster halten.
Häufige Fragen
Was unterscheidet nearest, up und down?
Nearest rundet die ideale Zeilenbox auf die nächste ganze Rasterzeilenanzahl. Up nimmt immer ceil (lockerer Durchschuss). Down nimmt floor (enger). Die Zeilenanzahl ist nie kleiner als eins.
Worin unterscheidet sich das von einem einfachen Zeilenhöhen-Rechner?
Ein einfacher Rechner multipliziert nur Schriftgröße mit einem Ratio. Dieses Werkzeug snapt das Produkt zusätzlich auf ein Baseline-Raster, damit der Vertikalrhythmus über Größen und Spalten konsistent bleibt.
Welche Rastereinheit sollte ich wählen?
Gestalter wählen meist 4, 6 oder 8 Pixel und bauen alle Abstände aus dieser einen Zahl auf. Geben Sie dieselbe Einheit hier ein, dann ist jede Zeilenhöhe ein exaktes Vielfaches davon statt eines Verhältnisses, das pro Zeile um einen halben Pixel abdriftet.
Woran erkenne ich, ob mein Verhältnis schon auf dem Raster liegt?
Das Ergebnis zeigt an, wenn die ideale Zeilenhöhe bereits eine ganze Zahl von Rasterzeilen ergibt. Dann ändert sich nichts: Schrift mit 16 px bei 1,5 auf einem Raster von 8 px bleibt bei 24 px, drei Zeilen, mit unverändertem Verhältnis.
Nutze ich in meinen Stilen den Pixelwert oder das Verhältnis?
Beides hält den Text auf dem Raster. Verwenden Sie die eingerastete Zeilenhöhe in Pixeln oder das effektive Verhältnis, also diese Höhe geteilt durch die Schriftgröße, wenn Ihre Stile einheitenlose Zeilenhöhen nutzen.
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/str/baseline-grid \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"grid":8}'const res = await fetch("https://api.kit.forhosting.com/str/baseline-grid", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"grid": 8
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/baseline-grid",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"grid": 8
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/baseline-grid", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"grid":8}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"grid":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/baseline-grid", 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,
"grid": 8
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.baseline_grid",
"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.
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
So funktioniert das Snappen der Zeilenhöhe auf das Baseline-Raster
Wenn das Idealprodukt bereits einer ganzen Zeilenanzahl entspricht, setzt die Antwort on_grid true, damit Token-Pipelines eine Umschreibung überspringen können.
Eingabevertrag, Antwortfelder und Validierung
Achtzehn Pixel Schrift auf demselben Acht-Pixel-Raster mit Ratio eins Komma fünf ergibt Ideal siebenundzwanzig, das nearest auf vierundzwanzig snapt (drei Zeilen, Ratio etwa eins Komma drei drei) oder up auf zweiunddreißig (vier Zeilen) je nach snap. Kombinieren Sie die Zahlen mit Ihrer eigenen rem-Umwandlung, wenn die Root-Schriftgröße abweicht; dieser Endpunkt arbeitet in Rohpixeln, damit Ergebnisse umgebungsübergreifend deterministisch bleiben. Senden Sie per POST einen JSON-Body mit zwei erforderlichen positiven endlichen Zahlen: font_size (CSS-Pixel des Textes, den Sie bemessen) und grid (Baseline-Zeilenhöhe in derselben Einheit). Optional senden Sie preferred_ratio, standardmäßig eins Komma fünf wenn weggelassen, und snap als nearest, up oder down —Aliase wie round, ceil und floor werden akzeptiert—. Numerische Felder dürfen als JSON-Zahlen oder Dezimalstrings ankommen; fehlende Werte, null, Negative, NaN und Infinity scheitern mit invalid_input und werden nicht berechnet. Bei Erfolg spiegelt die Nutzlast font_size, grid, preferred_ratio und snap; meldet ideal_line_height vor dem Snap; liefert line_height und ratio nach dem Snap; enthält die ganze Zahl grid_rows; setzt on_grid, wenn das Ideal bereits ein Vielfaches des Rasters war; und liefert eine kurze formula-Zeichenkette für die Dokumentation. Beispiel: sechzehn Pixel Schrift auf einem Acht-Pixel-Raster mit bevorzugtem Ratio eins Komma fünf ergibt Ideal vierundzwanzig, exakt drei Zeilen, also bleibt line_height vierundzwanzig und das Ratio eins Komma fünf.
Wo eine API für Zeilenhöhe auf dem Baseline-Raster sich rechnet
Komponentenbibliotheken, die mehrspaltige Artikel, Produktkarten oder Dokumentations-Seitenleisten rendern, brauchen übereinstimmende Baselines über Breakpoints: Schriftgrößen stapelweise über die API zu rechnen liefert eine stabile Tabelle gesnapter Ratios für Storybook und visuelle Regression. Weil die Implementierung reines Parse-Tier-A ist, kostet jeder erfolgreiche Aufruf den veröffentlichten Grundpreis $0.002 ohne Modell-Tokens und ohne ausgehendes Netz.
Technische Fragen
Wie berechne ich eine Zeilenhöhe auf dem Baseline-Raster?
Senden Sie positive font_size und grid (optional preferred_ratio, Standard 1.5, und snap: nearest, up oder down). Die API liefert line_height als ganzzahliges Vielfaches des Rasters und das effektive einheitenlose Ratio.
Welche Einheiten soll ich für font_size und grid verwenden?
Verwenden Sie für beide dieselbe Einheit —typischerweise CSS-Pixel—. Die Mathematik ist einheitenagnostisch, solange beide Eingaben dieselbe Skala teilen; die rem-Umwandlung hängt von Ihrer Root-Schriftgröße ab.
Was kostet das Werkzeug für Zeilenhöhe auf dem Baseline-Raster?
Das Browser-Werkzeug ist kostenlos. API-Anfragen nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Aufruf; ungültige Eingabe wird nicht berechnet.