10 mahtavaa Google-fonttiyhdistelmää, jotka suosivat vuonna 2020

Luettelo trendikkäistä fontteista, jotka on käsin poimittu Google Fontsista ja jotka pariliittuvat hyvin toisiinsa, ja kuinka ne asennetaan verkkosivustollesi.


Parhaat Google-fonttiyhdistelmät

Verkkosivutyypitys oli aiemmin salaperäisempi suunnittelukäytäntö kuin nykyään. Monimutkainen prosessi verkkosivun sisustamiseksi mukautetuilla kirjasimilla edellytti käyttäjän palvelimella isännöitävien fonttitiedostojen muuntamista ja upottamista, ja käytettävissä olevien kirjasimien valinta rajoittui käyttäjän omaan kokoelmaan tai typografian tuntemukseen tavallisten järjestelmäfonttien ulkopuolella. Tämän seurauksena useimmat verkkosivustot näyttivät sisällön muotoilussaan lähes identtisiltä, ​​mikä vetoaa moniin liikakäytettyihin ja arkipäiviin verkkoon turvalliset fontit.

Kaikki muuttui vuonna 2010 julkaistua Google-fontit, avoimen lähdekoodin projekti, joka mahdollistaa mukautettujen kirjasinten huomattavasti helpomman käyttöönoton verkkosivustoilla. Näiden fonttien asentaminen omalle verkkosivustollesi on onneksi nopea ja helppo prosessi, mutta sinun tulee olla tietoinen, että kaikki Googlen kirjaston kirjasinkombinaatiot eivät ole resepti typografiseen menestykseen. Oikeilla fonttiparilla ja käyttönäkökohdilla verkkobrändisi voi kuitenkin ilmaista ammattimaisuutta, kauneutta ja lukijaystävällisyyttä ilman, että tarvitaan kalliita räätälöityjä fontteja. Tässä artikkelissa minä näytän sinulle, miten tämä kaikki suoritetaan.

Luettelo 10 trendikkästä Google-fonttiyhdistelmästä

Mennään siihen! Tässä ei ole 10 parhaasta tällä hetkellä trendikkäimmistä Google Font -yhdistelmistä:

1. Open Sans tiivistetty + Open Sans

Trendikäs Google-fonttiyhdistelmä - avoimet, tiivistetyt ja avoimet

Tässä on helppo yhdistelmä, joka tekee ihmeitä melkein mihin tahansa soveltuvaan käyttöön. Avaa Sans on yksi monimuotoisimmista fontteista koko Google Fonts -kokoelmassa. Se on erittäin helppo lukea isoina tekstilohkoina, silti riittävän silmiinpistävä otsikoihin.

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

Oikea käyttö

En voi ennakoida mitään skenaariota missä Avaa Sans olisi huono valinta. Ellet etsi erityistä serif-kirjasinta, mielestäni tämä toimii useimmissa yrityksissä, blogeissa, aloitussivuilla tai verkkosovelluksissa täydellisesti.

2. Oswald + EB Garamond

Suosittu Google-fonttiyhdistelmä - Oswald EB Garamondin kanssa

Oswald on hieno kirjasin otsikoihin riippumatta kirjasimen painosta tai korkkien käytöstä. Sen tiivistynyt luonne auttaa häntä tarttumaan huomioon ja poppiiniin, mutta se tekee myös miellyttävän ainutlaatuisen tekstin tärkeimmän rungon fonttina.

EB Garamond on tyylikäs päivitys klassiseen Garamond-kirjasimeen. Välittömästi tunnistettava ja ajaton ulkonäkönsä, tämä kirjasinlaji antaa erityistä ammattimaisuutta tipografiassasi.

Oikea käyttö

Tämä pariliitos toimii hyvin ammattilaisille, jotka työskentelevät huippuluokan asiakaskunnan kanssa, kuten asianajajat, kiinteistövälitystoimistot tai jopa kalliit putiikit. Monipuolisuus Oswald ja klassisen ilmeen EB Garamond tee loistava tuotekuvausteksti, jossa on tärkeää korostaa korkealaatuista tuotetta.

