Google Fonts: kako odabrati font za web stranicu

Jeste li primijetili koliko font utječe na izgled web stranice? Isti tekst može djelovati ozbiljno, moderno, elegantno ili razigrano, ovisno o fontu koji koristimo. Zato izbor fonta nije samo pitanje dizajna. Font mora biti čitljiv, odgovarati sadržaju stranice i dobro izgledati na različitim uređajima.

Google Fonts nudi veliku zbirku fontova koje možete koristiti u web projektima i drugim digitalnim sadržajima. Fontove možete pregledavati, uspoređivati i isprobati s vlastitim tekstom prije nego što odlučite koji ćete koristiti.

Što su Google Fonts?

Google Fonts je servis s fontovima namijenjenima za korištenje na web stranicama i u drugim projektima. Biblioteka sadrži velik broj obitelji fontova, a dostupni su različiti stilovi i debljine.

Prije pojave web fontova izbor je bio puno uži. Webmasteri su se uglavnom oslanjali na takozvane “web safe” fontove, odnosno fontove koji su bili dostupni na većini računala i operativnih sustava. Time se osiguravalo da se tekst pravilno prikaže bez obzira na uređaj korisnika.

Danas web preglednici mogu učitavati fontove zajedno s web stranicom, pa dizajneri imaju puno više mogućnosti. Google Fonts jedan je od servisa koji je takav način korištenja fontova učinio jednostavnim i dostupnim.

Kako odabrati font za web stranicu?

Velik izbor je koristan, ali može otežati odluku. Kada otvorite Google Fonts, lako je potrošiti dosta vremena na pregledavanje različitih stilova.

Za početak razmislite o tome kakav dojam želite postići i gdje će se font koristiti. Font za naslov može biti izraženiji, dok tekst koji korisnik čita u dužim odlomcima treba biti jednostavan i ugodan za čitanje.

Kod odabira obratite pažnju na:

• čitljivost, posebno kod manjih veličina teksta
• stil fonta i njegov odnos s dizajnom web stranice
• dostupne debljine za naslove i tekst
• podršku za hrvatske znakove poput č, ć, đ, š i ž
• broj fontova i stilova koji će se učitavati na stranici

Google Fonts omogućuje da vlastiti tekst unesete u preglednik fontova. Tako možete odmah vidjeti kako izgledaju naslov, običan tekst ili hrvatski dijakritički znakovi.

Obratite pažnju na hrvatske znakove

Kod odabira fonta za hrvatsku web stranicu nije dovoljno provjeriti samo kako izgledaju velika slova i naslov. Font mora sadržavati i znakove koji se koriste u hrvatskom jeziku. Kod Google Fontsa možete provjeriti koje znakove određeni font podržava. Za hrvatski tekst potrebni su znakovi č, ć, đ, š i ž, pa je dobro provjeriti njihovu dostupnost prije ugradnje fonta.

To je sitnica koju je lako previdjeti. Ako font ne sadrži potreban znak, preglednik može prikazati drugi font samo za taj znak. Rezultat može biti vidljiva razlika u obliku slova unutar iste riječi.

Različite debljine fonta imaju svoju svrhu

Većina Google fontova dostupna je u više debljina. Primjerice, regularna debljina može se koristiti za osnovni tekst, dok se deblji stilovi mogu koristiti za naslove i druga istaknuta mjesta.

Često se za običan tekst koristi debljina 400. Za naslove se može koristiti 600, 700 ili 800, ovisno o samom fontu i dizajnu stranice.

Nema potrebe učitavati svaku dostupnu debljinu. Ako web stranica koristi samo 400 i 700, nema razloga učitavati i ostale varijante.

Koliko fontova koristiti na web stranici?

U većini slučajeva jedna ili dvije obitelji fontova sasvim su dovoljne. Jedan font može se koristiti za osnovni tekst, a drugi za naslove. Druga mogućnost je korištenje samo jednog fonta uz različite debljine i veličine.

