# Typografins grunder: storlek, vikt, avstånd och rytm

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

Det mesta som får text att se professionell ut är inte typsnittet. Det är sex beslut om storlek, vikt och avstånd, och vart och ett har ett rimligt standardvärde.

## The short version

- Typografi vilar på sex beslut: storlek, vikt, radavstånd, bokstavsavstånd, justering och radlängd.
- En typskala, där varje storlek är ett fast förhållande större än den förra, ger en design en tydlig och konsekvent hierarki.
- Brödtext läses bekvämt med ett radavstånd på ungefär 1,4 till 1,6 gånger teckenstorleken, medan stora rubriker behöver mindre, runt 1,0 till 1,2.
- Rader på ungefär 45 till 75 tecken är det spann som oftast rekommenderas för bekväm läsning.
- Två eller tre vikter räcker för de flesta designer, och de ska skilja sig tydligt, som normal och fet snarare än normal och medium.

**Typografins grunder** består av sex beslut: **storleken** på varje textstycke, dess **vikt**, **radavståndet**, **bokstavsavståndet**, **justeringen** och **radlängden**. Får du de rätt ser nästan vilket anständigt typsnitt som helst professionellt ut; får du dem fel ser världens bästa typsnitt amatörmässigt ut. Vart och ett har ett rimligt standardvärde, angivet nedan, som du kan avvika från med avsikt.

## Storlek: använd en typskala

Väljer du storlekar en i taget får du en sida full av nästan lika storlekar och ingen tydlig ordning. En **typskala** åtgärdar det: börja från en basstorlek och multiplicera med samma förhållande för varje steg uppåt. Förhållandet bestämmer karaktären. Små förhållanden, som 1,2, känns lugna och täta; stora, som 1,5, känns dramatiska och redaktionella.

| Steg | Förhållande 1,25 från 16 px | Vanlig användning |
| --- | --- | --- |
| Liten | 12,8 px | Bildtexter, etiketter |
| Bas | 16 px | Brödtext |
| Steg 1 | 20 px | Ingress, stor brödtext |
| Steg 2 | 25 px | Underrubriker |
| Steg 3 | 31,25 px | Avsnittsrubriker |
| Steg 4 | 39 px | Sidtitlar |
| Steg 5 | 48,8 px | Hero-rubriker |

En skala med 1,25 från en bas på 16 pixlar. Avrunda talen som du vill; poängen är att varje storlek hänger ihop med de andra.

```css
:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }
```

Samma skala som egna CSS-egenskaper, med en rotstorlek på 16 pixlar. Använd bara stegen från skalan.

I inlägg för sociala medier är ytan större, så talen är högre men idén är densamma. På ett inlägg som är 1080 pixlar brett ger en rubrik på cirka 90 till 120 pixlar och en detaljrad på cirka 40 till 56 ett tydligt steg mellan dem och läses på en telefon.

## Vikt: färre vikter, tydligare steg

Vikt är strecktjockleken, vanligen numrerad från 100 (tunn) till 900 (extra fet), med 400 som normal och 700 som fet. Två eller tre vikter räcker för de flesta designer. Nyckeln är att intilliggande vikter måste se olika ut: normal mot fet läses som en medveten kontrast, normal mot medium läses ofta som ett misstag.

### Rörigt

- Fem vikter på en sida
- Normal 400 mot medium 500 för betoning
- Ljusa eller tunna vikter för liten brödtext
- Fet text i hela stycken

### Tydligt

- Två eller tre vikter, var och en med en uppgift
- Normal 400 mot fet 700 eller halvfet 600
- Normal eller medium för brödtext i små storlekar
- Fet för några få ord som måste sticka ut

## Radavstånd: luft mellan raderna

