10 fantastiska kombinationer av Google-teckensnitt som är trendiga 2021

En lista över trendiga teckensnitt handplockade från Google Fonts som passar bra ihop och hur du installerar dem på din webbplats.

• Artikel av Jason Beever
• Uppdaterad: Taggar: typografi, webbdesign

Typografi på webbplatser brukade vara en mer mystisk designmetod än vad den är idag. Den komplicerade processen att dekorera en webbsida med anpassade typsnitt krävde en gång i tiden att man konverterade och bäddade in typsnittsfiler som skulle lagras på användarens server, och valet av tillgängliga typsnitt var begränsat till användarens egen samling eller kunskap om typografi utanför standardsystemets typsnitt. Som ett resultat av detta såg de flesta webbplatser nästan identiska ut i sin innehållsformatering, som förlitade sig på många överanvända och vardagliga webb-säkra typsnitt.

Det förändrades 2010 i och med lanseringen av Google Fonts, ett projekt med öppen källkod som gör det mycket enklare att implementera anpassade typsnitt på webbplatser. Att installera dessa typsnitt på din egen webbplats är lyckligtvis en process som är snabb och enkel, men du bör vara medveten om att inte alla typsnittskombinationer i Googles bibliotek är ett recept för typografisk framgång. Med rätt typsnittskombinationer och rätt användningsöverväganden kan ditt varumärke på nätet dock utstråla professionalism, skönhet och läsarvänlighet utan att behöva använda dyra anpassade typsnitt. I den här artikeln visar jag dig hur du kan åstadkomma allt detta.

En lista med 10 trendiga kombinationer av Google-teckensnitt

Vi sätter igång! I ingen särskild ordning, här är 10 av de bästa Google Font-kombinationerna som för närvarande är trendiga:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Här är en enkel kombination som fungerar utmärkt för nästan alla tillämpliga användningsområden. Open Sans är ett av – om inte det mest mångsidiga teckensnittet i hela samlingen av Google Fonts. Det är extremt lätt att läsa i stora textblock, samtidigt som det är tillräckligt slående för rubriker.

Enkel. Sofistikerad. Bekant. Du kan inte göra fel!

Användning i den verkliga världen

Jag kan inte se något scenario där Open Sans skulle vara ett dåligt val. Om du inte letar specifikt efter ett serif-typsnitt tror jag att det här typsnittet kommer att tjäna de flesta företag, bloggar, landningssidor eller webbapplikationer perfekt.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald är ett utmärkt typsnitt för rubriker oavsett typsnittsvikt eller användning av versaler. Dess kondenserade karaktär hjälper den att fånga uppmärksamhet och poppa upp, men den ger också en behagligt unik text som huvudtextens typsnitt.

EB Garamond är en elegant uppdatering av det klassiska typsnittet Garamond. Det här typsnittet är omedelbart igenkännbart och tidlöst i sitt utseende och utstrålar en distinkt professionalism i din typografi.

Användning i den verkliga världen

Det här paret fungerar bra för yrkesverksamma som arbetar med högklassig kundkrets, till exempel advokater, fastighetsbyråer eller till och med exklusiva boutiquer. Oswalds mångsidighet och det klassiska utseendet hos EB Garamond passar utmärkt i produktbeskrivningstexter där det är viktigt att framhäva en vara av premiumkvalitet.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat är en favorit bland formgivare för sin mångsidighet och enkelhet, och Merriweather passar utmärkt med sin kontrasterande stil och lätta läsbarhet. Byt gärna ut dem som rubriker eller stycketext – de fungerar båda utmärkt som båda!

Real-World Use

Denna speciella kombination är en fin balans mellan modern och klassisk design. Den kan användas på många olika sätt för många olika typer av företag. Personligen känner jag att dessa typsnitt skulle passa bra för alla typer av online-nyhetskällor eller förlag.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Typsnittet Roboto är en personlig favorit och det är också ett som vi använder här på How To Get Online. Extremt mångsidig med ett brett utbud av typsnittsvikter finns det praktiskt taget ingen begränsning för vad typsnittet kan användas till. Roboto är modern och geometrisk, men på något sätt fortfarande vänlig och pålitlig, och är ett underverk av form och funktion.

Real-World Use

Här är en annan parning som du har svårt att hitta en dålig användning för. Roboto fungerar för nästan allt, men jag tycker att det är särskilt bra för nystartade teknikföretag, moderna småföretag och alla typer av varumärken som är inriktade på framtiden.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

Det är vår vän Roboto igen! Den här gången tittar vi dock på serifvarianten Roboto Slab. Det är ett typsnitt som är lika mångsidigt som sin kusin, men med en lite mer klassisk stil. När den paras ihop med den distinkta och djärva Raleway har vi en fantastisk matchning av ren och raffinerad typografi.

