# Typografisk skala: størrelser som hører sammen

[Canonical HTML page](https://gradiently.design/nb/guide/typographic-scale)

Velger du skriftstørrelser på følelsen, spriker de: 18, 22, 23, 30, 31. En typografisk skala erstatter gjettingen med én grunnstørrelse og ett forholdstall, så alle størrelsene hører til samme familie.

## The short version

- En typografisk skala er et lite sett med skriftstørrelser laget ved å multiplisere en grunnstørrelse med samme forholdstall igjen og igjen.
- Små forholdstall som 1,2 passer tette grensesnitt, mens store som 1,5 passer plakater, sosiale innlegg og landingssider.
- Med 16 px som grunnstørrelse og 1,25 som forholdstall blir skalaen 16, 20, 25, 31, 39 og 49 px.
- De fleste design trenger bare fem eller seks størrelser, og det er greit å runde resultatene til hele piksler.
- I CSS er en typografisk skala enklest å vedlikeholde som egendefinerte egenskaper, gjort flytende med clamp().

En **typografisk skala** er et sett med skriftstørrelser bygd av én grunnstørrelse og ett forholdstall. Du begynner med brødtekststørrelsen, for eksempel 16 px, og multipliserer med forholdstallet for å få neste størrelse. Deretter multipliserer du igjen. Med 1,25 får du 16, 20, 25, 31, 39 og 49 px. Fordi hvert trinn vokser i samme forhold, ser størrelsene beslektet ut, og overskriftsstørrelsen slutter å være en gjetning.

## Hvorfor en typografisk skala samler størrelsene

Øyet leser størrelse som forhold, ikke som piksler. Spranget fra 16 til 20 føles likt spranget fra 39 til 49, fordi begge er omtrent en firedel større. Størrelser valgt på følelsen klumper seg gjerne noen steder og gir hull andre steder. To overskrifter ender nesten like store og ser ut som en feil. En skala gir hvert nivå et tydelig, konsekvent trinn, som er ryggraden i [visuelt hierarki](https://gradiently.design/nb/guide/visual-hierarchy).

## Vanlige forholdstall i typografiske skalaer

Mange populære forholdstall låner navn fra musikalske intervaller, og en skala bygd slik kalles ofte en modulær skala. Navnet betyr mindre enn spranget: jo større forholdstall, desto mer dramatikk mellom nivåene og desto færre nivåer får plass på siden.

| Navn | Forholdstall | Følelse | Passer til |
| --- | --- | --- | --- |
| Liten sekund | 1,067 | Knapt forskjellig | Tette datatabeller og små skjermer |
| Stor sekund | 1,125 | Forsiktig | Apper og dashbord |
| Liten ters | 1,2 | Rolig og tydelig | Grensesnitt, dokumentasjon og lange tekster |
| Stor ters | 1,25 | Balansert | Nettsider og blogger, et trygt standardvalg |
| Ren kvart | 1,333 | Sikkert | Markedsføringssider og redaksjonelt innhold |
| Forstørret kvart | 1,414 | Sterkt | Landingssider og presentasjoner |
| Ren kvint | 1,5 | Kraftfullt | Plakater, sosiale innlegg og store overskrifter |
| Det gylne snitt | 1,618 | Dramatisk | Display-typografi med få nivåer |

Vanlige forholdstall fra små til store. Er du usikker, begynn med 1,25 til nettet og 1,5 til sosiale innlegg.

## Typografiske skalaverdier i piksler

Her er samme grunnstørrelse på 16 px brukt med fire forholdstall. Legg merke til hvor raskt de store stiger: på trinn 4 er en 1,5-skala allerede på 81 px, mens en 1,2-skala er på 33 px.

| Trinn | 1,2 | 1,25 | 1,333 | 1,5 |
| --- | --- | --- | --- | --- |
| Liten (trinn −1) | 13 | 13 | 12 | 11 |
| Brødtekst (grunnstørrelse) | 16 | 16 | 16 | 16 |
| Trinn 1 | 19 | 20 | 21 | 24 |
| Trinn 2 | 23 | 25 | 28 | 36 |
| Trinn 3 | 28 | 31 | 38 | 54 |
| Trinn 4 | 33 | 39 | 51 | 81 |
| Trinn 5 | 40 | 49 | 67 | 122 |

Verdier avrundet til hele piksler. Trinnet under grunnstørrelsen er grunnstørrelsen delt på forholdstallet, brukt til bildetekster og etiketter.

Avrunding er greit. Ingen ser forskjellen mellom 31,25 og 31 px, og hele tall er enklere å huske og plassere i et rutenett.

## Slik bygger du din egen typografiske skala

1. **Velg grunnstørrelsen** Dette er brødteksten. 16 til 18 px passer de fleste nettsider; på et sosialt lerret i 1080 px begynner du med 40 px.
2. **Velg forholdstall etter innholdet** Mye tekst og mange overskriftsnivåer trenger et lite forholdstall. Få ord og én stor overskrift trenger et stort.
3. **Lag fem eller seks trinn** Multipliser oppover til overskrifter og del én gang til liten tekst. De fleste design bruker aldri mer enn seks størrelser.
4. **Rund av og navngi** Rund til hele piksler og gi trinnene navn etter rolle, som bildetekst, brødtekst, tittel og display, ikke etter tall.
5. **Sett linjehøyde for hvert trinn** Større tekst trenger tettere linjeavstand. Brødtekst rundt 1,5, titler rundt 1,2 og display-tekst nær 1,0.
6. **Test med ekte ord** Sett en faktisk overskrift, underoverskrift og et avsnitt. Hvis to trinn ligner for mye, hopp over ett eller øk forholdstallet.

## En typografisk skala for sosiale innlegg

Sosiale innlegg trenger større forholdstall enn nettsider, fordi et lerret på 1080 px krymper til en tredel av bredden på telefonen og bare har to eller tre tekstnivåer. En grunnstørrelse på 40 px med 1,5 gir 40, 60, 90 og 135 px. Det passer godt med størrelsene i [skriftstørrelse for Instagram-innlegg](https://gradiently.design/nb/guide/font-size-for-social-media).

Et stående sosialt innlegg med en stor statistikk som sier 3 ganger raskere betaling over mindre støttetekst

Et statistikkinnlegg trenger tre tydelige nivåer: tallet, detaljen og etiketten. På en 1,5-skala er de 135, 60 og 40 px.

Et stående karusellbilde med tittelen Før du publiserer og en kort sjekkliste under

Et listelysbilde bruker de lavere trinnene i samme skala og passer derfor godt ved siden av statistikkbildet i én karusell.

Én skala på alle lysbilder i en karusell får settet til å se designet ut fremfor satt sammen. Samme størrelser i samme roller, lysbilde etter lysbilde. [Tekstoppsett for innlegg i sosiale medier](https://gradiently.design/nb/guide/text-hierarchy-social) viser hvordan du plasserer dem.

## Slik skriver du en typografisk skala i CSS

Lagre skalaen som egendefinerte egenskaper så alle komponenter bruker den. Du kan kjede multiplikasjoner med `calc()` eller skrive ut de avrundede verdiene. For en skala som vokser med skjermen, gir du hvert trinn et [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)-spenn: et minimum til telefoner, et maksimum til brede skjermer og en flytende verdi mellom.

```css
/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }
```

Endre `--ratio` én gang, så oppdateres alle trinn. Bruk `rem` i minimumsverdien til hver clamp så teksten fortsatt respekterer leserens egen skriftstørrelse.

### Unngå

- Ti størrelser når fem holder
- To overskrifter med 2 px forskjell
- Samme forholdstall til et dashbord og en plakat
- Faste pikselstørrelser som ignorerer leserens skriftinnstillinger

### Gjør dette

- Fem eller seks trinn, hvert med en navngitt rolle
- Hopp over et trinn hvis to nivåer ligner
- Lite forholdstall til tette skjermer, stort til få ord
- rem-baserte størrelser, flytende med clamp()

En skala er én del av et større sett med valg om skrifter, avstand og roller. [Typografisystem](https://gradiently.design/nb/guide/brand-typography-system) samler dem, og [bokstavavstand og kerning](https://gradiently.design/nb/guide/tracking-vs-kerning) dekker avstandsverdiene som passer hvert trinn. Lager du sosialt innhold, holder merkevaresettet i Gradiently overskrifts- og brødtekstskriftene dine, og Designer bruker dem i hver nye størrelse. Det gjør en skala du bestemmer én gang, lett å beholde.

## FAQ

### Hva er en typografisk skala?

Et sett med skriftstørrelser laget ved å multiplisere en grunnstørrelse gjentatte ganger med samme forholdstall, så alle størrelsene står i forhold til hverandre.

### Hva er det beste forholdstallet for en typografisk skala?

Det finnes ikke ett beste valg. 1,2 eller 1,25 passer nettsider og apper med mye tekst; 1,5 eller mer passer plakater og sosiale innlegg med få ord.

### Hvor mange skriftstørrelser bør et design bruke?

Vanligvis fem eller seks: liten tekst, brødtekst, to eller tre overskriftsnivåer og én display-størrelse.

### Bør jeg runde av verdiene i den typografiske skalaen?

Ja. Avrunding til hele piksler gir ingen synlig forskjell og gjør skalaen enklere å bruke og huske.

### Hvordan gjør jeg en typografisk skala responsiv i CSS?

Bruk `clamp()` for hvert trinn, med et minimum i rem, en flytende midtverdi med viewport-enheter og et maksimum for brede skjermer.