# Typsystem: välj roller för varje typsnitt

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

Att välja typsnitt är den lätta delen. Att bestämma exakt hur de beter sig, i vilken storlek, i vilket snitt, för vilket jobb, är det som får ett varumärke att se enhetligt ut överallt.

## The short version

- Ett typsystem är en liten uppsättning namngivna roller, som display, rubrik, brödtext och etikett, var och en med ett fast typsnitt, snitt, storlek, radavstånd och skiftläge.
- Storlekarna i ett typsystem kommer från en skala, en basstorlek multiplicerad med en konstant kvot, så att varje steg hänger ihop med de andra.
- De flesta varumärken behöver bara ett eller två typsnitt; systemet skapar variation genom roller, snitt och storlekar i stället.
- Designtokens lagrar varje roll som ett namngivet värde, så att webbplatser, appar och designfiler använder samma typografibeslut.
- Sociala inlägg, bildspel och webbplatser behöver olika storlekar för samma roller, så ett bra system listar varje roll per kanal.

Ett **typsystem** är uppsättningen regler som avgör hur typografin beter sig i ett varumärke: några namngivna roller (display, rubrik, brödtext, etikett), var och en med ett typsnitt, ett snitt, en storlek, ett radavstånd och ett skiftläge, alla dimensionerade från en enda skala och lagrade som tokens så att varje designer och utvecklare använder samma värden. Typsnitt ger ett varumärke dess röst. Systemet gör rösten konsekvent, så att en rubrik på en affisch, en webbplats och en story ser ut att komma från samma ställe. Så bygger du ett.

## Rollerna i ett typsystem

Börja med jobb, inte typsnitt. Varje text som ett varumärke publicerar gör ett av en handfull jobb, och varje jobb blir en roll. De flesta varumärken behöver fem till sju.

| Roll | Jobb | Typisk inställning |
| --- | --- | --- |
| Display | De största orden: kampanjrader, omslag, huvudtitlar | Rubriktypsnitt, fet, tätt radavstånd, få ord |
| Rubrik | Avsnittsrubriker och inläggsrubriker | Rubriktypsnitt, halvfet eller fet, gemener efter punkt |
| Underrubrik | Leder in i ett avsnitt, ingresser | Brödtypsnitt, medelfet, ett steg över brödtext |
| Brödtext | Läsetext | Brödtypsnitt, normal 400, radavstånd runt 1,5 |
| Etikett och överrad | Liten text ovanför rubriker, taggar, knappar | Brödtypsnitt, halvfet, ofta versaler med extra avstånd |
| Bildtext | Källor, fotnoter, finstilt | Brödtypsnitt, normal, minsta steget |
| Siffror | Priser, statistik, tabeller | Tabellsiffror så att talen linjerar |

Sju roller täcker nästan varje varumärke. Om du inte kan säga vilket jobb en stil gör är den inte en roll; den är ett undantag.

Ett stående inlägg i nyhetsbrevsstil med en liten överrad, en stor rubrik och en kort stödrad

Tre roller i ett inlägg: en etikett som överrad, en rubrik och en brödtextrad. Var och en är omedelbart tydlig, så ögat vet var det ska börja.

## Hur många typsnitt ett typsystem för ett varumärke behöver