3. Montserrat + Merriweather

Suosittu Google-fonttiyhdistelmä - Montserrat Merriweatherin kanssa

Montserrat on suunnittelijoiden suosikki monipuolisuudestaan ​​ja yksinkertaisuudestaan, ja Merriweather paria ihanasti kontrastisella tyylillään ja helposti luettavallani. Voit vaihtaa ne otsikoiksi tai kappaleteksteiksi – molemmat toimivat hyvin!

Oikea käyttö

Tämä yhdistelmä on hieno tasapaino modernia ja klassista muotoilua. Sellaisena sen monipuolinen käyttö voi tukea monentyyppisiä yrityksiä. Henkilökohtaisesti mielestäni nämä kirjasimet toimisivat hyvin kaikenlaisille online-uutislähteille tai kustantamoille.

4. Roboto ohut + Roboto säännöllinen

Suosittu Google-fonttiyhdistelmä - Roboto Thin ja Roboto Regular

Roboto font-perhe on henkilökohtainen suosikki, ja sitä käytetään myös täällä How To Get Online -sivustolla. Erittäin monipuolinen ja laaja kirjasinpainovalikoima, käytännössä ei ole mitään rajoituksia siihen, mihin fonttia voitaisiin käyttää. Moderni ja geometrinen, mutta silti jotenkin ystävällinen ja luotettava, Roboto on ihme muodosta ja toiminnasta.

Oikea käyttö

Tässä on toinen pariliitos, johon sinun on painostettava löytämään huono käyttö. Sillä aikaa Roboto toimii melkein minkä tahansa suhteen, mielestäni se on erityisen hieno tekniikan aloittajille, moderneille pienyrityksille tai kaikenlaiselle tulevaisuuden silmällä pitävälle tuotemerkille.

5. Raleway + Roboto -laatta

Suosittuja Google-fonttiyhdistelmiä - Raleway ja Roboto Slab

Se on ystävämme Roboto uudelleen! Tällä kertaa tarkastelemme kuitenkin serif-variaatiota, Roboto-laatta. Se on fontti, joka on yhtä monipuolinen kuin serkkunsa, mutta hieman klassisemman tyylin. Kun pariksi on erottuva ja lihavoitu Raleway, meillä on hämmästyttävä ottelu puhdasta ja hienostunutta typografiaa.

Oikea käyttö

Raleway on yksi niistä fonteista, joka huutaa hienostuneisuutta. Kun sitä käytetään kaikentyyppisenä otsikkona, mielestäni se toimii kauniisti ylellisyystuotteiden, kuten korujen, suunnittelijavaatteiden tai vastaavankaltaisten verkkokauppatuotteiden, kanssa.. Roboto-laatta tukee sitä hyvin yksinkertaisella ja lähestyttävällä kuvailevalla tekstillä.

He molemmat toimivat myös keskenään. Kokeile erilaisia ​​painomenetelmiä sekä otsikoissa että tekstissä sekä nähdäksesi mikä pariliitos vangitsee brändisi parhaiten.

6. Playfair näyttö + Source Sans Pro

Suosittu Google-fonttiyhdistelmä - Playfair-näyttö Source Sans Pron kanssa

Suunnittelijan mukaan, Playfair-näyttö on inspiroinut 1800-luvun kirjemuodot siirtyessä kynistä teräskärkikyniin. Ei siis ole yllätys, että tämä kirjasinlaite antaa vanhan maailman viehätysvoiman, mutta modernilla spinillä.

Lähde Sans Pro työntää asioita taaksepäin tulevaisuuteen luomalla kiehtovan yhdistelmän, joka on koristeellinen ja on silti utilitaristinen.

Oikea käyttö

