# Typografisystem: velg en rolle for hver font

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

Å velge fonter er den enkle delen. Å bestemme hvordan de brukes, i hvilken størrelse, vekt og oppgave, gjør merkevaren konsekvent overalt.

## The short version

- Et typografisystem har noen få navngitte roller, som display, overskrift, brødtekst og etikett, hver med fast font, vekt, størrelse, linjehøyde og bokstavbruk.
- Størrelsene i et typografisystem kommer fra én skala, en grunnstørrelse multiplisert med et fast forhold, slik at alle trinn henger sammen.
- De fleste merkevarer trenger bare én eller to skrifttyper. Systemet skaper variasjon gjennom roller, vekter og størrelser.
- Designvariabler lagrer hver rolle som en navngitt verdi, slik at nettsider, apper og designfiler bruker samme typografivalg.
- Innlegg, lysbilder og nettsider trenger ulike størrelser for samme roller, så et godt system beskriver hver rolle per kanal.

Et **typografisystem** bestemmer hvordan skriften brukes i hele merkevaren: noen få roller som display, overskrift, brødtekst og etikett, hver med én font, vekt, størrelse, linjehøyde og bokstavbruk. Alle størrelser følger én skala og lagres som variabler, så designere og utviklere bruker samme verdier. Fontene gir merkevaren en stemme. Systemet gjør stemmen konsekvent, slik at overskrifter på en plakat, nettside og historie har samme opphav. Slik bygger du det.

## Rollene i et typografisystem

Start med oppgavene, ikke fontene. All tekst merkevaren publiserer gjør én av noen få jobber, og hver jobb blir en rolle. De fleste trenger fem til sju.

| Rolle | Oppgave | Vanlig bruk |
| --- | --- | --- |
| Display | De største ordene: kampanjer, omslag, hovedtitler | Overskriftfont, fet, tett linjehøyde, få ord |
| Overskrift | Seksjonstitler og innleggsoverskrifter | Overskriftfont, halvfet eller fet, vanlig setningsbruk |
| Mellomtittel | Introduserer seksjoner, ingresser | Brødtekstfont, medium, ett trinn over brødtekst |
| Brødtekst | Tekst som skal leses | Brødtekstfont, normal 400, linjehøyde rundt 1,5 |
| Etikett og overlinje | Liten tekst over overskrifter, merker, knapper | Brødtekstfont, halvfet, ofte versaler med økt bokstavavstand |
| Bildetekst | Kreditering, fotnoter, liten skrift | Brødtekstfont, normal, minste trinn |
| Tall | Priser, statistikk, tabeller | Tabelltall så sifrene står på linje |

Sju roller dekker nesten alle merkevarer. Kan du ikke si hvilken jobb stilen gjør, er den et unntak, ikke en rolle.

Et stående innlegg i nyhetsbrevstil med liten overlinje, stor overskrift og kort støttetekst

Tre roller i ett innlegg: en overlinje, en overskrift og en brødtekstlinje. De er tydelig forskjellige, så øyet vet hvor det skal starte.

## Hvor mange fonter et merkevaresystem trenger

