# Typografisk skala: storlekar som hänger ihop

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

Välj teckenstorlekar på känsla så börjar de glida: 18, 22, 23, 30, 31. En typografisk skala ersätter gissningarna med en basstorlek och en proportion, så att varje storlek ser ut att höra till samma familj.

## The short version

- En typografisk skala är en kort uppsättning teckenstorlekar som bildas genom att en basstorlek multipliceras med samma proportion om och om igen.
- Små proportioner som 1,2 passar täta gränssnitt, medan stora proportioner som 1,5 passar affischer, inlägg i sociala medier och målsidor.
- Med basen 16 px och proportionen 1,25 löper skalan 16, 20, 25, 31, 39 och 49 px.
- De flesta designer behöver bara fem eller sex storlekar, och det går bra att avrunda resultaten till hela pixlar.
- I CSS är en typografisk skala lättast att underhålla som anpassade egenskaper, gjorda flytande med clamp().

En **typografisk skala** är en uppsättning teckenstorlekar byggd på en basstorlek och en proportion. Du börjar med din brödtextstorlek, säg 16 px, och multiplicerar med proportionen för att få nästa storlek uppåt, och sedan igen för nästa. Med proportionen 1,25 får du 16, 20, 25, 31, 39 och 49 px. Eftersom varje steg växer med samma andel ser storlekarna sammanhängande ut, och att välja en rubrikstorlek slutar vara en gissning.

## Därför får en typografisk skala storlekar att se sammanhängande ut

Ögat läser storlek som proportion, inte som pixlar. Hoppet från 16 till 20 känns likadant som hoppet från 39 till 49, eftersom båda är en fjärdedel större. Storlekar som valts på känsla tenderar att klumpa ihop sig på vissa ställen och lämna luckor på andra, så två rubriker blir nästan lika stora och ser ut som ett misstag. En skala ger varje nivå ett tydligt, jämnt steg, vilket är ryggraden i [visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy).

## Vanliga proportioner för typografiska skalor jämförda

Många populära proportioner har fått namn efter musikaliska intervall, och en skala byggd så kallas ofta en modulär skala. Namnet spelar mindre roll än stegets storlek: ju större proportion, desto mer dramatik mellan nivåerna och desto färre nivåer ryms på en sida.

| Namn | Proportion | Känsla | Bra för |
| --- | --- | --- | --- |
| Liten sekund | 1,067 | Knappt någon skillnad | Täta datatabeller, små skärmar |
| Stor sekund | 1,125 | Mild | Appar och instrumentpaneler |
| Liten ters | 1,2 | Lugn och tydlig | Gränssnitt, dokumentation, långläsning |
| Stor ters | 1,25 | Balanserad | Webbplatser och bloggar, ett tryggt standardval |
| Ren kvart | 1,333 | Självsäker | Marknadsföringssidor, redaktionellt |
| Överstigande kvart | 1,414 | Stark | Målsidor, presentationer |
| Ren kvint | 1,5 | Djärv | Affischer, inlägg i sociala medier, stora rubriker |
| Gyllene snittet | 1,618 | Dramatisk | Rubriktext med få nivåer |

Vanliga proportioner från små till stora. Är du osäker, börja på 1,25 för webben och 1,5 för inlägg i sociala medier.

## Värden i pixlar för typografiska skalor

Här är samma bas på 16 px körd genom fyra proportioner. Lägg märke till hur snabbt de stora proportionerna klättrar: vid steg 4 ligger en skala på 1,5 redan på 81 px, medan en skala på 1,2 ligger på 33 px.

| Steg | 1,2 | 1,25 | 1,333 | 1,5 |
| --- | --- | --- | --- | --- |
| Liten (steg −1) | 13 | 13 | 12 | 11 |
| Brödtext (bas) | 16 | 16 | 16 | 16 |
| Steg 1 | 19 | 20 | 21 | 24 |
| Steg 2 | 23 | 25 | 28 | 36 |
| Steg 3 | 28 | 31 | 38 | 54 |
| Steg 4 | 33 | 39 | 51 | 81 |
| Steg 5 | 40 | 49 | 67 | 122 |

Värden avrundade till hela pixlar. Steget under basen är basen delad med proportionen, och används till bildtexter och etiketter.

Avrundning går bra. Ingen kan se skillnad på 31,25 och 31 px, och hela tal är lättare att komma ihåg och att linjera på ett rutnät.

## Så bygger du din egen typografiska skala