Playfair-näyttö lisää henkilökohtaisen tunteen jokseenkin tarra- tai tuotekuvaukseen. Jos sinulla on mahdollisuus käyttää sen merkkijono- tai valuutasymboleita, huomaat heti, miksi se on täydellinen valinta tuotteelle tai palvelulle, joka keskittyy ylellisyyteen ja esiintymisiin.. Lähde Sans Pro pitää tekstin maadoitettuna moderniksi ja puhtaana esityksenä.

7. Fjalla One + Noto Sans

Suosittu Google-fonttiyhdistelmä - Fjalla One ja Noto Sans

Fjalla Yksi ei ehkä ole monipuolisimpia fontteja, mutta yksi asia, joka on erittäin hyvä, on huomiota vaativien otsikoiden luominen. Pienet tai suuret, pienet tai kaikki isot kirjaimet, nuo kirjaimet ovat hypnoottisia riippumatta siitä, mitä teet heidän kanssaan.

Noto Sans tavoitteena on olla todella universaali fontti, jossa se voidaan kielestä riippumatta näyttää ilman muotoiluvirheitä käyttäjille ympäri maailmaa. Sopivasti, fontin estetiikka on yhtä monipuolinen kuin sen hyödyllisyys.

Oikea käyttö

Blogit tai aloitussivut olisivat hienoja tähän paritteluun – tai oikeasti kaikkeen, jolla on pitkät tekstikehykset, jotka vaativat huomattavia alaotsikoita sisällön hajottamiseksi. Noto Sansin yleinen sopeutumiskyky tekee siitä myös hyvän valinnan, jossa ensisijainen tavoite on saavuttaa kansainvälinen yleisö.

8. Alegreya + Lato

Suosittu Google-fonttiyhdistelmä - Alegreya ja Lato

Alegreya on tietty vetovoima, joka tuntuu minusta erittäin “maanläheiseltä” ja ystävällinen. Sen persoonallisuudesta ei ole mitään teeskentelyä; Mitä näet on mitä saat.

lato voisi antaa Avaa Sans juoksu rahallesi Googlen kirjaston monikäyttöisten kirjasinten mestarina.

Yhdessä he tekevät yhdistelmän, joka on hauska, helppo lukea ja käytännöllinen.

9. PT Sans kapea + PT Sans

Suosittu Google-fonttiyhdistelmä - PT Sans kapea ja PT Sans

Toinen moderni tyyli on vanhan maailman muotoilu, PT Sans ja sen veljet, PT Sans kapea, anna välitön ja erehtymätön lausunto pariksi muodostettuaan.

Oikea käyttö

Kumpi tahansa fontti toimii yhtä hyvin otsikon tai tekstitekstin kanssa; valittu pariliitos riippuu sanojen luonteesta – vaikka pidän parempana PT Sans Narrowia lyhyemmissä purskeissa.

Suunniteltu “erittäin tärkeäksi välineeksi nykyaikaisessa digitaalisessa viestinnässä”, se näyttää sopivimmalta – vaikkakaan ei rajoitetusti – näiden fonttien käyttämiselle tekniikan aloittamisessa, ohjelmistosovelluksissa tai muissa digitaalisissa yrityksissä..

10. Amatic SC + Josefin Sans

Suosittu Google-fonttiyhdistelmä - Amatic SC Josefin kanssa

Okei, tämä on ehdottomasti enemmän hellävarainen. Ilmeisesti tämä yhdistelmä ei toimi kaikille, mutta kummankin omituinen luonne Amatic SC ja Josefin Sans luo jotain, joka varmasti erottuu – niin kauan kuin noudatat varovaisuutta!

Oikea käyttö

Jos olet hauskanpitoinen taiteilija, muusikko tai viihdyttäjä, tämä fontti voi olla välttämätön ainutlaatuisen persoonallisuuttasi vangitsemisessa. Tämä yhdistelmä voisi toimia kattavaan blogiin kattavastä sävystä ja aiheesta riippuen.

Neuvonta: Älä käytä Amatic SC päätekstinä. Ajat lukijaasi hulluksi.

Bonus: 5 suosikki Premium-kirjasintasi

