# Typografisystem: giv hver skrifttype en rolle

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

At vælge skrifttyper er den nemme del. At bestemme præcis, hvordan de opfører sig, i hvilken størrelse, i hvilken vægt og til hvilken opgave, er det, der får et brand til at se ensartet ud overalt.

## The short version

- Et typografisystem er et lille sæt navngivne roller, som display, overskrift, brødtekst og label, hver med en fast skrifttype, vægt, størrelse, linjehøjde og versalbrug.
- Størrelser i et typografisystem kommer fra én skala, en basisstørrelse ganget med et konstant forhold, så hvert trin hænger sammen med de andre.
- De fleste brands har kun brug for en eller to skrifttyper; systemet skaber variation gennem roller, vægte og størrelser i stedet.
- Designtokens gemmer hver rolle som en navngiven værdi, så websites, apps og designfiler alle bruger de samme typografivalg.
- Opslag, slides og websites har brug for forskellige størrelser til de samme roller, så et godt system oplister hver rolle pr. kanal.

Et **typografisystem** er det sæt regler, der afgør, hvordan skrift opfører sig i et brand: nogle få navngivne roller (display, overskrift, brødtekst, label), hver med én skrifttype, vægt, størrelse, linjehøjde og versalbrug, alle dimensioneret fra én skala og gemt som tokens, så hver designer og udvikler bruger de samme værdier. Skrifttyper giver et brand dets stemme. Systemet gør den stemme ensartet, så en overskrift på en plakat, et website og en story alle ser ud, som om de kom fra samme sted. Sådan bygger du et.

## Rollerne i et typografisystem

Start med opgaver, ikke skrifttyper. Hver tekst, et brand udgiver, har en af en håndfuld opgaver, og hver opgave bliver en rolle. De fleste brands har brug for fem til syv.

| Rolle | Opgave | Typisk indstilling |
| --- | --- | --- |
| Display | De største ord: kampagnelinjer, covers, hero-titler | Overskriftsskrift, fed, stram linjehøjde, få ord |
| Overskrift | Sektionstitler og opslagsoverskrifter | Overskriftsskrift, halvfed eller fed, almindelige bogstaver |
| Underoverskrift | Leder ind i en sektion, indledninger | Brødtekstskrift, medium vægt, et trin over brødtekst |
| Brødtekst | Læsetekst | Brødtekstskrift, normal 400, linjehøjde omkring 1,5 |
| Label og overlinje | Lille tekst over overskrifter, tags, knapper | Brødtekstskrift, halvfed, ofte versaler med ekstra afstand |
| Billedtekst | Kreditering, fodnoter, det med småt | Brødtekstskrift, normal, det mindste trin |
| Tal | Priser, statistik, tabeller | Tabulære cifre, så tallene står på linje |

Syv roller dækker næsten ethvert brand. Hvis du ikke kan sige, hvilken opgave en stil har, er den ikke en rolle; den er en undtagelse.

Et opslag i højformat i nyhedsbrevsstil med en lille overlinje, en stor overskrift og en kort understøttende linje

Tre roller på ét opslag: en overlinje, en overskrift og en brødtekstlinje. Hver er øjeblikkeligt tydelig, så øjet ved, hvor det skal starte.

## Hvor mange skrifttyper et typografisystem til et brand har brug for

