# Google Fonts-kombinasjoner: 25 skriftpar som fungerer

[Canonical HTML page](https://gradiently.design/nb/guide/google-fonts-pairings)

Alle parene er gratis hos Google Fonts og valgt for hvordan de fungerer i ekte overskrifter og brødtekst. De er gruppert etter følelsen du ønsker, med vektene som får dem til å fungere.

## The short version

- Et godt Google Fonts-par gir overskrift og brødtekst tydelig ulike oppgaver, gjerne med kontrast mellom en særpreget overskrifts- eller serifskrift og en enkel sans serif.
- Par fra samme storfamilie, som DM Serif Display med DM Sans eller IBM Plex Sans med IBM Plex Mono, er tryggest å begynne med.
- Brødtekst trenger en skrift med stor x-høyde og åpne former i normal vekt på 400; overskrifter kan ha mer personlighet.
- Skriftene hos Google Fonts har åpne lisenser som tillater kommersiell bruk, også i logoer, produkter og kundeoppdrag.
- Last bare inn vektene du bruker, og legg til display=swap for å holde sidene raske.

De beste **Google Fonts-kombinasjonene** setter en særpreget overskriftsskrift mot en rolig, lesbar brødtekstskrift: Fraunces med Inter, Playfair Display med Source Sans 3, Space Grotesk med Inter eller DM Serif Display med DM Sans. Nedenfor finner du 25 kombinasjoner gruppert etter stemning, med vektene som får dem til å fungere og hva de passer til. Alle er gratis, alle tillater kommersiell bruk, og alle lastes med én kodelinje. Velg først gruppe etter følelsen, så par etter oppgaven.

## Slik leser du skriftparene

Hvert par har overskrift først og brødtekst etterpå. Overskriftsvekten brukes i store størrelser; brødteksten holder seg på 400 med 600 eller 700 til utheving. Er resonnementet nytt for deg, forklarer [skriftkombinasjoner](https://gradiently.design/nb/guide/font-pairing) hvorfor kontrast slår likhet. [Serif eller sans serif](https://gradiently.design/nb/guide/serif-vs-sans-serif) dekker det hver familie bidrar med.

Et stående innlegg i redaksjonell stil med en stor, særpreget overskrift over mindre, roligere støttetekst

Et skriftpar gir siden to stemmer. Overskriften tiltrekker; brødteksten forklarer. De bør aldri konkurrere.

## Redaksjonelle par: serifoverskrifter med sans-brødtekst

Den klassiske strukturen. En serifoverskrift gir varme og autoritet; sans-brødtekst gjør lange tekster lette å lese på skjerm.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 1 | Playfair Display 700 | Source Sans 3 400 | Magasiner, restauranter, bryllup |
| 2 | Fraunces 600 | Inter 400 | Mat, håndverksmerker, nyhetsbrev |
| 3 | DM Serif Display 400 | DM Sans 400 | Byråer, porteføljer, landingssider |
| 4 | Instrument Serif 400 | Instrument Sans 400 | Moderne redaksjonelt innhold, studioer, mote |
| 5 | Cormorant Garamond 600 | Work Sans 400 | Skjønnhet, interiør, små særpregede hoteller |
| 6 | Libre Baskerville 700 | Libre Franklin 400 | Forlag, jus, gjennomarbeidede langtekster |

Fraunces har en akse for optisk størrelse: detaljene blir skarpere i store størrelser. Cormorant Garamond er spinkel på skjerm, så bruk den bare til overskrifter.

## Moderne sans-par til teknologi og produkter

Til programvare, oppstartsbedrifter og alt som skal føles aktuelt. Overskriften bærer særpreget gjennom form, bredde eller uvanlige detaljer, mens brødteksten gjør grovarbeidet.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 7 | Space Grotesk 700 | Inter 400 | Utviklerverktøy, finansteknologi, kontrollpaneler |
| 8 | Syne 700 | Manrope 400 | Kreative studioer, arrangementer, musikk |
| 9 | Sora 600 | Figtree 400 | Apper, SaaS-nettsteder, introduksjoner |
| 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristiske merker, spill, lanseringer |
| 11 | Archivo Black 400 | Archivo 400 | Kraftige produktsider, sport, handel |

Unbounded og Syne er brede og kraftige: hold overskriftene korte. Archivo passer med seg selv fordi den svarte vekten er svært ulik normalvekten.

## Sans-overskrifter med serifbrødtekst

Den omvendte strukturen passer til lang lesing: en ren sans-overskrift markerer seksjoner, mens serifbrødtekst gir bokpreg og lar øyet roe ned.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 12 | Poppins 600 | Lora 400 | Blogger, coaching, personlige nettsteder |
| 13 | Montserrat 700 | Merriweather 400 | Guider, ideelle organisasjoner, rapporter |
| 14 | Bricolage Grotesque 700 | Newsreader 400 | Essays, uavhengige medier |
| 15 | Outfit 600 | Source Serif 4 400 | Dokumentasjon, kursmateriell |

## Vennlige og avrundede par

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 16 | Fredoka 600 | Nunito 400 | Barnemerker, leker, familiekafeer |
| 17 | Quicksand 700 | Mulish 400 | Velvære, kjæledyr, milde tjenester |
| 18 | Rubik 600 | Karla 400 | Fellesskapsapper, lokale tjenester, veldedighet |

Avrundede skrifter føles vennlige, men myke. Quicksand virker tynn under 600; bruk tyngre vekter til tekst som må kunne leses.

## Kraftige overskriftspar til plakater og sosiale medier

Smale og kraftige overskriftsskrifter får store ord inn i små formater. Derfor dominerer de miniatyrbilder og plakater. De trenger en rolig partner. [Tekst i miniatyrbilder](https://gradiently.design/nb/guide/typography-for-thumbnails) og [overskriftsskrifter](https://gradiently.design/nb/guide/headline-fonts) går videre.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 19 | Anton 400 | Roboto 400 | Miniatyrbilder, sport, nyhetspregede innlegg |
| 20 | Bebas Neue 400 | Montserrat 400 | Treningssentre, arrangementer, kraftige menyer |
| 21 | Oswald 600 | Lato 400 | Plakater, kampanjer, salg |
| 22 | Abril Fatface 400 | Poppins 400 | Moteinnlegg, drikke, natteliv |

## Tekniske og eksklusive skriftpar

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Utviklerdokumentasjon, data, forskning |
| 24 | Space Grotesk 500 | Space Mono 400 | Uavhengig programvare, små magasiner, porteføljer |
| 25 | Bodoni Moda 500 | Jost 400 | Smykker, parfyme, eksklusiv handel |

I 24 er monoskriften brødteksten: den passer til korte notater og etiketter, ikke essays. De hårfine strekene i Bodoni Moda trives best i store størrelser, over omtrent 32 px.

## Feil som ødelegger et skriftpar

### Unngå

- To like sans serif-skrifter, som ser ut som en feil
- To overskriftsskrifter som kjemper om oppmerksomhet
- En serifskrift med hårfine streker til brødtekst på skjerm
- Å laste alle vekter i begge familiene
- En tredje skrift til én spesiell overskrift

### Gjør dette

- Tydelig kontrast i struktur, vekt eller bredde
- Én kraftig skrift og én rolig
- Brødtekst i 400 med en skrift som har stor x-høyde
- Bare de to til fire vektene du bruker
- Bruk heller en annen vekt eller størrelse fra de to skriftene

## Slik legger du et Google Fonts-par til nettstedet

1. **Velg vekter** Vanligvis én overskriftsvekt og to brødtekstvekter. Hver ekstra vekt er en ny fil å laste ned.
2. **Kopier innbyggingskoden** Velg familiene hos Google Fonts og kopier lenken du får, eller tilpass koden nedenfor.
3. **Sett roller i CSS** Gi overskrifter og brødtekst egne skriftfamilievariabler, så et senere bytte bare krever én linje.
4. **Test med ekte tekst** Sjekk et langt avsnitt, en overskrift på to linjer og det lengste produktnavnet før du bestemmer deg.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>
```

Par 2, Fraunces med Inter, som laster bare tre vekter. Bytt familienavnene til et hvilket som helst par over.

Google Fonts er gratis til kommersiell bruk, men les [skriftlisenser](https://gradiently.design/nb/guide/font-licensing) før du endrer en skrift eller selger den som del av et produkt. For å holde valget fast i hele merkevaren, lag et [typografisystem](https://gradiently.design/nb/guide/brand-typography-system) med navngitte roller.

Til innlegg og presentasjoner kan du sette paret én gang i et Gradiently-merkevaresett, som er en del av Pro. Det har en overskrifts- og en brødtekstskrift og tar imot [opplastede skriftfiler](https://gradiently.design/nb/guide/custom-fonts-upload). Designer bruker dem når den setter opp et design.

## FAQ

### Hvilke Google Fonts-kombinasjoner er best?

Trygge utgangspunkt er Fraunces med Inter, Playfair Display med Source Sans 3, DM Serif Display med DM Sans og Space Grotesk med Inter.

### Hvilken skrift passer til Montserrat?

Merriweather i brødteksten gir klassisk kontrast mellom sans og serif. Bebas Neue fungerer over Montserrat som en kraftig plakatoverskrift.

### Hva passer godt til Playfair Display?

En enkel, åpen sans serif til brødtekst, som Source Sans 3, Lato eller Inter. Unngå å kombinere den med en annen serifskrift med høy kontrast.

### Er Google Fonts gratis til kommersiell bruk?

Ja. Google Fonts bruker åpne lisenser, hovedsakelig SIL Open Font License, som tillater kommersiell bruk i logoer, nettsteder, trykk og kundeoppdrag. Les lisensen på hver skriftside hvis du vil endre eller distribuere filene.

### Hvor mange skrifter bør et nettsted bruke?

To er nok for de fleste nettsteder: én til overskrifter og én til brødtekst, bare i vektene du trenger.