Previše različitih fontova može narušiti vizualnu dosljednost stranice. Osim toga, svaki dodatni font i stil može značiti dodatno učitavanje resursa.

Kod web dizajna zato vrijedi jednostavno pravilo: prvo definirajte tipografiju koja vam stvarno treba, a zatim učitajte samo potrebne fontove i stilove.

Koji su Google fontovi popularni?

Među poznatijim fontovima koji se često koriste na web stranicama nalaze se Open Sans, PT Sans, Oswald, Raleway i Roboto.

Popularan font nije automatski dobar izbor za svaku web stranicu. Font treba gledati u kontekstu cijelog dizajna. Ono što dobro izgleda na jednoj stranici može izgledati potpuno drugačije na drugoj.

Zato je korisnije isprobati nekoliko fontova s vlastitim sadržajem nego birati samo prema tome koliko su često korišteni.

Kako isprobati Google fontove?

Na Google Fonts stranici možete pretraživati fontove prema nazivu i različitim karakteristikama. Nakon odabira fonta možete upisati vlastiti tekst i promijeniti njegovu veličinu.

To je posebno korisno kod odabira fonta za naslove. Neki fontovi izgledaju odlično u velikoj veličini, ali nisu ugodni za duže tekstove. Drugi su vrlo čitljivi u odlomcima, ali nemaju dovoljno izražen karakter za naslov.

Ako tražite određeni stil, možete koristiti dostupne kategorije i filtere. Tako je lakše suziti izbor bez pregledavanja cijele biblioteke.

Kako ugraditi Google Fonts na web stranicu?

Odabrani font može se dodati na web stranicu na nekoliko načina. Kod klasične HTML stranice moguće je uključiti font u HTML dokument, a zatim ga definirati u CSS-u.

Ako font želite posluživati s vlastitog servera, datoteke fontova dostupne su i putem Google Fonts repozitorija na GitHubu. Način ugradnje ovisi o tehnologiji na kojoj je web stranica napravljena. Kod WordPressa postupak često ovisi o temi, page builderu i drugim dodacima koji su instalirani.

Mnoge WordPress teme imaju ugrađen izbor Google fontova. U drugim slučajevima font se može dodati putem dodatka ili ručno, ovisno o načinu izrade stranice. Više o WordPressu možete pročitati na našoj stranici WordPress CMS.

Google Fonts i brzina web stranice

Kod korištenja web fontova treba voditi računa i o brzini učitavanja stranice. Svaki font i svaka njegova varijanta koju preglednik mora preuzeti predstavlja dodatni resurs. Zato nema potrebe učitavati pet različitih obitelji fontova i velik broj njihovih stilova ako ih dizajn stranice zapravo ne koristi.

Dobro postavljena tipografija može biti vrlo jednostavna. Jedna obitelj fonta u nekoliko potrebnih debljina često je dovoljna za cijelu stranicu. Kod složenijih dizajna mogu se koristiti dvije obitelji, primjerice jedna za naslove i druga za osnovni tekst.

Font je dio dizajna web stranice

Tipografija povezuje sadržaj i vizualni izgled web stranice. Veličina slova, razmak između redaka, širina teksta i debljina fonta utječu na to koliko je sadržaj pregledan.

Na mobitelu je to još izraženije. Font koji izgleda dobro na velikom ekranu može zahtijevati drugačiju veličinu ili razmak na manjem zaslonu. Zato se tipografija treba provjeriti na različitim uređajima prije objave web stranice.

Google Fonts pritom nudi praktičan način za pronalazak i testiranje fontova, ali sam izbor fonta je tek jedan dio tipografije. Konačan rezultat ovisi i o tome kako je font postavljen unutar cijelog dizajna.

Ako izrađujete novu web stranicu, izbor fontova najbolje je riješiti zajedno s ostalim elementima dizajna. Tako tipografija od početka odgovara sadržaju, strukturi i načinu na koji će korisnici čitati stranicu.