Google Fonts-kombinasjoner: 25 skriftpar som fungerer

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 hvorfor kontrast slår likhet. Serif eller sans serif dekker det hver familie bidrar med.

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.

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.

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.

Vennlige og avrundede par

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

Tekniske og eksklusive skriftpar

Feil som ødelegger et skriftpar

Slik legger du et Google Fonts-par til nettstedet

1. 1

   Velg vekter

   Vanligvis én overskriftsvekt og to brødtekstvekter. Hver ekstra vekt er en ny fil å laste ned.

2. 2

   Kopier innbyggingskoden

   Velg familiene hos Google Fonts og kopier lenken du får, eller tilpass koden nedenfor.

3. 3

   Sett roller i CSS

   Gi overskrifter og brødtekst egne skriftfamilievariabler, så et senere bytte bare krever én linje.

4. 4

   Test med ekte tekst

   Sjekk et langt avsnitt, en overskrift på to linjer og det lengste produktnavnet før du bestemmer deg.

<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 kommersiell bruk, men les skriftlisenser før du endrer en skrift eller selger den som del av et produkt. For å holde valget fast i hele merkevaren, lag et typografisystem 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. Designer bruker dem når den setter opp et design.