Som regel en eller to. Én familie i tre vægte kan bære et helt system. To skrifttyper, en til overskrifter og en til brødtekst, tilføjer karakter. En tredje er kun berettiget til en bestemt opgave som kode eller data. Variationen kommer fra roller, størrelser og vægte, ikke fra flere skrifttyper. [Kombinationer af Google Fonts](https://gradiently.design/da/guide/google-fonts-pairings) og [brandskrifttyper](https://gradiently.design/da/guide/brand-fonts) hjælper dig med at vælge.

### Undgå

- En ny skrifttype til hver kampagne
- Størrelser valgt på øjemål i hvert design
- Ni vægte indlæst, tre brugt
- Forskellige regler for versaler i forskellige teams
- En stilguide, der oplister skrifttyper, men ikke roller

### Gør

- En eller to familier til alt
- Hver størrelse fra én skala
- Kun de vægte, rollerne har brug for
- Én skriftlig regel for versaler i overskrifter og knapper
- Roller med skrifttype, vægt, størrelse, linjehøjde og versaler

## Byg en typeskala

En typeskala vælger en basisstørrelse og ganger den med det samme forhold for hvert trin op. Trinene hænger sammen, så to vilkårlige størrelser i systemet ser tilsigtede ud sammen. Et forhold på 1,25 passer til grænseflader og tætte sider; 1,333 eller 1,5 giver mere drama til redaktionelt og markedsføringsarbejde. [Typeskala](https://gradiently.design/da/guide/typographic-scale) forklarer forholdene mere dybtgående.

| Trin | Størrelse ved 1,25 fra 16 px | Rolle |
| --- | --- | --- |
| Trin 0 | 16 px | Brødtekst |
| Trin 1 | 20 px | Underoverskrift, stor brødtekst |
| Trin 2 | 25 px | Lille overskrift |
| Trin 3 | 31 px | Overskrift |
| Trin 4 | 39 px | Stor overskrift |
| Trin 5 | 49 px | Display på mobil |
| Trin 6 | 61 px | Display på computer |
| Trin minus 1 | 13 px | Billedtekst, label |

En webskala fra en basis på 16 px ved et forhold på 1,25, afrundet til hele pixel. Hver rolle tager ét trin og beholder det.

## Gem systemet som tokens

Et system, der kun findes i en PDF, driver. Tokens er navngivne værdier, som både kode og designfiler læser, så ændring af én værdi opdaterer alt. Navngiv tokens efter rolle, aldrig efter størrelse: `--type-heading` overlever et redesign, `--type-31` gør ikke. [Designtokens](https://gradiently.design/da/guide/design-tokens) dækker den bredere idé.

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

Hver rolle er ét token med font-genvej, så vægt, størrelse, linjehøjde og familie altid følges ad. Værdierne matcher skalaen ovenfor i rem.

## Én rolle, forskellige størrelser pr. kanal

En overskrift på et website og en overskrift på et Instagram-opslag har den samme opgave i meget forskellige størrelser, fordi den ene læses på armslængde på en stor skærm, og den anden skrumper ind i et telefonfeed. Hold rollerne identiske, og giv hver kanal sine egne størrelser.

| Rolle | Website | Opslag 1080×1350 | Slides 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 til 61 px | 140 til 200 px | 120 til 160 px |
| Overskrift | 31 px | 90 til 120 px | 88 til 112 px |
| Brødtekst | 16 px | 40 til 48 px | 48 til 64 px |
| Label og overlinje | 13 px | 28 til 32 px | 36 til 44 px |

Samme roller, samme skrifttyper, samme vægte, forskellige størrelser. [Skriftstørrelse til Instagram-opslag](https://gradiently.design/da/guide/font-size-for-social-media) og [skrifttyper til præsentationer](https://gradiently.design/da/guide/typography-for-presentations) forklarer tallene til sociale medier og slides.

## Sådan bygger du dit typografisystem

1. **Saml det, du allerede udgiver** Tag skærmbilleder af dit website, opslag, mails og slides. Ring hver særskilt tekststil ind. De fleste brands finder langt flere, end de troede, de havde.
2. **Gruppér stilene i roller** Slå næsten-dubletter sammen. Sigt efter fem til syv roller, der dækker alt, du indringede.
3. **Vælg skrifttyper til rollerne** Som regel en overskriftsskrift og en brødtekstskrift. Tjek, at licensen dækker web, apps og enhver brug i logoet.
4. **Sæt skalaen og detaljerne** Vælg en basis og et forhold, og fastlæg derefter hver rolles vægt, linjehøjde, versalbrug og afstand. Beslut dig for versaler i overskrifter én gang; [almindelige bogstaver mod titelversaler](https://gradiently.design/da/guide/title-case-vs-sentence-case) hjælper.
5. **Udgiv det som tokens og et ark på én side** Tokens til kode og designfiler, ét visuelt ark i din [brandguide](https://gradiently.design/da/guide/brand-style-guide) til alle andre.

Til hverdagens opslag og præsentationer rummer et Gradiently-brandkit (på Pro) dit systems overskrifts- og brødtekstskrifttyper, uploadede skrifttypefiler inklusive, ved siden af dine logoer, farver og din stemme. Nye designs starter med de to skrifttyper, og Designer anvender kittet, når den lægger et design ud, så opdelingen i overskrift og brødtekst holder uden at nogen skal huske den.

## FAQ

### Hvad er et typografisystem?

Et sæt navngivne typografiroller, som display, overskrift, brødtekst og label, hver med en fast skrifttype, vægt, størrelse, linjehøjde og versalbrug, som regel gemt som designtokens.

### Hvor mange skrifttyper bør et brand bruge?

En eller to for de fleste brands: en til overskrifter og en til brødtekst. En tredje er kun værd at tilføje til en bestemt opgave som kode eller data.

### Hvad er en typeskala?

En række skriftstørrelser lavet ved at gange en basisstørrelse med et konstant forhold, som 1,25, så hver størrelse i systemet hænger sammen med de andre.

### Hvordan bør typografitokens navngives?

Efter rolle, som type-heading eller type-body, ikke efter størrelse. Rollenavne forbliver meningsfulde, når størrelserne ændrer sig.

### Skal opslag på sociale medier bruge de samme skriftstørrelser som et website?

Nej. Behold de samme roller og skrifttyper, men brug meget større størrelser på opslag, fordi de ses i lille format i et telefonfeed.