10 fenomenalnih kombinacija Google fontova u trendu 2020. godine

Popis trendi fontova ručno biranih iz Google Fontova koji se dobro kombiniraju i kako ih instalirati na svoju web stranicu.

Najbolje kombinacije Google fontova

Tipografija web stranica nekada je bila mističnija dizajnerska praksa nego danas. Složeni postupak ukrašavanja web stranice s prilagođenim fontovima koji je jednom zahtijevao pretvaranje i umetanje datoteka fontova da se hostiraju na korisničkom poslužitelju, a izbor dostupnih fontova bio je ograničen na korisnikovu zbirku ili znanje o tipografiji izvan standardnih fontova sustava. Kao rezultat toga, većina web stranica izgledala je gotovo identično u oblikovanju sadržaja, što se oslanjalo na mnoge pretjerano korištene i svakodnevne web sigurni fontovi.

Sve se to promijenilo 2010. godine izlaskom Google fontovi, projekt otvorenog koda koji omogućava daleko jednostavniju implementaciju prilagođenih fontova na web stranicama. Instaliranje ovih fontova na vlastitoj web stranici srećom je postupak koji je brz i jednostavan, ali trebate imati na umu da nije svaka kombinacija fontova u Googleovoj biblioteci recept za tipografski uspjeh. Međutim, s pravim uparivanjem fontova i upotrebom, vaš internetski brend može iskazivati ​​profesionalnost, ljepotu i susretljivost s čitateljima bez potrebe za skupim prilagođenim fontom. U ovom ću vam članku pokazati kako sve to postići.

Popis 10 trendnih kombinacija Google fontova

Ajmo na to! Ni na kojem posebnom redoslijedu, evo 10 najboljih kombinacija Google fontova trenutno u trendu:

1. Open Sans Condensed + Otvori Sans

U trendu kombinacija Google fontova - Otvori s skraćenim i otvorenim prozorima

Evo jednostavne kombinacije koja čini čuda za gotovo svaku primjenu. Otvori Sans jedan je – ako ne i – najsvestraniji font u čitavoj kolekciji Google fontova. Izuzetno je lako čitati u velikim blokovima teksta, a istovremeno je dovoljno upečatljiv za naslove.

Jednostavan. Sofisticiran. Poznato. Ne možete pogriješiti!

Upotreba u stvarnom svijetu

Ne mogu predvidjeti nijedan scenarij gdje Otvori Sans bio bi loš izbor. Ako ne tražite posebno serijski font, mislim da će ovaj savršeno savršeno poslužiti bilo koji poslovni, blog, odredišnu stranicu ili web aplikaciju.

2. Oswald + EB Garamond

Trendovna kombinacija Google fontova - Oswald sa EB Garamondom

Oswald odličan je font za naslove bez obzira na težinu fonta ili upotrebu velikih slova. Njegova kondenzirana priroda pomaže mu privući pažnju i poparkirati, ali stvara i ugodan jedinstveni tekst kao font vašeg tijela.

EB Garamond je elegantno ažuriranje klasičnog fonta Garamond. Izuzetno prepoznatljiv i bezvremenski u izgledu, ovaj font odaje izrazitu profesionalnost u vašoj tipografiji.

Upotreba u stvarnom svijetu

Ovo uparivanje dobro funkcionira za profesionalce koji se bave vrhunskim klijentima, kao što su odvjetnici, agencije za nekretnine ili čak vrhunski butici. Svestranost Oswald i klasični izgled EB Garamond napravite odličan tekst opisa proizvoda tamo gdje je važno naglasiti stavku vrhunske kvalitete.

3. Montserrat + Merriweather

Trendi kombinacija Google fontova - Montserrat s Merriweather

Montserrat je omiljen među dizajnerima zbog svoje svestranosti i jednostavnosti te Merriweather čudesno se uklapa u svoj kontrastni stil i lako čitljivost. Slobodno ih zamijenite kao naslove ili tekst odlomaka – i jedno i drugo odlično funkcionira!

Upotreba u stvarnom svijetu

Ova posebna kombinacija lijepi je balans modernog i klasičnog dizajna. Kao takav, njegova raznolikost upotrebe mogla bi podržati mnoge vrste poduzeća. Osobno mislim da bi ti fontovi mogli dobro poslužiti za bilo koju vrstu internetskih izvora vijesti ili izdavačke agencije.

