Durchschuss aus Schriftgröße und Ratio
Fließtext mit 16 px und einem Verhältnis von 1,5 braucht 24 px von einer Grundlinie zur nächsten. Dazu erhalten Sie den Raum über der Schriftgröße und seine Hälfte, bereit für Entwürfe, E-Mail-Vorlagen und Druckvorgaben. 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
- Verhältnis
- 1,5
- Zeilenhöhe (px)
- 24
- Zusätzlicher Zeilenabstand (px)
- 8
- Halber Zeilenabstand (px)
- 4
- Genauigkeit
- 10
Dieser Durchschuss-Rechner (Leading) wandelt eine Schriftgröße in CSS-Pixeln und ein einheitenloses line-height-Verhältnis in den exakten Abstand von Baseline zu Baseline in Pixeln um—das klassische typografische Maß Leading—zusammen mit Extra-Durchschuss und Half-Leading für Layout-Berechnungen. Designer und Front-end-Entwickler greifen ständig darauf zurück: Fließtext mit sechzehn Pixeln und Verhältnis eins Komma fünf braucht vierundzwanzig Pixel Durchschuss; Überschriften mit achtzehn Pixeln und Verhältnis eins Komma sechs brauchen achtundzwanzig Komma acht. Die Identität ist vollständig deterministisch: Durchschuss in Pixeln ist Schriftgröße mal Verhältnis, Extra-Durchschuss ist Durchschuss minus Schriftgröße, und Half-Leading ist die Hälfte dieses Extras. Es gibt keinen Netzaufruf, keine Stichprobe und keinen datumsabhängigen Shortcut—nur endliche Arithmetik auf zwei positiven Skalaren.
Was Durchschuss bedeutet und was dieser Rechner zurückgibt
Durchschuss (Leading) ist der vertikale Rhythmus des Textes: der Abstand von einer Baseline zur nächsten, den Drucker, Layout-Engines und CSS-Zeilenboxen nutzen, wenn sie die Zeilen eines Absatzes stapeln. Das Wort stammt von Bleistreifen, die früher zwischen Metalltypen gelegt wurden; im digitalen Design wird dieselbe Idee oft als line-height geschrieben, doch viele Design-Briefs, redaktionelle Styleguides und Typobücher verlangen weiterhin Durchschuss in absoluten Einheiten.
Sie können ein einheitenloses Verhältnis in einer Token-Schicht für die Vererbung behalten und dann einen absoluten Pixelwert materialisieren, wenn Sie feste Mockups, Figma-Spezifikationen, E-Mail-Vorlagen oder Druck-PDFs exportieren, die nicht erben können. Dieser Rechner implementiert Durchschuss in Pixeln gleich Schriftgröße mal Verhältnis—genau das, was ein einheitenloses line-height mit der verwendeten Schriftgröße multipliziert. Er meldet auch Extra-Durchschuss—den Raum jenseits der Körpergröße, Durchschuss minus Schriftgröße—und Half-Leading, die Hälfte dieses Extras, so wie viele Engines den Raum über und unter den Glyphen in der Zeilenbox teilen.
Es gibt keinen OpenType-Metrik-Lookup, keine rem- oder em-Umwandlung und keine Font-Datei-Analyse: das sind getrennte Probleme.
Wo Pixel-Durchschuss in Design-Systemen, CSS und Lehre hingehört
Product Designer wandeln eine modulare Typografieskala in absoluten Durchschuss um, wenn sie mobile Mockups übergeben, wenn E-Mail-Clients einheitenlose Vererbung ignorieren, oder wenn ein Druck-PDF-Export jede Messung in Pixeln oder Punkten einfriert. Lehrende für Typografie und CSS-Grundlagen können zeigen, dass ein einheitenloses Verhältnis von eins Komma fünf bei sechzehn Pixeln vierundzwanzig Pixel Baseline-Abstand ergibt, mit acht Pixeln Extra und vier Pixeln Half-Leading, ohne undurchsichtige Browser-DevTools-Rundung. Accessibility-Prüfer brauchen manchmal eine schnelle Kontrolle, dass Fließtext ein Mindestmaß an absolutem Zeilenabstand für langes Lesen erfüllt, selbst wenn der Quelltoken noch ein Verhältnis ist.
Redaktions- und Druckteams, die Durchschuss im traditionellen Sinne spezifizieren, erhalten dieselben Zahlen wie CSS-line-height-Produkte, wenn das Verhältnis gleich angewendet wird. Kombinieren Sie ihn mit Typografie-Einheitenumrechnern, wenn Sie auch px nach em oder rem brauchen, und bedenken Sie, dass echte Darstellung weiterhin von Font-Metriken und Box-Modellen abhängt, sobald der Pixelwert diesen Rechner verlässt.
Anwendungsfälle
CSS- und Komponenten-Dokumentation
Storybook- oder Styleguide-Beispiele mit exakten Durchschuss-px-Werten dokumentieren, die zu den in Produktions-Stylesheets genutzten einheitenlosen Verhältnissen passen.
Häufige Fragen
Was kostet der Durchschuss-Rechner?
Er ist auf dieser Seite kostenlos in Ihrem Browser.
Wie wird der Durchschuss berechnet?
Zum Beispiel ergibt 16 px bei Verhältnis 1.5: 24 px Durchschuss, 8 px Extra und 4 px Half-Leading.
Was passiert bei Schriftgröße null oder negativ?
Nicht positive Schriftgröße kann in diesem Modell keinen nützlichen Durchschuss definieren.
Warum werden Ergebnisse auf eine Präzision gerundet?
Die Standardpräzision ist 10 Dezimalstellen; Sie können precision von 0 bis 15 setzen.
Ist der Zeilenabstand dasselbe wie line-height in CSS?
Es ist dieselbe Idee in absoluten Einheiten. Ein line-height ohne Einheit multipliziert die Schriftgröße, und dieses Werkzeug liefert genau dieses Produkt in Pixel, also das, was Gestaltungsvorgaben und Typografiebücher meist verlangen.
Was bedeuten Durchschuss und halber Durchschuss?
Der Durchschuss ist der Zeilenabstand minus Schriftgröße, im Beispiel mit 16 px und 1,5 also 8 px. Der halbe Durchschuss beträgt 4 px und wird von vielen Satzsystemen über und unter den Buchstaben verteilt.
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/leading-from-ratio \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"ratio":1.5}'const res = await fetch("https://api.kit.forhosting.com/str/leading-from-ratio", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"ratio": 1.5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/leading-from-ratio",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"ratio": 1.5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/leading-from-ratio", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"ratio":1.5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"ratio":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/leading-from-ratio", 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,
"ratio": 1.5
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.leading_from_ratio",
"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_abs_value | 1000000000000000 |
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
Was Durchschuss bedeutet und was dieser Rechner zurückgibt
Sie geben eine positive Schriftgröße in CSS-Pixeln und ein positives einheitenloses Verhältnis an; die Engine liefert die normalisierte Schriftgröße, das Verhältnis, leading_px, extra_leading_px, half_leading_px, den Methodentag leading_from_ratio, die Rundungspräzision und eine kurze Formelzeichenkette. Ungültige Eingaben werfen invalid_input, einschließlich fehlender Schriftgröße oder Verhältnis, nicht endlicher Werte, Beträge über der dokumentierten Obergrenze und jeder nicht positiven Schriftgröße oder jedes nicht positiven Verhältnisses, weil Null- oder Negativschrift keine nützliche Zeilenbox definieren kann. Der Pfad ist deterministisch, sodass dieselben Eingaben stets dieselben gerundeten Zahlen für Tabellen, Unit-Tests, Token-Generatoren und API-Konsumenten erzeugen, die den Abstand nicht erfinden dürfen.
Wie Schriftgröße und Verhältnis gelesen werden und Ergebnisse reproduzierbar bleiben
Optionale Pluszeichen und wissenschaftliche Notation auf numerischen Strings sind erlaubt, wenn sie als endliche Dezimalzahlen parsen; eingebettete Leerzeichen, Hex-Präfixe und nicht numerische Tokens werden mit klarer Meldung abgelehnt, damit eine schlechte Zelle nicht zum falschen Durchschuss wird. Die bevorzugten Feldnamen sind font_size für die Größe in CSS-Pixeln und ratio für den einheitenlosen Multiplikator, aber Aliase wie fontSize, size, fs und px für die Größe sowie line_height_ratio, lineHeight, multiplier, lh und leading_ratio für das Verhältnis werden akzeptiert, damit Tabellen, Query-Strings und typisierte Formulare einen Vertrag teilen. Null- und negative Schriftgrößen scheitern stets mit invalid_input, gemäß der Produktregel, dass Durchschuss-Arithmetik für nicht positive Schrift undefiniert ist. Das Verhältnis muss ebenfalls positiv sein: ein Multiplikator null würde die Zeilenbox kollabieren, und ein negatives Verhältnis ist in diesem Modell kein gültiges Durchschuss-Produkt. Ein optionales Feld precision mit Aliasen decimals und dp wählt, wie viele Dezimalstellen für alle numerischen Ausgaben angezeigt werden, standardmäßig zehn und maximal fünfzehn, damit JSON-Goldens über Runtimes stabil bleiben. Kombinieren Sie den kostenlosen Browserlauf auf dieser Seite mit der kostenpflichtigen API, wenn Sie dasselbe mathematische Ergebnis in einer automatisierten Pipeline oder einem Design-Token-Build brauchen, ohne die Multiplikation selbst neu zu implementieren.
Wo Pixel-Durchschuss in Design-Systemen, CSS und Lehre hingehört
Front-end-Ingenieure nutzen dieselbe Arithmetik, wenn sie CSS-Custom-Properties aus einer Token-JSON-Datei erzeugen, eine Typorampe in Storybook dokumentieren oder Snapshot-Tests schreiben, die Durchschuss von vierundzwanzig für eine sechzehn-Pixel-Körpergröße mit Verhältnis eins Komma fünf erwarten. Auf dieser Seite läuft die Arbeit vollständig in Ihrem Browser; über die API kostet jede erfolgreiche Abfrage $0.002, fehlgeschlagene Validierung wird nicht berechnet, und nach der Antwort wird nichts gespeichert. Diese Aufteilung—kostenlose interaktive Erkundung und eine preisgleiche, identische API—entspricht dem restlichen KIT-Tier-A-Katalog und lässt Sie von einer Designkritik zu einer automatisierten Token-Pipeline wechseln, ohne das mathematische Ergebnis zu ändern.
Integrationsbeispiele
Typorampen aus Design-Tokens
Aus der Schriftgröße jedes Schritts und einem gemeinsamen Verhältnis absolute Durchschuss-Pixel plus Extra und Half-Leading für Figma-Übergabe, E-Mail-CSS und Token-JSON-Exports materialisieren.
Deterministische CI-Fixtures
Reproduzierbare leading_px-Ergebnisse für Unit-Tests, Snapshots und Design-System-Build-Skripte erzeugen, ohne Multiplikationen von Hand zu schreiben.
Technische Fragen
Ist Durchschuss dasselbe wie CSS line-height?
Bei einem einheitenlosen Verhältnis ist das Produkt font_size × ratio der Baseline-Abstand, den CSS line-height und die klassische Typografie Leading nennt. Dieses Werkzeug meldet auch Extra und Half-Leading für Layout-Mathematik.