Typografie-Skalenrechner
Baue eine konsistente Überschriftenhierarchie.
Gib eine Basis-Schriftgröße ein und wähle ein Skalenverhältnis, um eine komplette modulare Typo-Skala von H1 bis Kleintext mit passendem CSS-Snippet zu erzeugen.
1.250
h1Franz jagt im komplett verwahrlosten Taxi39.06pxh2Franz jagt im komplett verwahrlosten Taxi31.25pxh3Franz jagt im komplett verwahrlosten Taxi25.00pxh4Franz jagt im komplett verwahrlosten Taxi20.00pxh5Franz jagt im komplett verwahrlosten Taxi16.00pxpFranz jagt im komplett verwahrlosten Taxi16.00pxsmallFranz jagt im komplett verwahrlosten Taxi12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}So baust du eine Typo-Skala
- Gib deine Basis-Schriftgröße in Pixeln ein.
- Wähle ein Verhältnis oder wähle Benutzerdefiniert für eigene Werte.
- Prüfe die erzeugten Größen für jede Überschriftenstufe.
- Kopiere die CSS-Variablen und Regeln in dein Stylesheet.
Häufig gestellte Fragen
Welches Verhältnis sollte ich wählen?
1,125 und 1,2 ergeben feine, eng beieinanderliegende Stufen; 1,333 und 1,618 schaffen mehr Kontrast. Für die meisten Websites eignen sich 1,2 bis 1,25.
Warum ist die H1-Vorschau begrenzt?
Sehr große Größen werden nur in der Vorschau begrenzt; die CSS-Ausgabe behält den exakten berechneten Wert.
Kann ich das mit rem-Einheiten verwenden?
Ja. Teile die Pixelwerte durch deine Wurzelschriftgröße oder ersetze px durch rem im generierten CSS.