1. **Välj basstorlek** Det är din brödtext. 16 till 18 px passar de flesta webbplatser; på en social yta på 1080 px, börja på 40 px.
2. **Välj en proportion utifrån innehållet** Mycket text och många rubriknivåer vill ha en liten proportion. Få ord och en stor rubrik vill ha en stor.
3. **Ta fram fem eller sex steg** Multiplicera uppåt för rubriker och dela en gång för liten text. De flesta designer använder aldrig fler än sex storlekar.
4. **Avrunda och namnge** Avrunda till hela pixlar och namnge stegen efter roll, som bildtext, brödtext, titel och display, inte efter nummer.
5. **Sätt radavstånd per steg** Större storlekar behöver tätare radavstånd. Brödtext kring 1,5, titlar kring 1,2 och rubriktext nära 1,0.
6. **Testa med riktiga ord** Sätt en riktig rubrik, underrubrik och ett stycke. Om två steg ser för lika ut, hoppa över ett eller höj proportionen.

## En typografisk skala för inlägg i sociala medier

Inlägg i sociala medier behöver en större proportion än webbsidor, eftersom en yta på 1080 px krymper till en tredjedel av sin bredd i en mobil och det bara finns två eller tre textnivåer. En bas på 40 px med proportionen 1,5 ger 40, 60, 90 och 135 px, vilket stämmer fint med storlekarna i [teckenstorlek för inlägg på Instagram](https://gradiently.design/sv/guide/font-size-for-social-media).

Ett stående socialt inlägg med en stor statistiksiffra, 3 gånger snabbare kassa, ovanför mindre stödtext

Ett siffrainlägg behöver tre tydliga nivåer: siffran, detaljen och etiketten. På en skala på 1,5 är de 135, 60 och 40 px.

En stående karusellbild med rubriken Innan du postar och en kort checklista under

En listbild använder de lägre stegen i samma skala, så den sitter bekvämt bredvid siffrabilden i en karusell.

Att använda en skala över alla bilder i en karusell är det som får ett set att se designat ut snarare än hopsatt. Samma storlekar i samma roller, bild efter bild. [Textlayout för inlägg i sociala medier](https://gradiently.design/sv/guide/text-hierarchy-social) visar hur du ordnar dem.

## Så skriver du en typografisk skala i CSS

Lagra skalan som anpassade egenskaper så att varje komponent hämtar från den. Du kan kedja multiplikationer med `calc()`, eller skriva ut de avrundade värdena. För en skala som växer med skärmen ger du varje steg ett [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)-intervall: ett minimum för mobiler, ett maximum för breda skärmar och ett flytande värde däremellan.

```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); }
```

Ändra `--ratio` en gång så uppdateras varje steg. Behåll `rem` i minimumvärdet i varje clamp så att texten fortfarande respekterar läsarens egen inställning för teckenstorlek.

### Undvik

- Tio storlekar när fem räcker
- Två rubriker med 2 px emellan
- Samma proportion för en instrumentpanel och en affisch
- Fasta pixelstorlekar som ignorerar läsarens typsnittsinställningar

### Gör

- Fem eller sex steg, vart och ett med en namngiven roll
- Hoppa över ett steg om två nivåer ser lika ut
- Liten proportion för täta skärmar, stor för få ord
- Storlekar i rem, flytande med clamp()

En skala är en del av en större uppsättning beslut om typsnitt, avstånd och roller. [Typografiskt system](https://gradiently.design/sv/guide/brand-typography-system) för ihop dem, och [spärrning och kerning](https://gradiently.design/sv/guide/tracking-vs-kerning) tar upp avståndsvärdena som hör till varje steg. Om du designar för sociala medier håller varumärkeskitet i Gradiently dina rubrik- och brödtypsnitt, och Designer tillämpar dem på varje ny storlek, vilket gör en skala du bestämt dig för en gång lätt att hålla.

## FAQ

### Vad är en typografisk skala?

En uppsättning teckenstorlekar som bildas genom att en basstorlek multipliceras med samma proportion gång på gång, så att varje storlek står i proportion till de andra.

### Vilken proportion är bäst för en typografisk skala?

Det finns ingen enskild bästa. 1,2 eller 1,25 passar webbplatser och appar med mycket text; 1,5 eller mer passar affischer och inlägg i sociala medier med få ord.

### Hur många teckenstorlekar ska en design använda?

Oftast fem eller sex: en liten storlek, brödtext, två eller tre rubriknivåer och en displaystorlek.

### Ska jag avrunda värdena i en typografisk skala?

Ja. Avrundning till hela pixlar gör ingen synlig skillnad och gör skalan lättare att använda och komma ihåg.

### Hur gör jag en typografisk skala responsiv i CSS?

Använd `clamp()` för varje steg, med ett minimum i rem, ett flytande mellanvärde med viewportenheter och ett maximum för breda skärmar.