# Google Fonts-kombinationer: 25 par, der virker

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

Hvert par her er gratis på Google Fonts og valgt ud fra, hvordan det opfører sig i rigtige overskrifter og brødtekst. Grupperet efter den følelse, du vil have, med de vægte, der får hvert par til at virke.

## The short version

- En god Google Fonts-kombination giver overskrift og brødtekst klart forskellige opgaver, som regel ved at sætte en display- eller serifskrift op mod en enkel sans.
- Par fra samme superfamilie, som DM Serif Display med DM Sans eller IBM Plex Sans med IBM Plex Mono, er det sikreste sted at starte.
- Brødtekst har brug for en skrift med generøs x-højde og åbne former i normalvægt 400, mens overskrifter kan have mere personlighed.
- Skrifter på Google Fonts udgives under åbne licenser, der tillader kommerciel brug, også i logoer, produkter og kundearbejde.
- Indlæs kun de vægte, du bruger, og tilføj display=swap for at holde siderne hurtige.

De bedste **Google Fonts-kombinationer** sætter en overskriftsskrift med karakter op mod en stille, læsevenlig brødtekstskrift: Fraunces med Inter, Playfair Display med Source Sans 3, Space Grotesk med Inter eller DM Serif Display med DM Sans. Her er 25 kombinationer grupperet efter stemning, hver med de vægte, der får den til at virke, og hvad den passer til. Alle er gratis, alle tillader kommerciel brug, og alle indlæses med én linje kode. Vælg først en gruppe efter følelse og derefter et par efter opgave.

## Sådan læser du kombinationerne

