10 Awesome Google Font Combinations Trending in 2021

Luettelo Google Fontsista käsin poimituista trendikkäistä fonttiyhdistelmistä, jotka sopivat hyvin yhteen, ja miten asentaa ne verkkosivuillesi.

• Artikkeli: Jason Beever
• Päivitetty:
• Avainsanat: typografia, verkkosuunnittelu

Websivujen typografia oli ennen mystisempi suunnittelukäytäntö kuin nykyään. Vaikea prosessi verkkosivun koristelemiseksi mukautetuilla fonteilla vaati aikoinaan fonttitiedostojen muuntamista ja upottamista käyttäjän palvelimelle, ja käytettävissä olevien fonttien valinta rajoittui käyttäjän omaan kokoelmaan tai tietämykseen typografiasta järjestelmän vakiofonttien ulkopuolella. Tämän seurauksena useimmat verkkosivustot näyttivät sisällön muotoilultaan lähes identtisiltä, mikä perustui moniin ylikäytettyihin ja arkipäiväisiin web safe -fontteihin.

Tämä kaikki muuttui vuonna 2010, kun Google Fonts julkaistiin, avoimen lähdekoodin hanke, joka mahdollistaa paljon helpomman mukautettujen fonttien käyttöönoton verkkosivustoilla. Näiden fonttien asentaminen omalle verkkosivustollesi on onneksi nopea ja helppo prosessi, mutta on syytä olla tietoinen siitä, että kaikki Googlen kirjaston fonttiyhdistelmät eivät ole resepti typografiseen menestykseen. Oikeilla fonttipareilla ja käyttökohteilla verkkobrändisi voi kuitenkin huokua ammattimaisuutta, kauneutta ja lukijaystävällisyyttä ilman kalliita räätälöityjä fontteja. Tässä artikkelissa näytän, miten tämä kaikki onnistuu.

Luettelo 10 trendikkäästä Googlen fonttiyhdistelmästä

Lähdetään hommiin! Tässä on ilman erityistä järjestystä 10 parasta Google Font -yhdistelmää, jotka ovat tällä hetkellä trendikkäitä:

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Tässä on helppo yhdistelmä, joka tekee ihmeitä melkein mihin tahansa sovellettavaan käyttöön. Open Sans on yksi – ellei jopa monipuolisin – fontti koko Google Fonts -kokoelmassa. Se on erittäin helppolukuinen suurissa tekstilohkoissa, mutta silti riittävän näyttävä otsikoihin.

Yksinkertainen. Hienostunut. Tuttu. Ei voi mennä pieleen!

Käyttö todellisessa maailmassa

En näe mitään skenaariota, jossa Open Sans olisi huono valinta. Ellet etsi nimenomaan serif-fonttia, uskon, että tämä fontti palvelee lähes kaikkia yrityksiä, blogeja, aloitussivuja tai verkkosovelluksia täydellisesti.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald on loistava fontti otsikoihin riippumatta fonttipainosta tai isojen kirjainten käytöstä. Sen tiivistetty luonne auttaa sitä kiinnittämään huomiota ja ponnahtamaan esiin, mutta se tekee myös miellyttävän ainutlaatuista tekstiä pääkappaleen fontiksi.

EB Garamond on tyylikäs päivitys klassisesta Garamond-fontista. Tämä välittömästi tunnistettava ja ulkonäöltään ajaton fontti huokuu erottuvaa ammattimaisuutta typografiassasi.

Real-World Use

Tämä parivaljakko sopii hyvin ammattilaisille, jotka ovat tekemisissä korkeatasoisen asiakaskunnan kanssa, kuten asianajajille, kiinteistövälitystoimistoille tai jopa tasokkaille putiikeille. Oswaldin monipuolisuus ja EB Garamondin klassinen ilme sopivat erinomaisesti tuotekuvausteksteihin, joissa on tärkeää korostaa ensiluokkaista tuotetta.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat on suunnittelijoiden suosiossa monikäyttöisyytensä ja yksinkertaisuutensa vuoksi, ja Merriweather sopii loistavasti yhteen sen kontrastisen tyylin ja helpon luettavuuden kanssa. Voit vapaasti vaihtaa niitä otsikoina tai kappaleen tekstinä – molemmat toimivat loistavasti kumpanakin!

Real-World Use