Vanligvis én eller to. Én familie i tre vekter kan bære hele systemet. To fonter, én til overskrifter og én til brødtekst, gir karakter. En tredje trengs bare til en egen oppgave, som kode eller data. Variasjonen kommer fra roller, størrelser og vekter, ikke flere skrifttyper. [Google Fonts-kombinasjoner](https://gradiently.design/nb/guide/google-fonts-pairings) og [skrifttyper til merkevarer](https://gradiently.design/nb/guide/brand-fonts) hjelper deg å velge.

### Unngå

- En ny font til hver kampanje
- Størrelser valgt på øyemål i hvert design
- Ni vekter lastet inn, tre brukt
- Ulike regler for bokstavbruk i ulike team
- En manual som lister fonter, men ikke roller

### Gjør dette

- Én eller to familier til alt
- Alle størrelser fra én skala
- Bare vektene rollene trenger
- Én nedskrevet regel for bokstavbruk i overskrifter og knapper
- Roller med font, vekt, størrelse, linjehøyde og bokstavbruk

## Bygg en typografisk skala

En typografisk skala tar en grunnstørrelse og multipliserer den med samme forhold for hvert trinn opp. Trinnene henger sammen, så to størrelser i systemet virker bevisst valgt sammen. Et forhold på 1,25 passer grensesnitt og innholdstette sider. 1,333 eller 1,5 gir mer dramatikk til redaksjonelt arbeid og markedsføring. [Typografisk skala](https://gradiently.design/nb/guide/typographic-scale) forklarer forholdene nærmere.

| Trinn | Størrelse ved 1,25 fra 16 px | Rolle |
| --- | --- | --- |
| Trinn 0 | 16 px | Brødtekst |
| Trinn 1 | 20 px | Mellomtittel, stor brødtekst |
| Trinn 2 | 25 px | Liten overskrift |
| Trinn 3 | 31 px | Overskrift |
| Trinn 4 | 39 px | Stor overskrift |
| Trinn 5 | 49 px | Display på mobil |
| Trinn 6 | 61 px | Display på datamaskin |
| Trinn minus 1 | 13 px | Bildetekst, etikett |

En nettskala fra 16 px med forholdet 1,25, avrundet til hele piksler. Hver rolle får ett fast trinn.

## Lagre systemet som variabler

Et system som bare finnes i en PDF, sklir ut. Variabler er navngitte verdier både kode og designfiler leser, slik at én endring oppdaterer alt. Navngi etter rolle, aldri størrelse: `--type-heading` tåler en omprofilering, `--type-31` gjør ikke det. [Designvariabler](https://gradiently.design/nb/guide/design-tokens) forklarer prinsippet.

```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 én fontvariabel i kortform, slik at vekt, størrelse, linjehøyde og familie alltid følger hverandre. Verdiene følger skalaen over i rem.

## Én rolle, ulik størrelse per kanal

En overskrift på nettsiden og et Instagram-innlegg gjør samme jobb i svært ulik størrelse. Den ene leses på armlengdes avstand på en stor skjerm, den andre krympes blant telefonens innlegg. Behold rollene og gi hver kanal egne størrelser.

| Rolle | Nettside | Sosialt innlegg 1080×1350 | Lysbilder 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 |
| Etikett og overlinje | 13 px | 28 til 32 px | 36 til 44 px |

Samme roller, fonter og vekter, ulike størrelser. [Fontstørrelse til Instagram-innlegg](https://gradiently.design/nb/guide/font-size-for-social-media) og [presentasjonsfonter](https://gradiently.design/nb/guide/typography-for-presentations) forklarer tallene.

## Slik bygger du typografisystemet

1. **Samle det du allerede publiserer** Ta skjermbilder av nettside, innlegg, e-poster og lysbilder. Marker hver tekststil. De fleste finner langt flere enn planlagt.
2. **Grupper stiler i roller** Slå sammen nesten like stiler. Sikt på fem til sju roller som dekker alt du markerte.
3. **Velg fonter til rollene** Vanligvis én overskriftfont og én brødtekstfont. Sjekk at lisensen dekker nett, apper og eventuell logobruk.
4. **Fastsett skala og detaljer** Velg grunnstørrelse og forhold, så hver rolles vekt, linjehøyde, bokstavbruk og avstand. Bestem overskriftenes bokstavbruk én gang. [Setningsbruk eller store forbokstaver](https://gradiently.design/nb/guide/title-case-vs-sentence-case) hjelper.
5. **Publiser som variabler og ett ark** Variabler til kode og designfiler, ett visuelt ark i [merkevaremanualen](https://gradiently.design/nb/guide/brand-style-guide) til alle andre.

Til vanlige sosiale innlegg og presentasjoner inneholder merkevaresettet i Gradiently Pro systemets overskrift- og brødtekstfonter, også opplastede fontfiler, ved siden av logoer, farger og tone. Nye design starter med disse to fontene, og Designer bruker settet i oppsettet. Dermed bevares rollefordelingen uten at noen må huske den.

## FAQ

### Hva er et typografisystem?

Et sett med navngitte roller, som display, overskrift, brødtekst og etikett, hver med fast font, vekt, størrelse, linjehøyde og bokstavbruk, vanligvis lagret som designvariabler.

### Hvor mange fonter bør en merkevare bruke?

Én eller to for de fleste: én til overskrifter og én til brødtekst. En tredje er bare nyttig til en bestemt oppgave som kode eller data.

### Hva er en typografisk skala?

En rekke fontstørrelser laget ved å multiplisere en grunnstørrelse med et fast forhold, som 1,25, slik at alle størrelsene henger sammen.

### Hvordan bør typografivariabler navngis?

Etter rolle, som type-heading eller type-body, ikke etter størrelse. Rollenavn gir fortsatt mening når størrelsene endres.

### Bør innlegg i sosiale medier bruke samme fontstørrelser som nettsiden?

Nei. Behold roller og fonter, men bruk langt større skrift i innlegg, siden de vises smått på telefonen.