CodeKitHubVad är detta verktyg?
Att para ihop typsnitt innebär att välja två (ibland tre) typsnitt som används tillsammans på en sida — vanligtvis ett för rubriker och ett för brödtext — så att sidan får en visuell hierarki utan att kännas omaka eller enformig.
Varje kombination nedan visar ett live-renderat exempel: rubriktypsnittet överst, brödtextstypsnittet under, med de faktiska Google Fonts-filerna, så att det du ser är exakt vad du får på din webbplats.
Varje kombination levereras med en färdig `<link>`-tagg för inbäddning från Google Fonts och ett matchande CSS-utdrag med `font-family`-deklarationer för rubriker och brödtext — kopiera båda så är du klar.
Varför använda det?
- 28 handplockade kombinationer, inte en automatgenererad lista — varje kombination är vald för att de två typsnitten verkligen kompletterar varandra.
- Live-förhandsvisning: varje kombination renderas med de riktiga typsnitten inlästa från Google Fonts, inte en statisk bild eller en gissning baserad på typsnittsnamnet.
- Filtrera efter stil — Modern, Elegant, Djärv, Minimalistisk, Klassisk — för att snabbt hitta den känsla ditt projekt behöver.
- Kopiera med ett klick, både `<link>`-taggen och CSS-reglerna för `font-family`.
- Gratis, körs i din webbläsare, inget konto eller inloggning krävs.
Så använder du det
- Klicka valfritt på ett stilfilter (Modern, Elegant, Djärv, Minimalistisk, Klassisk) för att smalna av listan, eller låt "Alla" vara markerat för att bläddra bland alla.
- Skanna igenom förhandsvisningskorten med live-rendering — översta raden visar rubriktypsnittet, raden under visar brödtextstypsnittet.
- Öppna en kombination du gillar och klicka för att expandera avsnittet med inbäddningskod.
- Kopiera `<link>`-taggen till din HTML-sidas `<head>`, och kopiera CSS-utdraget till din stilmall för att tillämpa typsnitten på rubriker och brödtext.
Exempel
Inmatning
Elegant bloggResultat
Playfair Display (rubriker) + Source Sans Pro (brödtext)Filtrering på "Elegant" lyfter fram kontrastrika antikva-rubriker parade med en ren, mycket läsbar linjär brödtext — en vanlig kombination för redaktionella layouter och bloggar.
Principer för bra typsnittsparning
- Kontrast framför likhet: två typsnitt som ser nästan identiska ut (till exempel två liknande geometriska linjära typsnitt) tenderar att se ut som ett misstag snarare än ett medvetet val. Para en antikva med en linjär, eller ett kraftigt display-typsnitt med ett lättare brödtextstypsnitt, så att skillnaden känns avsiktlig.
- Matcha x-höjd och proportioner: typsnitt vars gemener har liknande visuell höjd tenderar att kännas som att de hör hemma på samma sida, även när stilarna skiljer sig åt — omatchad x-höjd är en av de vanligaste anledningarna till att en kombination känns "fel".
- Begränsa dig till två familjer (ibland tre): en för rubriker, en för brödtext och som mest en tredje för accenter som knappar eller etiketter. Mer än så och sidan börjar kännas oplanerad.
- Tänk på känslan, inte bara formen: ett runt, vänligt linjärt typsnitt parat med en formell antikva ger blandade signaler även om bokstavsformerna tekniskt fungerar tillsammans — välj typsnitt som stämmer överens både i ton och struktur.
- Testa i verklig storlek: en kombination som ser fantastisk ut i en stor förhandsvisning kan förlora kontrast i brödtextstorlek, eller så kan ett display-typsnitt bli oläsligt i små storlekar — kontrollera alltid båda ytterligheterna.
Att välja kombination efter användningsområde
Landningssidor och marknadsföringswebbplatser gynnas oftast av filtren "Djärv" eller "Modern" — ett starkt, kontrastrikt rubriktypsnitt fångar uppmärksamheten högst upp på sidan, parat med ett rent, neutralt brödtextstypsnitt som gör längre text lätt att skumma.
Bloggar och redaktionellt innehåll läser oftast bäst med kombinationerna "Elegant" eller "Klassisk" — en förfinad antikva-rubrik signalerar en genomtänkt, redigerad röst, medan en behaglig antikva- eller linjär brödtext håller långa artiklar läsbara under längre läspass.
E-handel och produktwebbplatser tenderar att föredra kombinationerna "Minimalistisk" — återhållsamma, neutrala typsnitt håller fokus på produktbilder och priser snarare än på själva typografin, vilket spelar roll när dussintals produktkort visas på samma sida.
Portfolios och kreativa webbplatser har mest utrymme att experimentera — kombinationerna "Djärv" eller "Elegant" med mer personlighet kan fungera bra eftersom publiken delvis är där för att bedöma den visuella smaken.
Anteckningar om prestanda och licensiering
Inbäddnings-`<link>`-taggen läser in typsnitt från Googles CDN, som är snabbt och cachat på många webbplatser dina besökare troligen redan besökt — men det innebär ändå en extern förfrågan. För webbplatser där varje millisekund räknas tar det bort det externa beroendet att ladda ner typsnittsfilerna och självhosta dem (med `font-display: swap` inställt manuellt), till priset av lite extra konfigurationsarbete.
Alla typsnitt på Google Fonts är öppen källkod och gratis för kommersiellt bruk utan krav på att ange källa, även om det är en trevlig gest att kreditera typsnittsdesignern när det är enkelt att göra.
Vanliga frågor
Vad gör att två typsnitt "passar bra ihop"?
Bra kombinationer balanserar kontrast och harmoni. Kontrast — att para en antikva med en linjär, eller ett djärvt display-typsnitt med ett enkelt brödtextstypsnitt — skapar visuell hierarki så att rubriker och brödtext känns tydligt skilda. Harmoni — liknande x-höjd, jämförbar linjetjocklek och en gemensam känsla av formalitet eller lekfullhet — gör att de två inte krockar. Kombinationerna här är valda med bådadera i åtanke.
Ska rubriker och brödtext alltid använda olika typsnitt?
Nej, att använda en enda typsnittsfamilj för båda (som verktygets kombination "Rubik + Rubik") fungerar också bra, så länge typsnittet har tillräcklig viktvariation för att skilja rubriker från brödtext. Det är ett fullt giltigt, minimalistiskt val — inte ett misstag.
Hur tillämpar jag egentligen en kombination på min webbplats?
Kopiera `<link>`-taggen för inbäddning till sidans `<head>` för att läsa in typsnitten från Googles CDN, kopiera sedan CSS-utdraget till din stilmall — det sätter `font-family` för rubriker (h1, h2, h3) och för brödtext (body, p). Justera CSS-selektorerna om din HTML-struktur ser annorlunda ut.
Kommer inläsning av Google Fonts att sakta ner min webbplats?
Varje extra typsnittsfil innebär ytterligare en nätverksförfrågan och en viss risk för blockerad rendering. Håll dig till en rubrikvikt och en eller två brödtextsvikter, använd `display=swap` (redan inkluderat i inbäddningskoden) så att texten visas med ett reservtypsnitt medan webbtypsnittet läses in, och överväg att självhosta typsnittsfilerna för produktionswebbplatser som behöver snabbast möjliga inläsning.
Är dessa typsnitt gratis att använda kommersiellt?
Ja. Alla typsnitt i Google Fonts, inklusive alla kombinationer som visas här, är licensierade under SIL Open Font License eller Apache License — båda tillåter fri kommersiell användning, modifiering och vidaredistribution utan royalties.