Warum wirken manche Webseiten typografisch ruhig und andere unruhig, obwohl beide dieselben Schriftarten verwenden? Oft liegt es an den Groessen. Wer Ueberschriften, Fliesstext und Beschriftungen frei nach Gefuehl waehlt, bekommt selten ein stimmiges Bild. Die Modular Scale loest das Problem, indem sie alle Groessen aus einer Basis und einem festen Verhaeltnis ableitet. Dieser Artikel erklaert das Prinzip und wie du es anwendest.
Das Prinzip: Basis mal Verhaeltnis
Eine Modular Scale ist eine geometrische Reihe. Du startest mit einer Basisgroesse (typisch 16 px fuer Fliesstext) und einem Verhaeltnis (Ratio). Jede naechstgroessere Stufe entsteht, indem du multiplizierst; jede kleinere, indem du dividierst:
- Basis: 16 px
- Stufe +1: 16 × Ratio
- Stufe +2: 16 × Ratio × Ratio
- Stufe −1: 16 ÷ Ratio
Bei einem Ratio von 1,25 ergibt das etwa 16, 20, 25, 31, 39 px nach oben – eine Treppe, deren Schritte sich immer gleich anfuehlen, weil das Verhaeltnis konstant bleibt. Genau diese Reihe spuckt der Modular Scale Rechner aus: Du gibst Basis und Verhaeltnis ein und erhaeltst die fertige Groessenskala in beide Richtungen.
Welches Verhaeltnis nehmen?
Das Ratio bestimmt, wie stark der Kontrast zwischen den Stufen ausfaellt. Gaengige, aus der Musik und der Gestaltung entliehene Werte sind:
- 1,125 (Major Second): sehr dezent, enge Abstaende – gut fuer textlastige, ruhige Layouts.
- 1,25 (Major Third): ausgewogener Allrounder fuer viele Websites.
- 1,333 (Perfect Fourth): deutlicher Kontrast, gibt Ueberschriften Praesenz.
- 1,618 (Golden Ratio): grosser Sprung – ausdrucksstark, aber auf kleinen Bildschirmen schnell zu viel.
Faustregel: Je groesser das Ratio, desto dramatischer der Unterschied zwischen Ueberschrift und Text. Fuer Lesetexte waehlt man eher die kleineren Werte, fuer plakative Landingpages die groesseren.
Von der Skala in den Code
In der Praxis legst du die berechneten Werte als CSS-Variablen ab – etwa --text-base, --text-lg, --text-xl – und nutzt nur noch diese, statt irgendwo eine willkuerliche Pixelzahl einzutippen. Das haelt die Typografie konsistent und macht spaetere Aenderungen trivial: Passt du Basis oder Ratio an, skaliert das ganze System harmonisch mit.
Ein moderner Zusatz ist, die Schriftgroessen nicht fix, sondern fluid zwischen zwei Bildschirmgroessen zu interpolieren. Das uebernimmt der CSS Clamp Generator, in den du die Endwerte deiner Skala einsetzt. Auch Zeilenhoehe und Abstaende sollten zur Skala passen – dafuer hilft der Line Height Rechner. Weitere Werkzeuge fuer Design und Frontend findest du unter kotsch.tech/webtools.
Fazit
Eine Modular Scale ersetzt Bauchgefuehl durch ein einfaches mathematisches Prinzip: eine Basis, ein Verhaeltnis, der Rest ergibt sich. Das Resultat sind Schriftgroessen, die wie aus einem Guss wirken und sich zentral steuern lassen. Die Rechnerei nimmt dir ein Generator ab – du entscheidest nur ueber Basis und Ratio.