§ 16

Typographische Skala (modular skala)

Wie großes Heading sollte auf meiner Skala sein?

Antwort: Eine typographische Skala gibt alle Größen auf der Seite von einer Grundzahl und einem Verhältnis: Die Fließtextgröße mal das Verhältnis einmal ergibt h4, zweimal h3 und so weiter. So hängen h1 bis small zusammen, anstatt zufällige Zahlen zu sein. Wähle die Größe der Fließtext, das Verhältnis und die Schritte, und erhalte die Größe in px und rem.

Formel

Størrelse = brødtekst × forhold^trin

Trin 0 = brødtekst, positive trin er overskrifter, negative trin er småtekst

rem = px ÷ rod-størrelsen (normalt 16 px)

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
basis_px	Größe des Breittext (Schritt 0)	px
forhold	Verhältnis zwischen den Stufen	—
trin	Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)	trin
rod_px	Stiftgröße (1 Rem)	px
=	Größe dieser Stufe	px
=	Größe im Riemen	rem
=	Eine Stufe weiter unten	px
=	Eine Stufe weiter oben	px

Gültigkeit und Quelle

Quelle: Modulare Skala · Tim Brown, «More Meaningful Typography» (A List Apart 2011)

Gilt nicht, wenn

Die Verhältnisse stammen aus den Intervallen der Musik, wie Tim Brown vorgeschlagen hat. Auf dem Mobilgerät verwendet man oft ein kleineres Verhältnis als auf dem Desktop, da die oberen Stufen sonst zu groß für den Bildschirm werden.

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

Größe des Breittext (Schritt 0)16 px
Verhältnis zwischen den Stufen1,25
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)4 trin
Stiftgröße (1 Rem)16 px

Geber

Größe dieser Stufe39,1 px
Größe im Riemen2,441 rem
Eine Stufe weiter unten31,3 px
Eine Stufe weiter oben48,8 px

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

Når du sætter typografien op i et nyt projekt, giver en modulær skala alle størrelser fra h1 til small ét fælles forhold. Så ser hierarkiet bevidst ud, og nye størrelser kan findes uden at gætte. Beregneren giver størrelsen på et trin og trinnene lige over og under.

Schritt für Schritt

Vælg brødtekstens størrelse, typisk 16-18 px. Det er trin 0.
Vælg forholdet. Små forhold (1,125-1,2) til tekstsider, store (1,333-1,618) til kampagner og forsider.
Gang brødteksten med forholdet én gang pr. trin opad. Del med forholdet for hvert trin nedad.
Omregn til rem, og læg størrelserne i CSS-variabler, fx --step-1 til --step-4.

Typische Fehler

At runde hvert trin og gange videre med det rundede tal. Regn hvert trin fra brødteksten, og rund kun til sidst.
At bruge et stort forhold på mobil. h1 med 1,618 på trin 4 bliver over 100 px.
At lade linjehøjden stå fast. Store overskrifter skal have lavere linjehøjde (ca. 1,1-1,2) end brødtekst (ca. 1,5).

Beispiele aus dem Alltag

h1 i et designsystem

Et kommunalt site har brødtekst på 16 px og bruger «stor terts» (1,25). h1 er trin 4.

Größe des Breittext (Schritt 0): 16 px
Verhältnis zwischen den Stufen: 1,25 · große Terz
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small): 4 Stufe
Stiftgröße (1 Rem): 16 px

Es bedeutet: h1 bliver 39,1 px (2,441 Riemen). Trinnet under (h2) er 31,3 px.

Småtekst på en tekstside

En nyhedsside har brødtekst på 18 px og en «lille terts» (1,2). Billedtekster skal være ét trin under.

Größe des Breittext (Schritt 0): 18 px
Verhältnis zwischen den Stufen: 1,2 · kleine Terz
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small): -1 Stufe
Stiftgröße (1 Rem): 16 px

Es bedeutet: Billedteksten bliver 15 px, altså 0,938 Riemen. Det er læseligt og tydeligt mindre end brødteksten.

Stor overskrift på en landingsside

En landingsside for en app vil have store kontraster med det gyldne snit (1,618) og en hero-overskrift på trin 3.

Größe des Breittext (Schritt 0): 16 px
Verhältnis zwischen den Stufen: 1,618 · der goldene Schnitt (große Kontraste)
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small): 3 Stufe
Stiftgröße (1 Rem): 16 px

Es bedeutet: Overskriften bliver 67,8 px. Det er for stort til en telefon, så kombinér med clamp() og et mindre forhold på mobil.

Faustregel

Med 1,25 bliver hvert andet trin ca. 1,56 gange større, og fire trin giver lidt under 2,5 gange brødteksten.

So überprüfst du die Antwort

Del trinnet over med trinnet under. Det skal give forholdet i anden potens.