# Skriftkombinasjoner: enkle regler som fungerer
[Canonical HTML page](https://gradiently.design/nb/guide/font-pairing)
To skrifttyper som ser bra ut alene, kan konkurrere på samme side. Noen få regler og en håndfull utprøvde par gjør valget enklere.
## The short version
- Skriftkombinasjoner fungerer best når hver skrifttype har en tydelig rolle, vanligvis én til overskrifter og én til brødtekst.
- Et godt par har én tydelig kontrast, som seriff mot sans serif eller tung mot lett, samtidig som proporsjoner og stemning passer sammen.
- Én skriftfamilie med flere vekter, eller en superfamilie med matchende seriff- og sans serif-versjoner, er den tryggeste måten å kombinere skrifter på.
- To skrifttyper som er like, men ikke identiske, som to nøytrale sans serif-skrifter, ser vanligvis ut som en feil fremfor en bevisst kombinasjon.
- To skrifter er nok for nesten enhver merkevare, ethvert innlegg eller nettsted; en tredje bør ha en avgrenset jobb, som kode eller etiketter.
Gode **skriftkombinasjoner** handler om tre regler: gi hver skrifttype en egen rolle, la de to ha én tydelig kontrast og la dem passe sammen på alt annet, som proporsjoner og stemning. En seriffoverskrift over brødtekst i sans serif er det klassiske eksemplet. Er du i tvil, bruk én familie i to vekter; den kan ikke krasje med seg selv.
## Start med roller, ikke skrifter
Før du velger skrifttype, bestem hvilke jobber typografien skal gjøre. De fleste design har to: overskrifter som setter tonen, og brødtekst som må være behagelig å lese. Noen legger til en tredje, liten jobb, som etiketter eller kode. Velg brødtekstskriften først, fordi den bærer de fleste ordene, og finn deretter en overskriftsskrift som utfyller den.
| Rolle | Oppgave | Viktigst |
| --- | --- | --- |
| Overskrift | Sette tonen, bli sett først | Særpreg, vekt, utseende i stor størrelse |
| Brødtekst | Være behagelig å lese over tid | Leselighet, jevnt skriftbilde, god normal og kursiv |
| Etiketter og liten tekst | Leses raskt i små størrelser | Tydelige former, åpen avstand, solide vekter |
| Kode eller tall | Stå på linje og være entydig | Fast tegnbredde eller tabellariske tall |
Typografiske roller. To skrifter kan dekke alle fire; brødtekstskriften tar ofte også etikettene.
Et redaksjonelt innlegg med stor overskrift, liten etikett og støttelinje i en roligere stil
Synlige roller: en stor overskrift med særpreg, en liten etikett over og en rolig støttelinje under. Kontrasten ligger i størrelse og rolle før den ligger i skrifttype.
## Skap kontrast på ett punkt, samstem resten
En kombinasjon trenger en synlig forskjell, ellers ser den andre skriften tilfeldig ut. Men skiller de to seg på alle måter samtidig, ser de ut til å komme fra ulike prosjekter. Velg én kontrastdimensjon og hold resten nært.
- **Skriftklasse:** en seriff sammen med en sans serif. Den mest pålitelige kontrasten. [Seriff eller sans serif](https://gradiently.design/nb/guide/serif-vs-sans-serif) forklarer hva hver bidrar med.
- **Vekt:** et tungt display-snitt med et normalt tekstsnitt, gjerne fra samme familie.
- **Bredde:** en smal overskriftsskrift med brødtekst i normal bredde.
- **Samstem proporsjonene:** lignende x-høyde, høyden på små bokstaver, gjør at de to står behagelig sammen på én linje.
- **Samstem stemningen:** en varm, myk seriff passer med en varm, humanistisk sans serif; en skarp, geometrisk sans serif passer med en presis seriff med høy kontrast.
## Én familie eller to
Den enkleste kombinasjonen er ingen kombinasjon: én familie i to eller tre vekter. Den er helhetlig fra grunnen og vanskelig å få feil. Superfamilier går ett steg videre, med en seriff og en sans serif tegnet sammen for å dele proporsjoner. Da får du kontrasten mellom to skriftklasser og harmonien fra ett design.
### Én familie
- Kontrast bare fra vekt og størrelse
- Garantert harmoni
- Roligere, mer ensartet uttrykk
- Eksempel: Archivo Black i overskrifter, Archivo i brødtekst
### To familier
- Kontrast fra skriftklasse eller særpreg
- Trenger matchende proporsjoner og stemning
- Mer uttrykksfullt, mer personlighet
- Eksempel: Fraunces i overskrifter, Inter i brødtekst
## Utprøvde skriftkombinasjoner fra Google Fonts
Disse parene bruker skrifttyper som er gratis på [Google Fonts](https://fonts.google.com/) og mye brukt, så de er enkle å teste. Se på dem som utgangspunkt: sett dine egne ord med dem og vurder resultatet.
| Overskrift | Brødtekst | Kontrast | Følelse |
| --- | --- | --- | --- |
| Playfair Display | Source Sans 3 | Seriff med høy kontrast sammen med ren sans serif | Redaksjonell, klassisk |
| Fraunces | Inter | Myk seriff med særpreg sammen med nøytral sans serif | Varm, moderne |
| DM Serif Display | DM Sans | Display-seriff med sin tilhørende sans serif | Vennlig, gjennomarbeidet |
| Instrument Serif | Inter | Smal seriff med nøytral sans serif | Mote, redaksjonell |
| IBM Plex Serif | IBM Plex Sans | Seriff og sans serif fra én superfamilie | Presis, teknisk |
| Space Grotesk | Inter | Særegen grotesk sammen med en enkel | Teknologi, produkt |
| Archivo Black | Archivo | Vekt innenfor én familie | Kraftig, direkte |
Sju kombinasjoner fra Google Fonts. Hver har én tydelig kontrast og samstemte proporsjoner.
```html
```
Last inn og bruk et par: Fraunces til overskrifter, Inter til brødtekst, hver med et fornuftig reservevalg. Bare vektene du bruker, blir forespurt.
## Kombinasjoner du bør unngå
### Unngå
- To nøytrale sans serif-skrifter med bare små forskjeller
- To display-skrifter som konkurrerer om oppmerksomheten
- En tredje og fjerde skrift for variasjon
- Skrifter med svært ulik x-høyde på én linje
### Gjør heller dette
- Én sans serif i to vekter, eller sammen med en seriff
- Én display-skrift, én rolig tekstskrift
- To skrifter, med vekter og størrelser som variasjon
- Skrifter med lignende proporsjoner
Display-skrifter er de mest fristende å overbruke. De er laget for store størrelser og korte linjer; brødtekst satt med dem sliter raskt ut øyet. [Display-skrifter](https://gradiently.design/nb/guide/display-fonts) forklarer hvor de kommer til sin rett.
## Test en skriftkombinasjon på ti minutter
1. **Bruk ekte ord** Sett en faktisk overskrift og et ekte avsnitt fra arbeidet ditt, ikke plassholdertekst.
2. **Bruk faktiske størrelser** Overskriften stor, brødteksten i lesestørrelse, på formatet du faktisk skal bruke.
3. **Se på skriftbildet** Ta et skritt tilbake. Brødteksten bør se jevnt grå ut; overskriften bør skille seg tydelig fra den.
4. **Prøv på en telefon** Mange kombinasjoner som er elegante på en stor skjerm, faller fra hverandre i mobilstørrelse. [Skrifter til sosiale medier](https://gradiently.design/nb/guide/fonts-for-social-media) forklarer hva som holder.
5. **Sjekk detaljene** Tall, tegnsetting, kursiv og alle språkene du publiserer på.
Når du har valgt, skriv ned vekter og størrelser så alle bruker dem likt; [merkevareskrifter](https://gradiently.design/nb/guide/brand-fonts) dekker lisenser og språk, og [grunnleggende typografi](https://gradiently.design/nb/guide/typography-basics) dekker størrelsesskalaen. I Gradiently ligger skriftene i merkevaresettet og brukes på hvert nye design.
## FAQ
### Hva er skriftkombinasjoner?
Det er å velge to skrifttyper, vanligvis én til overskrifter og én til brødtekst, som har én tydelig kontrast og passer sammen i proporsjoner og stemning.
### Hvor mange skrifter bør jeg bruke?
To er nok til nesten alt. En tredje bør ha en avgrenset jobb, som kode eller små etiketter.
### Er det greit å bruke bare én skrift?
Ja. Én familie i to eller tre vekter er den tryggeste kombinasjonen som finnes, og mange sterke merkevarer bruker nettopp det.
### Hva er en god kombinasjon fra Google Fonts?
Pålitelige utgangspunkt er blant annet Fraunces med Inter, Playfair Display med Source Sans 3 og IBM Plex Serif med IBM Plex Sans.
### Hvorfor ser de to skriftene mine feil ut sammen?
Vanligvis er de for like, slik at forskjellen virker som en feil, eller de skiller seg på alle måter samtidig. Behold én tydelig kontrast og samstem proporsjonene.