Realvärldsanvändning

Raleway är ett av de typsnitt som skriker sofistikering. När det används som en rubrik med alla versaler tycker jag att det fungerar utmärkt för lyxartiklar som smycken, märkeskläder eller liknande exklusiva e-handelsprodukter. Roboto Slab stödjer det bra med enkel och lättillgänglig beskrivande text.

De båda fungerar också på ett utbytbart sätt. Prova olika viktvariationer för båda typsnitten i rubriker och brödtext och se vilket par som fångar ditt varumärke bäst.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Enligt designern har Playfair Display inspirerats av bokstavsformer från 1700-talet under övergången från fjäderpennor till pennor med stålspets. Det är ingen överraskning att det här typsnittet utstrålar gammaldags charm men med en modern twist.

Source Sans Pro driver saker och ting lite längre in i framtiden och skapar en spännande kombination som är utsmyckad samtidigt som den är användbar.

Användning i verkligheten

Playfair Display lägger till en personlig touch till något som en tagline eller en produktbeskrivning. Om du har en chans att använda dess ampersand eller valutasymboler kommer du omedelbart att se varför det är det perfekta valet för en produkt eller tjänst som kretsar kring lyx och utseende. Source Sans Pro håller texten jordad i en modern och ren presentation.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One är kanske inte det mest mångsidiga teckensnittet, men en sak som det gör extremt bra är att skapa rubriker som kräver uppmärksamhet. Små eller stora, små bokstäver eller versaler, dessa bokstäver är hypnotiska oavsett vad du gör med dem.

Noto Sans syftar till att vara ett verkligt universellt typsnitt där det, oavsett språk, kan visas utan formateringsfel för användare över hela världen. Lämpligen är typsnittets estetik lika mångsidig som dess användbarhet.

Användning i den verkliga världen

Bloggar eller landningssidor skulle passa utmärkt för det här paret – eller egentligen allt med långa textmassor som kräver märkbara underrubriker för att bryta upp innehållet. Den universella anpassningsbarheten hos Noto Sans gör den också till ett bra val när det är viktigt att nå en internationell publik.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya har ett visst tilltal som känns väldigt ”jordnära” och vänligt för mig. Det finns ingen pretention om dess personlighet; vad du ser är vad du får.

Lato skulle kunna ge Open Sans en chans att bli mästare bland alla typsnitt i Googles bibliotek.

Tillammans ger de en kombination som är rolig, lättläst och pragmatisk.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

En annan modern tolkning av en gammaldags stil, PT Sans och dess bror, PT Sans Narrow, gör ett omedelbart och omisskännligt uttalande när de paras ihop.

Användning i den verkliga världen

Varje typsnitt fungerar lika bra som rubrik eller brödtext; vilket par du väljer beror på hur dina ord ser ut – även om jag tenderar att föredra PT Sans Narrow i kortare avsnitt.

Det är tänkt att PT Sans Narrow ska vara ett ”mycket viktigt verktyg för modern digital kommunikation”, och det verkar vara lämpligast – men inte begränsat till – att använda dessa typsnitt för nystartade teknikföretag, mjukvarutillämpningar eller andra digitala företag.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okej, den här är definitivt mer på den lättsamma sidan. Den här kombinationen fungerar naturligtvis inte för alla, men den finurliga karaktären hos både Amatic SC och Josefin Sans skapar något som garanterat kommer att sticka ut – bara du är försiktig!

Användning i den verkliga världen

Om du är en rolig konstnär, skådespelare, musiker eller underhållare kan det här typsnittet vara viktigt för att fånga din unika personlighet. Beroende på den övergripande tonen och ämnet kan den här kombinationen även fungera för en nischad blogg.

Ett gott råd: Använd inte Amatic SC som huvudtext. Du kommer att driva dina läsare till vansinne.

Bonus: 5 av våra favoritpremiumteckensnitt

Vi vet att den här artikeln handlar om de bästa, trendiga Google-teckensnitten, men vi ville också nämna några av våra favoritpremiumteckensnitt som en bonus. Premiumteckensnitt är förstås inte gratis – men de ger din webbplats en mer unik och anpassad design. Dessa typsnitt är inte populära eller trendiga och är faktiskt raka motsatsen till de typsnitt vi listat ovan. Dessa är dock bra för dem som vill ha en anpassad och personlig design för sitt varumärke och passar bra när de används för logotyper eller till och med kreativa rubriker:

Bonus 1: The Mega Craft Bundle X

Bonus 2: The Valentine’s Bundle

Bonus 3: The Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

Varför ska du använda Google Fonts?