4. Roboto tanak + redovno Roboto

Trendovna kombinacija Google fontova - Roboto tanko s Roboto Regular

Roboto obitelj fontova je osobni favorit, a koristi se i ovdje kako pronaći mrežu. Izuzetno svestran, sa širokim rasponom težine fonta, praktički nema ograničenja u onome za što se font može koristiti. Moderan i geometrijski, a opet nekako susretljiv i pouzdan, Roboto je čudo forme i funkcije.

Upotreba u stvarnom svijetu

Evo još jednog uparivanja za koje biste bili teško pritisnuti kako biste pronašli loše korištenje. Dok Roboto radi za gotovo sve, mislim da je posebno sjajan za tehnološka poduzeća, moderna mala poduzeća ili bilo koju vrstu marke sa pogledom u budućnost.

5. Raleway + Roboto ploča

Trendove kombinacija Google fontova - Raleway s Roboto Plošćom

To je naš prijatelj Roboto opet! Ovog puta, međutim, promatramo varijantu serifa, Roboto Slab. To je font koji je jednako svestran kao i njegov rođak, a opet malo klasičniji u stilu. Kada je uparen s prepoznatljivim i podebljanim Raleway, imamo nevjerojatno podudaranje čiste i rafinirane tipografije.

Upotreba u stvarnom svijetu

Raleway jedno je od onih fontova koji vrište na sofisticiranost. Kada se koristi kao naslov sa svim kapicama, mislim da lijepo djeluje na luksuzne predmete kao što su nakit, dizajnerska odjeća ili slični visoki proizvodi za e-trgovinu.. Roboto Slab dobro ga podržava jednostavan i pristupačan opisni tekst.

Oboje također rade naizmjenično. Isprobajte različite varijacije težine za fontove u naslovima i tekstu tijela i pogledajte koje združivanje najbolje bilježi vašu marku.

6. Playfair Prikaz + izvor Sans Pro

Trendi kombinacija Google fontova - prikaz Playfair s Source Sans Pro

Prema njegovom dizajneru, Playfair prikaz bila je nadahnuta obrascima slova 18. stoljeća tijekom prijelaza s olovaka na olovke sa čeličnim vrhom. Stoga ne čudi što ovaj font odiše šarmom starog svijeta, ali modernim sjajem.

Izvor Sans Pro gura stvari malo dalje u budućnost, stvarajući intrigantnu kombinaciju koja je ukrašena dok je još uvijek korisna.

Upotreba u stvarnom svijetu

Playfair prikaz dodaje osobni dodir nečemu poput oznake ili opisa proizvoda. Ako budete imali priliku upotrebljavati simbole ampersand ili valutu, odmah ćete vidjeti zašto je to savršen izbor za proizvod ili uslugu usredotočen na luksuz i izgled. Izvor Sans Pro drži tekst uzemljenim u modernoj i čistoj prezentaciji.

7. Fjalla One + Noto Sans

Trendi kombinacija Google fontova - Fjalla One s Noto Sans

Fjalla One možda i nisu najsvestraniji fontovi, ali jedna stvar koja se izuzetno dobro slaže je stvaranje naslova koji zahtijevaju pažnju. Mala ili velika, mala ili velika slova, ta su slova hipnotička bez obzira na to što radite s njima.

Noto Sans želi biti doista univerzalni font gdje se, bez obzira na jezik, može prikazati bez grešaka u oblikovanju za korisnike širom svijeta. U skladu s tim, estetika fonta jednako je svestrana koliko i njegova korisnost.

Upotreba u stvarnom svijetu

Blogovi ili odredišne ​​stranice bili bi sjajni za ovo uparivanje – ili u stvari bilo što s dugim tekstovima teksta koji zahtijevaju vidljive podnaslove da bi razvrstali sadržaj. Univerzalna prilagodljivost Noto Sans-a također ga čini dobrim izborom gdje je privlačenje međunarodne publike prioritet.

8. Alegreya + Lato

Trendovna kombinacija Google fontova - Alegreya s Latoom

Alegreya ima određenu privlačnost koja se prema meni osjeća vrlo “zemljano” i prijateljski. Nema pretvaranja oko njegove osobnosti; Ono što vidite je ono što dobivate.

Lato mogao dati Otvori Sans trka za svojim novcem kao prvak višenamjenskih fontova u Googleovoj biblioteci.