Tämä erityinen yhdistelmä on hieno tasapaino modernin ja klassisen muotoilun välillä. Sellaisenaan sen monipuolinen käyttö voisi tukea monenlaisia yrityksiä. Henkilökohtaisesti minusta tuntuu, että nämä fontit sopisivat hyvin kaikenlaisiin verkkouutislähteisiin tai julkaisutoimistoihin.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Roboto-fonttityyppi on henkilökohtainen suosikkini, ja sitä käytämme myös täällä How To Get Onlinessa. Se on erittäin monipuolinen, ja siinä on laaja kirjasinpainovalikoima, joten sen käyttömahdollisuuksia ei käytännössä ole rajoitettu. Moderni ja geometrinen, mutta silti jotenkin ystävällinen ja luotettava, Roboto on muodon ja toiminnan ihme.

Real-World Use

Tässä on toinen parivaljakko, jolle on vaikea löytää huonoa käyttöä. Vaikka Roboto sopii melkein mihin tahansa, mielestäni se sopii erityisen hyvin teknologia-alan start-up-yrityksille, nykyaikaisille pienyrityksille tai kaikenlaisille tulevaisuuteen suuntautuville tuotemerkeille.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

Se on taas ystävämme Roboto! Tällä kertaa tarkastelemme kuitenkin serifimuunnelmaa, Roboto Slabia. Se on fontti, joka on yhtä monipuolinen kuin serkkunsa, mutta tyyliltään hieman klassisempi. Kun se yhdistetään erottuvan ja rohkean Ralewayn kanssa, saamme hämmästyttävän yhdistelmän puhdasta ja hienostunutta typografiaa.

Real-World Use

Raleway on yksi niistä fonteista, jotka huutavat hienostuneisuutta. Kun sitä käytetään isokirjaimisena otsikkona, se sopii mielestäni erinomaisesti ylellisyystuotteisiin, kuten koruihin, design-vaatteisiin tai vastaaviin korkeatasoisiin verkkokauppatuotteisiin. Roboto Slab tukee sitä hyvin yksinkertaisella ja helposti lähestyttävällä kuvaavalla tekstillä.

Kumpikin toimii myös vaihdettavana. Kokeile molempien fonttien eri painovaihtoehtoja otsikoissa ja runkotekstissä ja katso, mikä parivaljakko kuvaa brändiäsi parhaiten.

6. Kokeile eri painovaihtoehtoja. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Suunnittelijansa mukaan Playfair Display on saanut inspiraationsa 1700-luvun kirjainmuodoista siirryttäessä sulkakynistä teräskärkisiin kyniin. Ei siis mikään yllätys, että tämä fontti huokuu vanhan maailman charmia, mutta siinä on moderni vivahde.

Source Sans Pro vie asioita hieman pidemmälle tulevaisuuteen ja luo kiehtovan yhdistelmän, joka on koristeellinen, mutta silti utilitaristinen.

Käytössä oikeassa maailmassa

Playfair Display antaa persoonallisen kosketuksen esimerkiksi taglineen tai tuotekuvaukseen. Jos sinulla on tilaisuus käyttää sen ampersandia tai valuuttasymboleita, huomaat heti, miksi se on täydellinen valinta tuotteelle tai palvelulle, joka keskittyy ylellisyyteen ja ulkonäköön. Source Sans Pro pitää tekstin maadoittuneena moderniin ja siistiin esitystapaan.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One ei ehkä ole kaikkein monipuolisin kirjasintyyppi, mutta yksi asia, jonka se tekee poikkeuksellisen hyvin, on luoda huomion vaativia otsikoita. Pienet tai isot, pienet tai isot kirjaimet, nuo kirjaimet ovat hypnoottisia riippumatta siitä, mitä niillä tekee.

Noto Sansin tavoitteena on olla todella universaali fontti, jossa se voidaan kielestä riippumatta näyttää ilman muotoiluvirheitä käyttäjille kaikkialla maailmassa. Sopivasti fontin estetiikka on yhtä monipuolinen kuin sen käyttökelpoisuus.

Real-World Use

