Google Fonts-kombinationer: 25 typsnittspar som fungerar

De bästa Google Fonts-kombinationerna ställer ett typsnitt med karaktär som rubrik mot ett stilla, läsbart som brödtext: Fraunces med Inter, Playfair Display med Source Sans 3, Space Grotesk med Inter eller DM Serif Display med DM Sans. Nedan finns 25 kombinationer grupperade efter stämning, var och en med de vikter som får den att fungera och vad den passar till. Alla är gratis, alla tillåter kommersiell användning och alla laddas med en enda kodrad. Välj grupp efter känsla först, och sedan par efter uppgift.

Så läser du kombinationerna

Varje par har rubriken först och brödtexten sedan. Rubrikvikten är den du använder i stora storlekar, medan brödtexten ligger på 400 med 600 eller 700 för betoning. Om du är ny på resonemanget förklarar typsnittskombinationer varför kontrast slår likhet, och serif mot sans serif går igenom vad varje familj tillför.

Redaktionella kombinationer: serifrubriker med sans som brödtext

Den klassiska strukturen. En serifrubrik ger värme och auktoritet, och en sans som brödtext gör långläsning lätt på skärmar.

Moderna sans-kombinationer för tech och produkt

För mjukvara, startups och allt som ska kännas samtida. Rubriken bär karaktären genom form, bredd eller egensinniga detaljer, medan brödtexten är en arbetshäst.

Sans-rubriker med serif som brödtext

Den omvända strukturen passar långläsning: en ren sans som rubrik markerar avsnitt, och en serif som brödtext känns boklig och saktar behagligt ner ögat.

Vänliga och rundade kombinationer

Kraftfulla displaykombinationer för affischer och sociala medier

Smala och tunga displaytypsnitt får plats med stora ord i små bildrutor, vilket är varför de dominerar miniatyrer och affischer. De behöver en lugn partner. Text i miniatyrer och rubriktypsnitt går längre.

Tekniska och lyxiga kombinationer

Misstag som förstör en kombination

Så lägger du till en Google Fonts-kombination på din sajt

1. 1

   Välj vikter

   Oftast en rubrikvikt och två brödtextvikter. Varje extra vikt är ytterligare en fil att ladda ner.

2. 2

   Kopiera inbäddningen

   Välj familjerna på Google Fonts och kopiera länken du får, eller anpassa koden nedan.

3. 3

   Sätt roller i CSS

   Ge rubriker och brödtext var sin variabel för typsnittsfamilj, så att ett senare byte blir en enradsändring.

4. 4

   Testa med riktig text

   Kontrollera ett långt stycke, en tvåradig rubrik och ditt längsta produktnamn innan du bestämmer 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 är gratis för kommersiellt bruk, men läs typsnittslicenser innan du ändrar ett eller säljer det som en del av en produkt. För att få valet att hålla genom ett helt varumärke, gör det till ett typografisystem med namngivna roller.

För sociala inlägg och presentationer, sätt ditt par en gång i ett varumärkeskit i Gradiently (en del av Pro), som rymmer ett rubrik- och ett brödtextsnitt och tar emot uppladdade typsnittsfiler, så använder Designer dem när den lägger ut en design.