So nutzt du: Schriftgrößen-Skala Generator
- Stelle die Basisgröße ein (meist 16 px, deine Fließtextgröße) und wähle ein Verhältnis — größere Verhältnisse erzeugen mehr Kontrast zwischen den Überschriften.
- Lege fest, wie viele Schritte nach unten (Kleingedrucktes, Bildunterschriften) und nach oben (h4 bis h1, Display) gehen sollen.
- Aktiviere Fluid, um auf Smartphones eine kleinere Basis und ein kleineres Verhältnis zu nutzen, das bis zur Desktop-Skala wächst. Ziehe den Schieberegler für die Bildschirmbreite, um die Vorschau anzupassen.
- Kopiere die CSS-Variablen, die Tailwind-
fontSize-Konfiguration oder eine SCSS-Map.
Was eine modulare Skala ist
Eine Type Scale multipliziert die Basisgröße für jeden Schritt mit demselben Verhältnis: Bei 16 px und 1,25 ergeben sich die Schritte 16, 20, 25, 31,25, 39 px … Größen, die auf einem gemeinsamen Verhältnis basieren, wirken zusammengehörig. Deshalb haben Typografen die Verhältnisse aus der Musik übernommen — die Große Terz (1,25), die Quarte (1,333) und die Quinte (1,5) — sowie den Goldenen Schnitt (1,618).
- Kleine Verhältnisse (1,125–1,2) passen zu dichten Oberflächen, Dashboards und langen Lesetexten.
- Große Verhältnisse (1,333–1,618) passen zu Marketingseiten mit großen, selbstbewussten Headlines.
Fluid Type mit clamp()
Eine Überschrift, die auf dem Desktop perfekt aussieht, ist auf dem Smartphone oft zu groß. Fluide Schritte interpolieren zwischen einer mobilen und einer Desktop-Skala: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) bleibt auf kleinen Bildschirmen beim Minimum, wächst linear mit dem Viewport und stoppt beim Maximum. Die Werte sind in rem angegeben und berücksichtigen daher weiterhin die Schriftgrößen-Einstellung des Browsers der Besucher. Für einzelne Werte hilft der Clamp Calculator; Einheiten rechnest du mit PX to REM um.
Auch gesucht als: type scale generator, typografische skala, modulare schriftgrößen, fluid typography generator, schriftgrößen skala, clamp schriftgröße generator, tailwind font size scale, type scale rechner.
Passende Tools zu: Schriftgrößen-Skala Generator
- CSS Grid Generator — Lege die Spalten, Zeilen und den Abstand fest und ziehe über Zellen, um Bereiche wie Header, Sidebar und Hauptinhalt zu erstellen.
- CSS Flexbox Generator — Sieh genau, was jede Flexbox-Eigenschaft bewirkt: Lege Richtung, Umbruch, justify-content, align-items und Abstand fest, füge Elemente hinzu oder entferne sie, und klicke auf ein Element, um seine flex-grow, shrink, basis, order und align-self einzustellen.
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
- Kontrast-Checker — Gib eine Text- und eine Hintergrundfarbe ein, und du erhältst das exakte WCAG-Kontrastverhältnis, Bestanden/Nicht bestanden für jede Stufe, einen APCA-Wert und Korrekturen mit einem Klick, die deinen Farbton behalten.