Blogit tai laskeutumissivut sopisivat erinomaisesti tälle parivaljakolle – tai oikeastaan mikä tahansa, jossa on pitkiä tekstikokonaisuuksia, jotka vaativat huomattavia väliotsikoita sisällön hajottamiseksi. Noto Sansin universaali muunneltavuus tekee siitä myös hyvän valinnan, jos kansainvälisen yleisön tavoittaminen on tärkeää.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreyassa on tiettyä vetovoimaa, joka tuntuu minusta hyvin ”maanläheiseltä” ja ystävälliseltä. Sen persoonallisuudessa ei ole mitään teeskentelyä; se, mitä näet, on sitä, mitä saat.

Lato voisi antaa Open Sansille kyytiä Googlen kirjaston monikäyttöfonttien mestarina.

Yhteen ne muodostavat yhdistelmän, joka on hauska, helppolukuinen ja käytännöllinen.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Toisenlainen moderni versio vanhan maailman tyylistä, PT Sans ja sen veljet, PT Sans Narrow, tekevät välittömän ja erehtymättömän lausahduksen yhdessä.

Real-World Use

Kumpikin fontti toimii yhtä hyvin otsikkona tai runkotekstinä; valitsemasi paritus riippuu sanojesi luonteesta – vaikka minulla on taipumus suosia PT Sans Narrow’ta lyhyemmissä pätkissä.

Tarkoitettu ”erittäin tärkeäksi työkaluksi nykyaikaisessa digitaalisessa kommunikaatiossa”, näyttää sopivimmalta – vaikkakaan ei todellakaan rajoitetulta – käyttää näitä fontteja teknologia-alan startup-yrityksissä, ohjelmistosovelluksissa tai muissa digitaalisissa yrityksissä.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Okei, tämä on ehdottomasti enemmän kevytmielisen puolella. Tämä yhdistelmä ei tietenkään sovi kaikille, mutta sekä Amatic SC:n että Josefin Sansin omituinen luonne luo jotain, joka varmasti erottuu edukseen – kunhan noudatat varovaisuutta!

Käyttö oikeassa maailmassa

Jos olet hauskannäköinen taiteilija, näyttelijä, muusikko tai viihdyttäjä, tämä fontti voi olla olennainen yksilöllisen persoonallisuutesi kuvaamisessa. Riippuen yleisestä sävystä ja aihepiiristä, tämä yhdistelmä voisi toimia myös niche-blogissa.

Vinkkinä: Älä käytä Amatic SC:tä päätekstinäsi. Teet lukijasi hulluiksi.

Bonus: 5 suosikki Premium-fonttia

Tiedämme, että tämä artikkeli käsittelee parhaita, trendikkäitä Google-fontteja, mutta halusimme mainita bonuksena myös muutaman suosikkiemme premium-fontin. Premium-fontit eivät tietenkään ole ilmaisia – mutta ne antavat verkkosivustollesi ainutlaatuisemman ja yksilöllisemmän ulkoasun. Nämä fontit eivät ole suosittuja tai trendikkäitä, ja ne ovat todellakin päinvastoin kuin edellä mainitsemamme fontit. Nämä ovat kuitenkin loistavia niille, jotka haluavat brändilleen räätälöidyn ja yksilöllisen suunnittelun, ja ne sopivat hyvin käytettäväksi logoissa tai jopa luovissa otsikoissa:

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

Miksi sinun pitäisi käyttää Google-fontteja?

Tervetuloa tutustumaan siihen, mitä monet verkkosuunnittelijat pitävät parhaana ystävänään. Kokemuksesta puhuen voin kertoa, että upotan enää harvoin mukautettuja fonttitiedostoja verkkosivuille. Google Fonts on nyt lähes yksinomaan ensimmäinen ja viimeinen paikka, johon käännyn verkkosivuston typografian osalta. Tässä on syy:

• Se on täysin ilmainen. Ei ole väliä, kuinka monta fonttia valitset tai kuinka monella verkkosivustolla käytät niitä. Et maksa koskaan penniäkään.
• Kirjastossa on maaliskuussa 2018 yli 850 fonttia. Todennäköisesti löydät oikean tyylin, joka sopii brändiisi.
• Se on nopea. Koska fontit sijaitsevat Googlen palvelimilla, tiedostot on pakattu älykkäästi ja suunniteltu latautumaan nopeasti.
• Se on helppoa. Yksinkertainen kopioi ja liitä HTML-tiedostoon ja olet valmis.
• Se on järjestetty. Kaikki fontit on luokiteltu ja haettavissa yhdessä tietokannassa. Ei enää sotkuisten alikansioiden penkomista tietokoneellasi täydellisen fontin löytämiseksi.
• mainitsinko jo, että se on ilmainen? Se on ilmainen!