Zajedno stvaraju kombinaciju koja je zabavna, laka za čitanje i pragmatična.

9. PT Sans Usko + PT Sans

Trendi kombinacija Google fontova - PT ne sužava sa PT Sans

Još jedan moderan stil starijeg svijeta, PT Sans i njezina braća, PT bez suženja, dajte odmah i nepogrešivu izjavu kada se upareni zajedno.

Upotreba u stvarnom svijetu

Ili font radi jednako dobro kao naslov ili tekst tijela; određeno spajanje koje odaberete ovisit će o prirodi vaših riječi – premda ja više volim PT Sans Narrow u kraćim brojevima.

Zamišljen kao “vrlo važan alat za modernu digitalnu komunikaciju”, čini se da je najprikladniji za – iako zasigurno nije ograničen – na upotrebu ovih fontova za tehnološka pokretanja, softverske aplikacije ili druge digitalne tvrtke.

10. Amatični SC + Josefin Sans

Trendovna kombinacija Google fontova - Amatic SC s Josefinom

Okej, ovo je definitivno više na strani. Očito ova kombinacija neće uspjeti svima, ali obostrana priroda Amatski SC i Josefin Sans stvorite nešto za što se sigurno ističe – sve dok budite oprezni!

Upotreba u stvarnom svijetu

Ako ste zabavni umjetnik, glazbenik ili zabavljač, ovaj bi font mogao biti ključan u snimanju vaše jedinstvene osobnosti. Ovisno o općenitim tonovima i temama, ova kombinacija bi mogla poslužiti i za nišni blog.

Savjet: Ne koristite Amatski SC kao glavni tekst teksta. Iznenadit ćete svoje čitatelje.

Bonus: 5 naših omiljenih premium fontova

Znamo da je ovaj članak o najboljim, trendovskim Googleovim fontovima, ali željeli smo spomenuti i nekoliko naših omiljenih premium fontova kao bonus. Premium fontovi, naravno, nisu besplatni – ali daju vašoj web lokaciji jedinstven i prilagođeni dizajn. Ti fontovi nisu popularni i trendovski su i suprotno od onih koji smo naveli gore. No, ovi su sjajni za one koji žele prilagođeni i personalizirani dizajn za svoj brend i dobro idu ako se koriste za Logos ili čak kreativne naslove:

Bonus 1: Mega zanatski paket X

Bonus 2: Valentinovo sveženje

Bonus 3: Sjajni paket fontova

Bonus 4: Mali grafički paket

Bonus 5: Ljubomoran

BRZI SAVJET: Premium fontovi pružaju dizajnerima priliku da postignu bezvremenski dizajn i toplo se preporučuju za logotipe i identitet marke.

Zašto biste trebali koristiti Google fontove?

Dobrodošli u ono što mnogi web dizajneri smatraju svojim najboljim prijateljem. Govoreći iz iskustva, mogu vam reći da rijetko više ugrađujem prilagođene datoteke fontova na web stranice. Google Fontovi sada su gotovo isključivo prvo i posljednje mjesto kojem se obraćam za tipografiju web stranice. Evo zašto:

  • to je potpuno besplatno. Nije važno koliko fontova ste odabrali ili na koliko web lokacija koristite ih. Nikada nećete platiti ni centa.
  • Od ožujka 2018. postoje preko 850 fontova u knjižnici. Vjerojatno ćete pronaći pravi stil koji odgovara vašoj robnoj marki.
  • to je brzo. Budući da se fontovi hostuju na Googleovim poslužiteljima, datoteke se inteligentno komprimiraju i dizajniraju za brzo učitavanje.
  • to je lako. Jednostavna kopirajte i zalijepite u HTML datoteku i gotovi ste.
  • to je organizirani. Svi fontovi su kategorizirani i mogu se pretraživati ​​unutar jedne baze podataka. Nema više pretraživanja neurednih podmapa na računalu kako biste pronašli savršen font.
  • Jesam li spomenuo da je to besplatno? Slobodno je!

Kako instalirati Google fontove

Ovdje nisu potrebne glavobolje. Samo idi na Google fontovi i pronađite potrebne fontove.

Dok odabirete fontove, oni se kumulativno dodaju u zbirku pri dnu stranice. Kada završite s pretraživanjem, kliknite tu donju karticu i pojavit će se prozor s uputama za ugradnju.