Hvert par har overskriften først og brødteksten bagefter. Overskriftsvægten er den, du bruger i store størrelser, mens brødteksten bliver ved 400 med 600 eller 700 til fremhævelse. Er du ny i tankegangen, forklarer [skriftkombination](https://gradiently.design/da/guide/font-pairing), hvorfor kontrast slår ligheder, og [serif eller sans serif](https://gradiently.design/da/guide/serif-vs-sans-serif) gennemgår, hvad hver familie bidrager med.

Et opslag i højformat i redaktionel stil med en stor displayoverskrift over mindre, roligere understøttende tekst

En kombination giver siden to stemmer. Overskriften tiltrækker, brødteksten forklarer. De må aldrig konkurrere.

## Redaktionelle kombinationer: serifoverskrifter med sans-brødtekst

Den klassiske opbygning. En serifoverskrift giver varme og autoritet, mens en sans-brødtekst gør lang læsning let på skærme.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 1 | Playfair Display 700 | Source Sans 3 400 | Magasiner, restauranter, bryllupper |
| 2 | Fraunces 600 | Inter 400 | Mad, håndværksbrands, nyhedsbreve |
| 3 | DM Serif Display 400 | DM Sans 400 | Bureauer, portfolier, landingssider |
| 4 | Instrument Serif 400 | Instrument Sans 400 | Moderne redaktionelt, studier, mode |
| 5 | Cormorant Garamond 600 | Work Sans 400 | Skønhed, interiør, boutiquehoteller |
| 6 | Libre Baskerville 700 | Libre Franklin 400 | Forlagsvirksomhed, jura, velovervejede lange tekster |

Fraunces har en akse for optisk størrelse: i store størrelser bliver detaljerne skarpere. Cormorant Garamond er sart på skærme, så hold den til overskrifter.

## Moderne sans-kombinationer til tech og produkter

Til software, startups og alt, der skal føles tidssvarende. Overskriften bærer karakteren gennem form, bredde eller finurlige detaljer, mens brødteksten er en arbejdshest.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 7 | Space Grotesk 700 | Inter 400 | Udviklerværktøjer, fintech, dashboards |
| 8 | Syne 700 | Manrope 400 | Kreative studier, events, musik |
| 9 | Sora 600 | Figtree 400 | Apps, SaaS-websteder, onboarding |
| 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristiske brands, gaming, lanceringer |
| 11 | Archivo Black 400 | Archivo 400 | Dristige produktsider, sport, detail |

Unbounded og Syne er brede og højtråbende: hold overskrifterne korte. Archivo passer sammen med sig selv, fordi dens sorte vægt er et helt andet dyr end dens normale.

## Sans-overskrifter med serif-brødtekst

Den omvendte opbygning passer til lang læsning: en ren sans-overskrift markerer afsnit, og en serif-brødtekst føles boglig og bremser øjet behageligt.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 12 | Poppins 600 | Lora 400 | Blogs, coaching, personlige websteder |
| 13 | Montserrat 700 | Merriweather 400 | Guider, nonprofitorganisationer, rapporter |
| 14 | Bricolage Grotesque 700 | Newsreader 400 | Essays, uafhængige medier |
| 15 | Outfit 600 | Source Serif 4 400 | Dokumentation, kursusmateriale |

## Venlige og afrundede kombinationer

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 16 | Fredoka 600 | Nunito 400 | Børnebrands, legetøj, familiecaféer |
| 17 | Quicksand 700 | Mulish 400 | Wellness, kæledyr, venlige tjenester |
| 18 | Rubik 600 | Karla 400 | Fællesskabsapps, lokale tjenester, velgørenhed |

Afrundede skrifter føles imødekommende, men bløde. Quicksand ser let ud under 600, så brug de tungere vægte til alt, der skal kunne læses.

## Dristige displaykombinationer til plakater og sociale medier

Kondenserede og tunge displayskrifter får store ord ind i små rammer, og derfor dominerer de thumbnails og plakater. De har brug for en rolig makker. [Tekst på thumbnails](https://gradiently.design/da/guide/typography-for-thumbnails) og [overskriftsskrifter](https://gradiently.design/da/guide/headline-fonts) går videre.

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 19 | Anton 400 | Roboto 400 | Thumbnails, sport, opslag i nyhedsstil |
| 20 | Bebas Neue 400 | Montserrat 400 | Fitnesscentre, events, dristige menukort |
| 21 | Oswald 600 | Lato 400 | Plakater, kampagner, udsalg |
| 22 | Abril Fatface 400 | Poppins 400 | Modeopslag, drikkevarer, natteliv |

## Tekniske og luksuriøse kombinationer

| # | Overskrift | Brødtekst | Passer til |
| --- | --- | --- | --- |
| 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Udviklerdokumentation, data, forskning |
| 24 | Space Grotesk 500 | Space Mono 400 | Uafhængig software, zines, portfolier |
| 25 | Bodoni Moda 500 | Jost 400 | Smykker, parfume, eksklusiv detail |

I 24 er monoskriften brødteksten: den virker til korte noter og etiketter, ikke essays. Bodoni Modas hårfine streger trives bedst store, over cirka 32 px.

## Fejl, der ødelægger en kombination

### Undgå

- To ens sans-skrifter, der ligner en fejl
- To displayskrifter, der kæmper om opmærksomheden
- En hårfin serif til brødtekst på skærme
- At indlæse alle vægte af begge familier
- En tredje skrift til én særlig overskrift

### Gør

- Tydelig kontrast i opbygning, vægt eller bredde
- Én højlydt skrift og én stille
- Brødtekst i 400 i en skrift med generøs x-højde
- Kun de to til fire vægte, du bruger
- Brug i stedet vægt eller størrelse fra dine to skrifter

## Sådan tilføjer du en Google Fonts-kombination til dit websted

1. **Vælg vægte** Som regel én overskriftsvægt og to brødtekstvægte. Hver ekstra vægt er endnu en fil, der skal hentes.
2. **Kopiér indlejringen** Vælg familierne på Google Fonts, og kopiér linket, du får, eller tilpas koden nedenfor.
3. **Fastlæg roller i CSS** Giv overskrifter og brødtekst hver sin variabel for skriftfamilie, så et senere skift kun er en enkelt linje.
4. **Test med rigtig tekst** Tjek et langt afsnit, en overskrift på to linjer og dit længste produktnavn, før du forpligter dig.

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

Kombination 2, Fraunces med Inter, hvor der kun indlæses tre vægte. Byt familienavnene ud med et hvilket som helst par ovenfor.

Google Fonts er gratis til kommerciel brug, men læs [skriftlicenser](https://gradiently.design/da/guide/font-licensing), før du ændrer en eller sælger den som en del af et produkt. For at få valget til at holde på tværs af et helt brand kan du gøre det til et [typografisystem](https://gradiently.design/da/guide/brand-typography-system) med navngivne roller.

Til opslag og præsentationer kan du sætte dit par én gang i et Gradiently-brandkit (en del af Pro), som rummer en overskrifts- og en brødtekstskrift og tager imod [uploadede skriftfiler](https://gradiently.design/da/guide/custom-fonts-upload), og Designer bruger dem, når den lægger et design ud.

## FAQ

### Hvad er de bedste Google Fonts-kombinationer?

Pålidelige udgangspunkter er Fraunces med Inter, Playfair Display med Source Sans 3, DM Serif Display med DM Sans og Space Grotesk med Inter.

### Hvilken skrift passer godt til Montserrat?

Merriweather til brødtekst giver en klassisk kontrast mellem sans og serif. Bebas Neue fungerer over Montserrat som dristig plakatoverskrift.

### Hvad passer godt sammen med Playfair Display?

En enkel, åben sans til brødtekst, som Source Sans 3, Lato eller Inter. Undgå at parre den med en anden serif med høj kontrast.

### Er Google Fonts gratis til kommerciel brug?

Ja. Skrifter på Google Fonts bruger åbne licenser, mest SIL Open Font License, der tillader kommerciel brug, også i logoer, websteder, tryk og kundearbejde. Læs licensen på hver skrifts side, hvis du vil ændre eller videredistribuere filerne.

### Hvor mange skrifter skal et websted bruge?

To er rigeligt til de fleste websteder: én til overskrifter og én til brødtekst, kun i de vægte, du har brug for.