# Google Fonts-kombinationer: 25 typsnittspar som fungerar [Canonical HTML page](https://gradiently.design/sv/guide/google-fonts-pairings) Varje par här är gratis på Google Fonts och valt för hur det beter sig i riktiga rubriker och brödtext. Grupperade efter den känsla du vill ha, med de vikter som får varje par att fungera. ## The short version - En bra Google Fonts-kombination ger rubriken och brödtexten tydligt olika uppgifter, oftast genom att ställa ett display- eller serifsnitt mot en enkel sans. - Par från samma superfamilj, som DM Serif Display med DM Sans eller IBM Plex Sans med IBM Plex Mono, är den tryggaste platsen att börja. - Brödtext behöver ett typsnitt med generös x-höjd och öppna former i normalvikt 400, medan rubriker kan bära mer personlighet. - Typsnitten på Google Fonts släpps under öppna licenser som tillåter kommersiell användning, även i logotyper, produkter och kundarbeten. - Ladda bara de vikter du använder och lägg till display=swap för att hålla sidorna snabba. 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](https://gradiently.design/sv/guide/font-pairing) varför kontrast slår likhet, och [serif mot sans serif](https://gradiently.design/sv/guide/serif-vs-sans-serif) går igenom vad varje familj tillför. Ett stående inlägg i redaktionell stil med en stor displayrubrik över mindre, lugnare stödtext En kombination ger sidan två röster. Rubriken lockar och brödtexten förklarar. De ska aldrig konkurrera. ## 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. | # | Rubrik | Brödtext | Passar till | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Magasin, restauranger, bröllop | | 2 | Fraunces 600 | Inter 400 | Mat, hantverksvarumärken, nyhetsbrev | | 3 | DM Serif Display 400 | DM Sans 400 | Byråer, portfolior, landningssidor | | 4 | Instrument Serif 400 | Instrument Sans 400 | Modernt redaktionellt, studior, mode | | 5 | Cormorant Garamond 600 | Work Sans 400 | Skönhet, inredning, boutiquehotell | | 6 | Libre Baskerville 700 | Libre Franklin 400 | Förlag, juridik, genomtänkta långläsningar | Fraunces har en axel för optisk storlek: i stora storlekar skärps detaljerna. Cormorant Garamond är skör på skärmar, så håll den till rubriker. ## 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. | # | Rubrik | Brödtext | Passar till | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Utvecklarverktyg, fintech, instrumentpaneler | | 8 | Syne 700 | Manrope 400 | Kreativa studior, event, musik | | 9 | Sora 600 | Figtree 400 | Appar, SaaS-sajter, onboarding | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Futuristiska varumärken, spel, lanseringar | | 11 | Archivo Black 400 | Archivo 400 | Kraftfulla produktsidor, sport, detaljhandel | Unbounded och Syne är breda och högljudda: håll rubrikerna korta. Archivo passar ihop med sig själv eftersom dess svarta vikt är ett helt annat djur än dess normala. ## 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. | # | Rubrik | Brödtext | Passar till | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Bloggar, coachning, personliga sajter | | 13 | Montserrat 700 | Merriweather 400 | Guider, ideella organisationer, rapporter | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Essäer, oberoende medier | | 15 | Outfit 600 | Source Serif 4 400 | Dokumentation, kursmaterial | ## Vänliga och rundade kombinationer | # | Rubrik | Brödtext | Passar till | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Barnvarumärken, leksaker, familjecaféer | | 17 | Quicksand 700 | Mulish 400 | Välmående, husdjur, milda tjänster | | 18 | Rubik 600 | Karla 400 | Communityappar, lokala tjänster, välgörenhet | Rundade typsnitt känns nåbara men mjuka. Quicksand ser lätt ut under 600, så använd dess tyngre vikter för allt som måste synas. ## 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](https://gradiently.design/sv/guide/typography-for-thumbnails) och [rubriktypsnitt](https://gradiently.design/sv/guide/headline-fonts) går längre. | # | Rubrik | Brödtext | Passar till | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Miniatyrer, sport, inlägg i nyhetsstil | | 20 | Bebas Neue 400 | Montserrat 400 | Gym, event, kraftfulla menyer | | 21 | Oswald 600 | Lato 400 | Affischer, kampanjer, rea | | 22 | Abril Fatface 400 | Poppins 400 | Modeinlägg, drycker, nattliv | ## Tekniska och lyxiga kombinationer | # | Rubrik | Brödtext | Passar till | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Utvecklardokumentation, data, forskning | | 24 | Space Grotesk 500 | Space Mono 400 | Indiemjukvara, fanzines, portfolior | | 25 | Bodoni Moda 500 | Jost 400 | Smycken, parfym, exklusiv detaljhandel | I nummer 24 är monon brödtexten: den fungerar för korta anteckningar och etiketter, inte essäer. Bodoni Modas hårfina streck trivs bäst stora, över ungefär 32 px. ## Misstag som förstör en kombination ### Undvik - Två liknande sans-typsnitt, som ser ut som ett misstag - Två displaytypsnitt som slåss om uppmärksamheten - Ett hårfint serif-typsnitt som brödtext på skärmar - Att ladda varje vikt av båda familjerna - Ett tredje typsnitt för en enda särskild rubrik ### Gör så här - Tydlig kontrast i struktur, vikt eller bredd - Ett högljutt typsnitt och ett stilla - Brödtext i 400 i ett typsnitt med generös x-höjd - Bara de två till fyra vikter du använder - Använd vikt eller storlek från dina två typsnitt i stället ## Så lägger du till en Google Fonts-kombination på din sajt 1. **Välj vikter** Oftast en rubrikvikt och två brödtextvikter. Varje extra vikt är ytterligare en fil att ladda ner. 2. **Kopiera inbäddningen** Välj familjerna på Google Fonts och kopiera länken du får, eller anpassa koden nedan. 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. **Testa med riktig text** Kontrollera ett långt stycke, en tvåradig rubrik och ditt längsta produktnamn innan du bestämmer dig. ```html ``` Kombination 2, Fraunces med Inter, som bara laddar tre vikter. Byt familjenamnen mot vilket par ovan som helst. Google Fonts är gratis för kommersiellt bruk, men läs [typsnittslicenser](https://gradiently.design/sv/guide/font-licensing) 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](https://gradiently.design/sv/guide/brand-typography-system) 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](https://gradiently.design/sv/guide/custom-fonts-upload), så använder Designer dem när den lägger ut en design. ## FAQ ### Vilka är de bästa Google Fonts-kombinationerna? Pålitliga utgångspunkter är Fraunces med Inter, Playfair Display med Source Sans 3, DM Serif Display med DM Sans och Space Grotesk med Inter. ### Vilket typsnitt passar ihop med Montserrat? Merriweather som brödtext ger en klassisk kontrast mellan sans och serif. Bebas Neue fungerar över Montserrat som en kraftfull affischrubrik. ### Vad passar ihop med Playfair Display? En enkel, öppen sans som brödtext, till exempel Source Sans 3, Lato eller Inter. Undvik att para det med en annan högkontrastserif. ### Är Google Fonts gratis för kommersiellt bruk? Ja. Typsnitten på Google Fonts använder öppna licenser, mestadels SIL Open Font License, som tillåter kommersiell användning, även i logotyper, webbplatser, tryck och kundarbeten. Läs licensen på varje typsnitts sida om du tänker ändra eller vidaredistribuera filerna. ### Hur många typsnitt bör en webbplats använda? Två räcker gott för de flesta sajter: ett för rubriker och ett för brödtext, i bara de vikter du behöver.