Dodavanje stilova

Odavde možete odabrati dodatni styling poput kurzivnog, podebljanog, podebljanog kursa i tako dalje. Samo kliknite na CUSTOMIZE i odaberite stilove za koje smatrate da će vam trebati.

Na primjer, evo kako bih odabrao oba redovan i odvažan tekst za font Khula.

Dodavanje stila fonta u Google fontove

Ugradnja standardnog ili uvoza?

Primijetit ćete da imate dvije mogućnosti za umetanje fontova na svoju web lokaciju: pomoću standarda koristi se na web lokaciji HTML datoteku ili @import URL biti uključeni u položaj vaše web lokacije CSS datoteka. Pa koji biste trebali koristiti?

Općenito je najbolja opcija kopiranje i lijepljenje liniju u svoju HTML datoteku. Fontovi se obično učitavaju brže na ovaj način, a ne čekaju da se CSS datoteka učita, a ova metoda također ima malo bolju podršku za (vrlo) stare preglednike.

Gdje staviti šifru

Kopirat ćete i zalijepiti liniju koda koju vam daje Google odjeljak vaše HTML datoteke. Dakle, koristeći Khula font koji sam odabrao gore, izgledat će ovako:

BRZI SAVJET: Također možete odrediti stilove fonta tako da ih napišete u url, odvojene zarezima. Na primjer: “https://fonts.googleapis.com/css?family=Khula:podebljano, kurzivom bolditalic

Upotreba fonta u tablici stila

Sada jednostavno pozovite font kao i obično unutar vašeg CSS kodirati. U demonstrativne svrhe, vaš glavni naslov i odlomak mogu izgledati ovako:

h1 {
obitelj fontova: “Khula”, sans-serif;
težina slova: 700;
veličina fonta: 48px;
}
p {
obitelj fontova: “Khula”, sans-serif;
težina slova: 400;
veličina fonta: 16px;
}

BRZI SAVJET: Obavezno uvrstite rezervni font poput “serif”, “sans-serif” ili sličan web sigurni font u rijetkom događaju koji vaš Google Font ne uspije učitati.

Savjet o uparivanju fontova

Odlučiti koje će se fontove grupirati ponekad može biti težak umjetnički balans. S jedne strane, vaš odabir slova bit će najučinkovitiji kada postoji dovoljno kontrasta u stilovima; svaki font na vašoj web stranici mora se isticati od ostalih i zaraditi opravdanje za njegovu upotrebu. S druge strane, ne želite da se fontovi stiliziraju previše jedan od drugog, što može stvoriti dojam da su odabrani nasumično.

BRZI SAVJET: Razmislite što emocija ili ideja potiče određeni font. Pokušajte ga upariti s drugim fontom koji evocira istu emociju ili ideju. Sve je u pronalaženju pravih fontova koji govore vašoj jedinstvenoj robnoj marki. Sami ćete to znati kada se neki font osjeća kao vaša marka ili daje signal koji se miješa.

Serif i Sans-Serif

Pokušana i istinita metoda je uparivanje serif fonta s sans-serif. Njihovi stilovi imaju tendenciju da se dobro kombiniraju, nudeći jednostavnu razliku između naslova i odlomaka.

Eksperimentacija je ključna

Kad biram fontove za novu web stranicu, volim preuzeti sve moguće opcije Google fontova na svoje računalo i igrati se s njima u dokumentu za obradu teksta. Premještanje različitih veličina i težina i usporedba kombinacija jedan pored drugog učinkovit je način za određivanje najboljeg mogućeg uparivanja. Uzimajući vremena za eksperimentiranje, možda ćete otkriti i to koristeći tanak Promjena određenog fonta omogućava bolji naslov naslova nego ako koristite potpuno zaseban font. (Najjednostavnije rješenje je često najbolje.)

Zaključak

Google Fontovi moćan su resurs za DIYers koji ne žele platiti skupe prilagođene fontove na svojoj web stranici. Ali s velikom snagom dolazi do velike odgovornosti: za tipografiju je potrebno pažljivo razmišljanje da bi bilo dobro, a nije svaki font tamo pobjednik. Nadamo se da će vam ovaj vodič pomoći da vas usmjerite u pravom smjeru, nadahnjujući vas da pronađete savršeno usavršavanje papira za snimanje osobnosti vašeg branda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me