§ 16
Hvor stor skal overskriften være på min skala?
Svar: En typografisk skala giver alle størrelser på siden fra ét grundtal og ét forhold: brødteksten ganget med forholdet én gang giver h4, to gange h3 og så videre. Så hænger h1 til small sammen i stedet for at være tilfældige tal. Vælg brødtekstens størrelse, forholdet og trinnet, og få størrelsen i px og rem.
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)
| Symbol | Betydning | Enhed |
|---|---|---|
| basis_px | Brødtekstens størrelse (trin 0) | px |
| forhold | Forhold mellem trinnene | — |
| trin | Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small) | trin |
| rod_px | Rod-skriftstørrelse (1 rem) | px |
| = | Størrelse på dette trin | px |
| = | Størrelse i rem | rem |
| = | Ét trin længere nede | px |
| = | Ét trin længere oppe | px |
Gælder ikke når
Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.
Sat ind
Giver
Kun for medlemmer
Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.
Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.
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.
Et kommunalt site har brødtekst på 16 px og bruger «stor terts» (1,25). h1 er trin 4.
Det betyder: h1 bliver 39,1 px (2,441 rem). Trinnet under (h2) er 31,3 px.
En nyhedsside har brødtekst på 18 px og en «lille terts» (1,2). Billedtekster skal være ét trin under.
Det betyder: Billedteksten bliver 15 px, altså 0,938 rem. Det er læseligt og tydeligt mindre end brødteksten.
En landingsside for en app vil have store kontraster med det gyldne snit (1,618) og en hero-overskrift på trin 3.
Det betyder: Overskriften bliver 67,8 px. Det er for stort til en telefon, så kombinér med clamp() og et mindre forhold på mobil.
Med 1,25 bliver hvert andet trin ca. 1,56 gange større, og fire trin giver lidt under 2,5 gange brødteksten.
Del trinnet over med trinnet under. Det skal give forholdet i anden potens.