Tiedämme, että tämä artikkeli koskee parhaimpia, trendikkäimpiä Google-fontteja, mutta halusimme mainita myös bonuksena muutama suosituimmista premium-fontteista. Ensiluokkaiset fontit eivät tietenkään ole ilmaisia ​​- mutta ne antavat verkkosivustollesi yksilöllisemmän ja mukautetun suunnittelun. Nämä fontit eivät ole suosittuja tai trendikkäitä, ja ne ovat todellakin päinvastoin kuin yllä luetellut. Nämä ovat kuitenkin hienoja niille, jotka haluavat omalle tuotemerkilleen räätälöityä ja henkilökohtaista mallia, ja toimivat hyvin, kun niitä käytetään logoissa tai jopa luovissa otsikoissa:

Bonus 1: Mega Craft Bundle X

Bonus 2: Ystävänpäivä-paketti

Bonus 3: Cool Font Bundle

Bonus 4: Pieni grafiikkapaketti

Bonus 5: mustasukkainen

NOPEA VINKKI: Ensiluokkaiset fontit tarjoavat suunnittelijoille mahdollisuuden saavuttaa ajaton muotoilu, ja niitä suositellaan erittäin hyvin logoille ja tuotemerkin identiteetille.

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

Tervetuloa siihen, mitä monet web-suunnittelijat pitävät parhaaksi ystäväkseen. Kokemuksen perusteella voin kertoa, että upotan harvoin mukautettuja fonttitiedostoja verkkosivustoille. Google Fonts on nyt lähes yksinomaan ensimmäinen ja viimeinen paikka, johon käännyn verkkosivuston typografian suhteen. Tästä syystä:

  • Sen täysin ilmainen. Ei ole väliä kuinka monta fonttia valitset tai kuinka monessa verkkosivustossa niitä käytät. Et koskaan maksa penniäkään.
  • Maaliskuusta 2018 alkaen on yli 850 kirjasinta kirjastossa. On todennäköistä, että löydät oikean tyylin vastaamaan tuotemerkkiäsi.
  • Sen nopeasti. Koska fontit isännöidään Googlen palvelimilla, tiedostot on älykkäästi pakattu ja suunniteltu latautumaan nopeasti.
  • Sen helppo. Yksinkertainen kopiointi ja liittäminen HTML-tiedostoon ja olet valmis.
  • Sen järjestäytynyt. Kaikki fontit on luokiteltu ja niitä voidaan hakea yhdestä tietokannasta. Älä enää selaa tietokoneesi sotkuisten alikansioiden läpi löytääksesi täydellinen fontti.
  • Mainitsinko sen vapaa? Se on ilmainen!

Kuinka asentaa Google Fonts

Täällä ei tarvita päänsärkyä. Mene vain Google-fontit ja etsi tarvittavat fontit.

Kun valitset fontteja, ne lisätään kumulatiivisesti kokoelmaan sivun alareunassa. Kun olet suorittanut haun, napsauta kyseistä alavälilehteä ja ikkuna, jossa on upotusohjeet, aukeaa.

Tyylien lisääminen

Täältä voit valita, sisällyttääkö muita tyylejä, kuten kursivoitu, lihavoitu, lihavoitu-kursivoitu ja niin edelleen. Napsauta vain CUSTOMIZE -välilehti ja valitse tarvitsemasi tyylit.

Esimerkiksi tässä on miten valitsen molemmat säännöllinen ja lihavoitu teksti fontille Khula.

Fonttityylin lisääminen Google Fontsiin

Upota standardi tai @Import?

Huomaat, että fonttien upottamiseen verkkosivustollesi on kaksi vaihtoehtoa: käyttämällä standardia käytettäväksi sivustossasi HTML tiedosto tai @import URL olla mukana sivustossasi CSS tiedosto. Joten mitä sinun pitäisi käyttää?

Yleensä paras vaihtoehto on kopioida ja liittää kirjaudu HTML-tiedostoosi. Fonttisi latautuvat yleensä nopeammin tällä tavalla kuin odottavat CSS-tiedoston lataamista, ja tällä menetelmällä on myös hieman parempi tuki (erittäin) vanhoille selaimille.

