Typografische Skala generieren | Modulares Verhältnis | Awesome Toolkit

Typografie-Skala Generator

Modulare Typografische Skala erstellen: Basisgröße in px, Verhältnis (Perfect Fourth, Golden Ratio) und Schritte.

Von Marshkalk

Deutsche Typografie-Konventionen und Bundesschriften

Im deutschen Webdesign liegt der Fliesstext typischerweise bei 16-18px, mit einem Zeilenabstand von 1,5 fur angenehme Lesbarkeit. Fur deutsche Behorden und offentliche Einrichtungen definiert das Corporate Design der Bundesregierung die BundesSerif und BundesSans als offizielle Schriften. Diese Schriften sind auf klare Lesbarkeit bei langen Texten ausgelegt , ein Anwendungsfall, der eher die Grosse Sekunde (1.125) als ein dramatischeres Verhaltnis wie den Goldenen Schnitt (1.618) begununstigt. Fur private Projekte und Unternehmenswebsites ist die Grosse Terz (1.250) das haufigste Verhaltnis in DACH-Designprojekten, da es eine klare Hierarchie schafft ohne die Textgrossen zu stark zu spreizen.

Tailwind-CSS-Konfigurationen in DACH-Projekten ubernehmen die generierten Werte direkt unter dem Schlussel fontSize in der tailwind.config.js. Dark Mode ist in deutschsprachigen Projekten stark nachgefragt; die Schriftgrossenverhaltnisse bleiben im Dark Mode unverandert, aber der Zeilenabstand sollte auf etwa 1.6 angehoben werden, da helle Schrift auf dunklem Grund eine etwas lockerere Setzung benotigt.

Haufige Skalenverhältnisse

VerhaltnisNameGeeignet fur
1.125Grosse SekundeDichte Oberflachen, Datenanwendungen
1.250Grosse TerzApps, Designsysteme, Behorden-Websites
1.333Reine QuarteAllgemeine Websites, Blogs
1.618Goldener SchnittEditorial, Marketing, Landingpages

Grenzen mathematischer Typografieskalierungen

Eine mathematische Skala sichert konsistente Proportionsverhaltnisse , sie garantiert keine visuelle Harmonie bei jeder Schriftart. Schriften mit grosser x-Hohe (Inter, Roboto) wirken bei gleicher px-Grosse grosser als Schriften mit kleiner x-Hohe (Garamond). Die generierte Skala immer mit der tatsachlichen Zielschrift und bei verschiedenen Zoomstufen prufen , besonders bei 200 % Zoom (eine verbreitete Bedurfnis bei Sehbehinderung). Die Werte sind ein Ausgangspunkt; optische Feinjustierung bleibt Teil der typografischen Arbeit.

rem vs. px in der DACH-Entwickler-Community

Die DACH-Frontend-Community bevorzugt rem gegenuber px fur Schriftgrossen: rem berucksichtigt die vom Nutzer im Browser eingestellte Basisgrossse, was eine Barrierefreiheitsanforderung ist (WCAG 1.4.4). Verwenden Sie clamp(min, bevorzugt, max) fur fluide Skalierung: font-size: clamp(1rem, 2.5vw, 1.5rem).