Välkommen till det som många webbdesigners betraktar som sin bästa vän. När jag talar av erfarenhet kan jag berätta att jag sällan bäddar in anpassade typsnittsfiler på webbplatser längre. Google Fonts är nu nästan uteslutande det första och sista stället jag vänder mig till när det gäller en webbplats typografi. Här är varför:

• Det är helt gratis. Det spelar ingen roll hur många typsnitt du väljer eller hur många webbplatser du använder dem på. Du kommer aldrig att betala ett öre.
• I mars 2018 finns det över 850 typsnitt i biblioteket. Chansen är stor att du hittar rätt stil som passar ditt varumärke.
• Det går snabbt. Eftersom teckensnitten finns på Googles servrar är filerna intelligent komprimerade och utformade för att laddas snabbt.
• Det är enkelt. En enkel kopiering och klistring i en HTML-fil och du är klar.
• Det är organiserat. Alla typsnitt är kategoriserade och sökbara i en databas. Du behöver inte längre leta i röriga undermappar på din dator för att hitta det perfekta teckensnittet.
• Har jag nämnt att det är gratis? Det är gratis!

Hur du installerar Google Fonts

Ingen huvudvärk krävs här. Det är bara att gå till Google Fonts och hitta de typsnitt du behöver.

När du väljer dina typsnitt läggs de kumulativt till i en samling längst ner på sidan. När du är klar med din sökning klickar du på den nedre fliken och ett fönster med inbäddningsinstruktioner visas.

Att lägga till stilar

Här kan du välja att inkludera ytterligare stilar som kursiv, fet, fet-kursiv och så vidare. Klicka bara på fliken CUSTOMIZE och välj de stilar du tror att du behöver.

Till exempel så här skulle jag välja både vanlig och fet text för typsnittet Khula.

Inbädda standard eller @Import?

Du kommer att märka att du har två alternativ för att bädda in typsnitten på din webbplats: genom att använda en standard <link href> som ska användas i webbplatsens HTML-fil, eller en @import url som ska ingå i webbplatsens CSS-fil. Så vilken ska du använda?

Det bästa alternativet är i allmänhet att kopiera och klistra in <link href>-linjen i din HTML-fil. Dina typsnitt laddas vanligtvis snabbare på detta sätt i stället för att vänta på att CSS-filen ska laddas, och den här metoden har också lite bättre stöd för (mycket) gamla webbläsare.

Hur du ska placera koden

Du ska kopiera och klistra in den kodrad som Google ger dig i avsnittet <head> i din HTML-fil. Om du använder teckensnittet Khula som jag valde ovan kommer det att se ut så här:

Användning av teckensnittet i ditt stilark

Nu kan du helt enkelt använda teckensnittet som vanligt i din CSS-kod. I demonstrationssyfte kan din huvudrubrik och din stycketext se ut så här:

Råd om hur du kombinerar dina typsnitt

Att bestämma vilka typsnitt som ska grupperas tillsammans kan ibland vara en svår konstnärlig balans att hitta. Å ena sidan blir ditt typsnittsval mest effektivt när det finns en tillräcklig kontrast mellan stilarna; varje typsnitt på din webbplats måste sticka ut från de andra och förtjäna en motivering för sin användning. Å andra sidan vill du inte att teckensnitten ska skilja sig för mycket från varandra stilistiskt, vilket skulle kunna ge intryck av att de valts ut slumpmässigt.

Serif och sans-serif

En beprövad metod är att para ihop ett serif-typsnitt med ett sans-serif-typsnitt. Deras stilar tenderar att kontrastera bra tillsammans, vilket ger en enkel distinktion mellan rubriker och stycken.

Experimentation är nyckeln

När jag väljer typsnitt för en ny webbplats laddar jag ner alla möjliga Google Font-alternativ till min dator och leker med dem i ett ordbehandlingsdokument. Att leka med olika storlekar och vikter och jämföra kombinationerna sida vid sida är ett effektivt sätt att hitta det bästa möjliga paret. Om du tar dig tid att experimentera kanske du till och med upptäcker att om du använder en tunn variant av ett visst typsnitt blir rubriktexten bättre än om du använder ett helt annat typsnitt. (Den enklaste lösningen är ofta den bästa.)

Slutsats

Google Fonts är en kraftfull resurs för gör-det-självare som inte vill betala för dyra anpassade typsnitt på sin webbplats. Men med stor makt följer ett stort ansvar: typografi kräver noggrann genomtänkthet för att göras bra, och inte alla typsnitt som finns där ute är en vinnare. Vi hoppas att den här guiden hjälper dig att styra dig i rätt riktning och inspirerar dig att hitta det perfekta typsnittsparet som fångar ditt varumärkes personlighet.