Oftast ett eller två. En familj i tre snitt kan bära ett helt system. Två typsnitt, ett för rubriker och ett för brödtext, ger karaktär. Ett tredje motiveras bara för ett särskilt jobb som kod eller data. Variationen kommer av roller, storlekar och snitt, inte av fler typsnitt. [Google Fonts-par](https://gradiently.design/sv/guide/google-fonts-pairings) och [varumärkets typsnitt](https://gradiently.design/sv/guide/brand-fonts) hjälper dig att välja.

### Undvik

- Ett nytt typsnitt för varje kampanj
- Storlekar som väljs på ögonmått i varje design
- Nio snitt inlästa, tre använda
- Olika skiftlägesregler i olika team
- En grafisk manual som listar typsnitt men inte roller

### Gör så här

- En eller två familjer för allt
- Varje storlek från en skala
- Bara de snitt som rollerna behöver
- En skriven skiftlägesregel för rubriker och knappar
- Roller med typsnitt, snitt, storlek, radavstånd och skiftläge

## Bygg en typskala

En typskala väljer en basstorlek och multiplicerar den med samma kvot för varje steg uppåt. Stegen hänger ihop, så vilka två storlekar som helst i systemet ser avsiktliga ut tillsammans. En kvot på 1,25 passar gränssnitt och täta sidor; 1,333 eller 1,5 ger mer dramatik för redaktionellt och marknadsföringsarbete. [Typskala](https://gradiently.design/sv/guide/typographic-scale) förklarar kvoterna mer ingående.

| Steg | Storlek vid 1,25 från 16 px | Roll |
| --- | --- | --- |
| Steg 0 | 16 px | Brödtext |
| Steg 1 | 20 px | Underrubrik, stor brödtext |
| Steg 2 | 25 px | Liten rubrik |
| Steg 3 | 31 px | Rubrik |
| Steg 4 | 39 px | Stor rubrik |
| Steg 5 | 49 px | Display på mobil |
| Steg 6 | 61 px | Display på dator |
| Steg minus 1 | 13 px | Bildtext, etikett |

En webbskala från en bas på 16 px med kvoten 1,25, avrundad till hela pixlar. Varje roll tar ett steg och behåller det.

## Lagra systemet som tokens

Ett system som bara finns i en PDF glider isär. Tokens är namngivna värden som både kod och designfiler läser, så att ett ändrat värde uppdaterar allt. Namnge tokens efter roll, aldrig efter storlek: `--type-heading` överlever en omdesign, `--type-31` gör det inte. [Designtokens](https://gradiently.design/sv/guide/design-tokens) tar upp den bredare idén.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Varje roll är en font-shorthand-token, så att snitt, storlek, radavstånd och familj alltid följs åt. Värdena motsvarar skalan ovan i rem.

## En roll, olika storlekar per kanal

En rubrik på en webbplats och en rubrik i ett Instagram-inlägg gör samma jobb i mycket olika storlekar, eftersom den ena läses på armlängds avstånd på en stor skärm och den andra krymper ner i ett mobilflöde. Håll rollerna identiska och ge varje kanal sina egna storlekar.

| Roll | Webbplats | Socialt inlägg 1080×1350 | Bildspel 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 till 61 px | 140 till 200 px | 120 till 160 px |
| Rubrik | 31 px | 90 till 120 px | 88 till 112 px |
| Brödtext | 16 px | 40 till 48 px | 48 till 64 px |
| Etikett och överrad | 13 px | 28 till 32 px | 36 till 44 px |

Samma roller, samma typsnitt, samma snitt, olika storlekar. [Teckenstorlek för Instagram-inlägg](https://gradiently.design/sv/guide/font-size-for-social-media) och [typsnitt för presentationer](https://gradiently.design/sv/guide/typography-for-presentations) förklarar siffrorna för sociala medier och bildspel.

## Så bygger du ditt typsystem

1. **Samla det du redan publicerar** Ta skärmdumpar av din webbplats, dina inlägg, e-postmeddelanden och bildspel. Ringa in varje särskild textstil. De flesta varumärken hittar långt fler än de tänkt sig.
2. **Gruppera stilar i roller** Slå ihop nästan likadana. Sikta på fem till sju roller som täcker allt du ringat in.
3. **Välj typsnitt till rollerna** Oftast ett rubriktypsnitt och ett brödtypsnitt. Kontrollera att licensen täcker webb, appar och all logotypanvändning.
4. **Sätt skalan och detaljerna** Välj en bas och en kvot och fastställ sedan varje rolls snitt, radavstånd, skiftläge och avstånd. Bestäm din rubrikstil en gång; [gemener efter punkt eller versalt i rubriker](https://gradiently.design/sv/guide/title-case-vs-sentence-case) hjälper.
5. **Publicera det som tokens och ett enkelsidigt blad** Tokens för kod och designfiler, ett enda visuellt blad i din [grafiska manual](https://gradiently.design/sv/guide/brand-style-guide) för alla andra.

För vardagliga sociala inlägg och bildspel håller ett Gradiently-varumärkeskit (på Pro) rubrik- och brödtypsnitten i ditt system, inklusive uppladdade typsnittsfiler, vid sidan av dina logotyper, färger och röst. Nya designer börjar med de två typsnitten, och Designer tillämpar kitet när den lägger upp en design, så att uppdelningen mellan rubrik och brödtext håller utan att någon behöver komma ihåg den.

## FAQ

### Vad är ett typsystem?

En uppsättning namngivna typroller, som display, rubrik, brödtext och etikett, var och en med ett fast typsnitt, snitt, storlek, radavstånd och skiftläge, oftast lagrade som designtokens.

### Hur många typsnitt ska ett varumärke använda?

Ett eller två för de flesta varumärken: ett för rubriker och ett för brödtext. Ett tredje är bara värt att lägga till för ett särskilt jobb som kod eller data.

### Vad är en typskala?

En följd av teckenstorlekar som skapas genom att multiplicera en basstorlek med en konstant kvot, till exempel 1,25, så att varje storlek i systemet hänger ihop med de andra.

### Hur ska typografitokens namnges?

Efter roll, som type-heading eller type-body, inte efter storlek. Rollnamn förblir meningsfulla när storlekarna ändras.

### Ska inlägg i sociala medier använda samma teckenstorlekar som en webbplats?

Nej. Behåll samma roller och typsnitt, men använd mycket större storlekar i inlägg, eftersom de ses små i ett mobilflöde.