Skip to content
Discebo.dk

§ 16

Typographic scale (modular scale)

How large should the heading be on my scale?

Answer: A typographical scale gives all sizes on the page from one base number and one ratio: the body text times the ratio once gives h4, twice h3 and so on. So h1 to small hang together instead of being random numbers. Choose the body text size, the ratio and the step, and get the size in px and rem.

Formula

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)

Symbols and units in the formula
SymbolMeaningUnit
basis_pxBody text size (step 0)px
forholdRatio between the steps—
trinTrin på skalaen (fx 4 = h1, 3 = h2, −1 = small)trin
rod_pxRoot font size (1 rem)px
=Size of this steppx
=Size in remrem
=One step further downpx
=One step further uppx

Validity and source

Source
Modular scale · Tim Brown, «More Meaningful Typography» (A List Apart 2011)

Does not apply when

  • The ratios are taken from musical intervals as suggested by Tim Brown. On mobile you often use a smaller ratio than on desktop because the top steps would otherwise become too large for the screen.

Worked example

The calculator's own default values inserted. The figures are calculated with exactly the formula the tool uses.

Substituted

  • Body text size (step 0)16 px
  • Ratio between the steps1.25
  • Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)4 trin
  • Root font size (1 rem)16 px

Giver

  • Size of this step39.1 px
  • Size in rem2.441 rem
  • One step further down31.3 px
  • One step further up48.8 px

Members only

The calculator itself is locked

Create a free user account to unlock all articles, calculators, templates and range — and get access to quizzes and classes. It takes less than a minute: name, email and a password. No payment card.

Create free user →Log in

Want to try something first? See what you can use without an account — the junior zone, the encyclopedia, the videos and more.

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.

Step by step

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

Typical errors

  • 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).

Examples from everyday life

h1 i et designsystem

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

Body text size (step 0)
16 px
Ratio between the steps
1.25 · major third
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)
4 step
Root font size (1 rem)
16 px

It means: h1 bliver 39.1 px (2.441 plate). 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.

Body text size (step 0)
18 px
Ratio between the steps
1.2 · minor third
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)
-1 step
Root font size (1 rem)
16 px

It means: Billedteksten bliver 15 px, altså 0.938 plate. 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.

Body text size (step 0)
16 px
Ratio between the steps
1.618 · the golden ratio (large contrasts)
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)
3 step
Root font size (1 rem)
16 px

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

Rule of thumb

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

How to check the answer

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