Mihin laittaa koodi

Aiot kopioida ja liittää koodirivin, jonka Google antaa sinulle HTML-tiedostosi osa. Joten käyttämällä yllä valittua Khula-kirjasinta se näyttää tältä:

NOPEA VINKKI: Voit myös määrittää fonttityylit kirjoittamalla ne URL-osoitteeseen pilkuilla erotettuna. Esimerkiksi: “https://fonts.googleapis.com/css?family=Khula:lihavoitu, kursivoitu, BoldItalic

Fontin käyttäminen tyylisivulla

Nyt soitat fontti tavallisesti omassa CSS koodi. Esittelytarkoituksissa pääotsikkosi ja kappaletekstesi voisi näyttää tältä:

h1 {
kirjasinperhe: ‘Khula’, sans-serif;
kirjasimen paino: 700;
fonttikoko: 48px;
}
p {
kirjasinperhe: ‘Khula’, sans-serif;
kirjasimen paino: 400;
kirjasinkoko: 16 kuvapistettä;
}

NOPEA VINKKI: Varmista, että sisällytät vara fontin, kuten ‘serif’, ‘sans-serif’ tai vastaavan verkkoturvallisen fontin, siinä harvinaisessa tapauksessa, että Google-fontti ei lataudu.

Neuvoja kirjasinten pariliitosta varten

Ryhmittämisen valitseminen voi olla joskus hankala taiteellinen tasapaino. Toisaalta fonttisi valinta on tehokkainta, kun tyyleissä on riittävästi kontrastia; jokaisen sivustosi fontin on erotuttava muista ja ansaittava perustelu sen käytölle. Toisaalta, et halua, että fontit kulkevat tyylillisesti liian kaukana toisistaan, mikä voi antaa vaikutelman, että ne on valittu satunnaisesti..

NOPEA VINKKI: Ajattele mitä tunteita tai ideoita tietty fontti herättää. Yritä yhdistää se toiseen kirjasimeen, joka herättää saman tunteen tai idean. Kyse on oikeiden kirjasimien löytämisestä, jotka puhuvat ainutlaatuiseen tuotemerkkiisi. Tunnet sen luonnostaan, kun fontti tuntuu brändiltäsi vai antaako se sekoitettuja signaaleja.

Serif ja Sans-Serif

Yritetty menetelmä on yhdistää serif-fontti sans-serif-fonttiin. Heidän tyylinsä pyrkivät vastakkain toisiinsa ja tarjoavat helpon erotuksen otsikoista ja kappaleista.

Kokeilu on avain

Kun valitsen kirjasimia uudelle verkkosivustolle, haluan ladata kaikki mahdolliset Google Font -asetukset tietokoneelleni ja pelata niiden kanssa tekstinkäsittelyasiakirjassa. Erikoiskoot ja -painotukset ja yhdistelmien vertaaminen vierekkäin on tehokas tapa määrittää paras mahdollinen pariliitos. Ottamalla aikaa kokeiluun, saatat jopa huomata, että käyttämällä ohut Tietyn fontin muunnos parantaa otsikkotekstiä paremmin kuin jos käyttäisit täysin erillistä kirjasinta. (Yksinkertaisin ratkaisu on usein paras.)

johtopäätös

Google Fonts on tehokas resurssi DIYers-työntekijöille, jotka eivät halua maksaa kalliista mukautetuista kirjasimista verkkosivustollaan. Mutta suurella voimalla on suuri vastuu: typografia vaatii huolellista harkintaa, jotta se voidaan tehdä hyvin, eikä kaikilla siellä olevilla fonteilla ole voittajaa. Toivomme, että tämä opas auttaa sinua ohjaamaan sinua oikeaan suuntaan ja innostaa sinua löytämään täydellinen fonttipari pari brändisi persoonallisuuden kaappaamiseksi.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map