Google Fonts-kombinationer: 25 par, der virker

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, hvorfor kontrast slår ligheder, og serif eller sans serif gennemgår, hvad hver familie bidrager med.

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.

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.

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.

Venlige og afrundede kombinationer

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 og overskriftsskrifter går videre.

Tekniske og luksuriøse kombinationer

Fejl, der ødelægger en kombination

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

1. 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. 2

   Kopiér indlejringen

   Vælg familierne på Google Fonts, og kopiér linket, du får, eller tilpas koden nedenfor.

3. 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. 4

   Test med rigtig tekst

   Tjek et langt afsnit, en overskrift på to linjer og dit længste produktnavn, før du forpligter dig.

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

Google Fonts er gratis til kommerciel brug, men læs skriftlicenser, 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 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, og Designer bruger dem, når den lægger et design ud.