Radavstånd är avståndet från en rad till nästa. Brödtext behöver luft för att läsas bekvämt: ungefär **1,4 till 1,6** gånger teckenstorleken är ett pålitligt spann. Stora rubriker behöver mindre, runt **1,0 till 1,2**, eftersom glappen vid stora storlekar ser mycket bredare ut än de är. Långa rader behöver lite mer radavstånd än korta, så att ögat hittar början på nästa rad. [Radavstånd och radlängd](https://gradiently.design/sv/guide/line-height-and-line-length) går djupare.

## Bokstavsavstånd: låt det mest vara

Typsnitt är avståndssatta av sina formgivare för sina avsedda storlekar, så brödtext behöver sällan justeras. Två undantag är värda att känna till. Stora rubriker ser ofta bättre ut något tätare, ett litet negativt värde som -0.01em till -0.02em. Text med versaler, och små etiketter, behöver motsatsen: lite extra avstånd, runt 0.05em till 0.1em, eftersom versaler formgavs för att stå bredvid gemener. [Bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing) tar upp detaljerna.

## Justering

Vänsterjusterad text, med ojämn högerkant, är standard av en anledning: varje rad börjar på samma ställe, så ögat hittar den lätt. Centrerad text passar korta stycken, som en rubrik, ett citat eller en inbjudan, och blir tröttande efter några få rader. Marginaljusterad text ser prydlig ut i tryck där programvaran kan avstava bra, men på webben öppnar den ofta ojämna glapp mellan orden.

Ett stående inlägg med en stor rubrik, en liten avståndssatt etikett ovanför och en stödrad under

Tre storlekar ur en skala, två vikter, tätt radavstånd på rubriken och lite extra avstånd på den lilla etiketten ovanför.

## Radlängd: måttet

Längden på en rad, **satsbredden**, spelar lika stor roll som storleken. Rader som är för långa gör det svårt att hitta nästa; rader som är för korta bryter läsrytmen med ständiga radbrytningar. Ett spann på ungefär **45 till 75 tecken** per rad är det som oftast rekommenderas för brödtext. På webben gör enheten `ch` det enkelt.

```css
article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}
```

Satsbredd, radavstånd och bokstavsavstånd i en liten stilmall. `text-wrap: balance` ignoreras på ett säkert sätt där det inte stöds.

## Rytm: avstånd som grupperar

Avstånd berättar för läsare vad som hör ihop. En rubrik ska sitta närmare stycket den inleder än det före, så lägg mer avstånd ovanför rubriker än under. Håll styckeavstånden konsekventa och använd en avståndsenhet, ofta baserad på brödtextens radavstånd, genomgående. När avstånd används konsekvent får sidan en rytm som gör att den känns lugn även när den är full. [Visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy) bygger vidare på detta.

1. **Välj en brödtextstorlek** 16 pixlar eller större på skärmar; mycket större i inlägg för sociala medier.
2. **Välj ett skalförhållande** 1,2 för lugnt och tätt, 1,25 för det mesta, 1,333 eller mer för redaktionell dramatik.
3. **Ställ in två vikter** Normal för läsning, fet eller halvfet för betoning och rubriker.
4. **Ställ in radavstånd** Ungefär 1,5 för brödtext, ungefär 1,1 för stora rubriker.
5. **Begränsa satsbredden** Runt 65 tecken för brödtext.
6. **Sätt avstånd med en enhet** Ett avståndssteg, återanvänt, med mer avstånd ovanför rubriker än under.

När det här sitter blir valet av typsnitt det roliga i stället för nödlösningen. Börja med [typsnittskombinationer](https://gradiently.design/sv/guide/font-pairing) och [serif mot sans serif](https://gradiently.design/sv/guide/serif-vs-sans-serif).

## FAQ

### Vilka är typografins grundregler?

Använd en konsekvent typskala, två eller tre tydligt olika vikter, ett radavstånd på ungefär 1,4 till 1,6 för brödtext, rader på ungefär 45 till 75 tecken, vänsterjustering för lång text och konsekventa avstånd.

### Vad är en bra storlek på brödtext för webbplatser?

16 pixlar är ett vanligt minimum för brödtext på skärmar, och många webbplatser använder något större.

### Vilket radavstånd ska jag använda?

Ungefär 1,4 till 1,6 gånger teckenstorleken för brödtext, och runt 1,0 till 1,2 för stora rubriker.

### Vad är en typskala?

En uppsättning teckenstorlekar där var och en är ett fast förhållande större än den förra, till exempel 1,25, så att varje storlek hänger ihop med de andra och hierarkin förblir konsekvent.