How to Install Google Fonts

Tässä ei tarvita päänvaivaa. Mene vain Google Fontsiin ja etsi tarvitsemasi fontti(t).

Kun valitset fontteja, ne lisätään kumulatiivisesti kokoelmaan sivun alaosassa. Kun olet lopettanut haun, napsauta tuota alinta välilehteä, jolloin avautuu ikkuna, jossa on upotusohjeita.

Tyylien lisääminen

Tästä voit valita lisämuotoilun, kuten kursiivin, lihavoinnin, lihavoidun-kursivoidun ja niin edelleen. Napsauta CUSTOMIZE-välilehteä ja valitse tyylit, joita arvelet tarvitsevasi.

Tässä esimerkissä valitsisin sekä tavallisen että lihavoidun tekstin fontille Khula.

Vakiomuotoilun vai @Importin lisääminen?

Huomaa, että sinulla on kaksi vaihtoehtoa fonttien upottamiseen sivustollesi: käyttämällä standardia <link href>, jota käytetään sivustosi HTML-tiedostossa, tai @import-url, joka sisällytetään sivustosi CSS-tiedostoon. Kumpaa siis kannattaa käyttää?

Yleisesti paras vaihtoehto on kopioida ja liittää <link href>-rivi HTML-tiedostoosi. Fonttisi latautuvat tyypillisesti nopeammin tällä tavalla kuin odottamalla CSS-tiedoston latautumista, ja tällä menetelmällä on myös hieman parempi tuki (hyvin) vanhoille selaimille.

Mihin laitat koodin

Kopioit ja liität Googlen antaman koodirivin HTML-tiedostosi <head>-osioon. Käyttämällä edellä valitsemaani Khula-fonttia se näyttää siis tältä:

Fontin käyttäminen tyylilomakkeessasi

Nyt voit yksinkertaisesti kutsua fonttia tavalliseen tapaan CSS-koodissasi. Havainnollistamistarkoituksessa pääotsikkosi ja kappaleen tekstisi voisivat näyttää tältä:

Vinkkejä fonttien parittamiseen

Päätöksenteko siitä, mitkä fontit kannattaa ryhmitellä yhteen, voi joskus olla hankala taiteellinen tasapaino. Toisaalta fonttivalikoimasi on tehokkaimmillaan, kun tyylit ovat riittävän kontrastisia; jokaisen sivustollasi esiintyvän fontin on erotuttava muista ja ansaittava perustelut käytölleen. Toisaalta et halua, että fontit poikkeavat tyylillisesti liikaa toisistaan, mikä voisi antaa vaikutelman, että ne on valittu sattumanvaraisesti.

Serifit ja serifittömät fontit

Kokeiltu tapa on yhdistää serif-fontti serifittömään fonttiin. Niiden tyylit erottuvat yleensä hyvin toisistaan, jolloin otsikot ja kappaleet on helppo erottaa toisistaan.

Kokeilu on avainasemassa

Kun valitsen fontteja uudelle verkkosivustolle, haluan ladata kaikki mahdolliset Google Font -vaihtoehdot tietokoneelleni ja leikkiä niillä tekstinkäsittelydokumentissa. Eri kokojen ja painojen kokeileminen ja yhdistelmien vertailu vierekkäin on tehokas tapa määrittää paras mahdollinen yhdistelmä. Kun käytät aikaa kokeilemiseen, saatat jopa huomata, että käyttämällä tietyn fontin ohuempaa variaatiota saat paremman otsikkotekstin kuin jos käyttäisit täysin erillistä fonttia. (Yksinkertaisin ratkaisu on usein paras.)

Johtopäätös

Google Fonts on tehokas resurssi tee-se-itse-tekijöille, jotka eivät halua maksaa kalliista mukautetuista fonteista verkkosivuillaan. Suuren vallan myötä tulee kuitenkin myös suuri vastuu: typografia vaatii huolellista harkintaa, jotta se voidaan tehdä hyvin, eivätkä kaikki saatavilla olevat fontit ole voittajia. Toivomme, että tämä opas auttaa ohjaamaan sinua oikeaan suuntaan ja inspiroi sinua löytämään täydellisen fonttiparin, joka vangitsee brändisi persoonallisuuden.