Istraživanje Gitte Lindgaard i suradnika iz 2006. pokazalo je da ljudi o vizualnoj privlačnosti web stranice stvore dojam za otprilike 50 milisekundi. Tipografija nosi velik dio tog dojma, a onda i svega što slijedi, jer tekst je ono što posjetitelj zapravo čita.
Pogrešan font ozbiljnu tvrtku čini amaterskom. Dobar font malu tvrtku čini sigurnom u sebe. Odabir fonta zato nije kozmetika. Utječe na čitljivost, na to kako ljudi doživljavaju vaš brend, pa i na brzinu učitavanja i na to koliko je stranica pristupačna.
Razumijevanje glavnih kategorija fontova
Prije nego što počnete pregledavati Google Fonts, trebate znati što gledate. Svaki font pripada jednoj od nekoliko kategorija, a svaka govori nešto drugo.
Serifni fontovi
To su fontovi s malim potezima (serifima) na krajevima slova, poput Georgije, Merriweathera ili Playfair Displaya. Djeluju tradicionalno, ustaljeno i pouzdano. Dobro rade za duge tekstove i brendove koji žele odavati autoritet.
Na webu su serifi nekad bili teže čitljivi na zaslonima niske razlučivosti. Na današnjim oštrim zaslonima to je uglavnom prošlo, ali ih ipak testirajte na manjim veličinama.
Sans-serif fontovi
Bez poteza na krajevima. Čisti, moderni, jednostavni, poput Intera, Open Sansa ili Robota. Ovo je zadani izbor za većinu web stranica, i to s razlogom: sans-serif fontovi dobro se čitaju na zaslonima svih veličina i razlučivosti.
Ako ne znate odakle početi, dobro odabran sans-serif siguran je izbor za tijelo teksta.
Display i dekorativni fontovi
Fontovi s karakterom: podebljani, izražajni, ponekad neobični. Odlično rade za naslove, naslovne sekcije i kratke tekstove koji trebaju privući pažnju. Za tijelo teksta su loši, jer nitko ne želi čitati cijeli odlomak u ukrasnom fontu.
Koristite ih rijetko i s namjerom. Jedan display font za naslove i čist font za tijelo teksta provjeren je spoj.
Monospace fontovi
Svaki znak zauzima istu širinu. Tradicionalno se koriste za kod, a neki ih brendovi koriste za tehnički ili urednički dojam: Fira Code, JetBrains Mono, IBM Plex Mono. Stranici daju prepoznatljiv karakter, ali u dugim blokovima teksta usporavaju čitanje.
Što čini font da funkcionira na webu
Odabir fonta za web stranicu razlikuje se od odabira za tiskanu brošuru. Zasloni imaju svoja pravila.
Čitljivost na svakoj veličini
Tijelo teksta mora biti savršeno jasno na 16 piksela, izbornik na 14, a naslovi oštri na 48. Ne podnosi svaki font taj raspon jednako dobro, pa kandidate testirajte na više veličina prije odluke.
Pazite na x-visinu, odnosno visinu malih slova. Fontovi s većom x-visinom obično su čitljiviji na zaslonu. Zato fontovi poput Intera i Source Sansa tako dobro rade za web.
Performanse su važnije nego što mislite
Svaki font koji dodate je datoteka koju preglednik mora preuzeti prije nego što prikaže tekst onako kako ste zamislili. Izmjerili smo to na Source Sansu 3 s Google Fontsa: četiri reza (obični, podebljani i njihovi kurzivi) teže 233,2 KB, a dva reza upola manje.
To je važno i za posjetitelje i za Google. Dok font stiže, posjetitelj na sporoj vezi gleda prazan ili privremeni tekst, a font koji kasno stigne može pomaknuti retke i pokvariti CLS, jedno od mjerila koje Google prati. Koliko ta mjerila utječu na poziciju, objasnili smo u članku o Core Web Vitals. Evo kako fontove držati laganima:
Ograničite rezove. Trebate li zaista tanki, obični, srednji, polupodebljani, podebljani i najdeblji? Većina stranica savršeno radi s dva ili tri.
Razmislite o varijabilnom fontu. Jedna varijabilna datoteka sadrži cijeli raspon debljina. Kada trebate više od dva ili tri reza, često je lakša od zbroja zasebnih datoteka.
Koristite moderne formate. WOFF2 je današnji standard i znatno je manji od datoteka TTF ili OTF. Ako vaš pružatelj fontova još šalje starije formate, prebacite se.
Razmislite o sistemskim fontovima. Za tijelo teksta niz poput system-ui, -apple-system, sans-serif prikaže se odmah jer koristi fontove koji su već na uređaju. Nema preuzimanja. Dobivate manje kontrole nad izgledom brenda, ali najbolje moguće performanse.
Unaprijed učitajte ključne fontove. Ako koristite vlastite web fontove, oznakom <link rel="preload"> recite pregledniku da ih dohvati rano. Tako se tekst brže pojavi u pravom fontu.
Uskladite zamjenski font. Opisnik size-adjust u pravilu @font-face danas podržavaju svi glavni preglednici. Njime zamjenski sistemski font prilagodite mjerama web fonta, pa se tekst ne pomakne kada pravi font stigne.
Fontove poslužujte sa svoje domene
Google Fonts najčešće se ugrađuju poveznicom na Googleove poslužitelje, pa preglednik svakog posjetitelja šalje Googleu svoju IP adresu. Zemaljski sud u Münchenu (LG München I, presuda od 20. siječnja 2022., poslovni broj 3 O 17493/20) zbog toga je posjetitelju dosudio 100 eura odštete, jer je stranica fontove učitavala bez njegove privole. Presuda je njemačka, ali se temelji na Općoj uredbi o zaštiti podataka koja vrijedi i u Hrvatskoj.
Popravak je jednostavan i usput ubrzava stranicu: preuzmite datoteke fontova i poslužujte ih sa svoje domene. Fontovi s Google Fontsa objavljeni su pod otvorenim licencama koje to dopuštaju, a preglednik ne mora otvarati vezu prema još jednom poslužitelju.
Uparivanje fontova bez nereda
Većini web stranica trebaju dva fonta: jedan za naslove i jedan za tijelo teksta. Možda treći za naglaske ili elemente sučelja ako gradite nešto složeno. Više od tri gotovo je uvijek previše.
Klasična strategija uparivanja je kontrast. Serifni naslov uz sans-serif tijelo. Podebljani display font uz neutralan font tijela. Naslov privlači pažnju, a font tijela se miče s puta i pušta ljude da čitaju.
Nekoliko načela koja rade:
Kontrast, ne sukob. Dva fonta trebaju se razlikovati, ali ne kao da dolaze s različitih planeta. Neka dijele sličan ugođaj, čak i kada im se građa razlikuje.
Jedan font vodi razgovor. Font za naslove je izražajan, a font za tijelo je radni konj. Nemojte da se oba bore za pažnju.
Testirajte sa stvarnim sadržajem. Ne procjenjujte spoj na "Lorem ipsum". Stavite svoje stvarne naslove i odlomke. Neke kombinacije izgledaju sjajno u alatu za odabir fontova, a loše sa stvarnim riječima, osobito s hrvatskim slovima č, ć, đ, š i ž, pa provjerite ima li font sva slova koja trebate.
Ako želite konkretne prijedloge, naš članak o novim besplatnim fontovima koje vrijedi isprobati dobra je polazna točka.
Tipografija i identitet brenda
Fontovi su izravan izraz vašeg brenda. Odvjetnički ured u Comic Sansu bio bi apsurdan. Trgovina dječjih igračaka u strogom serifu djelovala bi hladno. Font mora odgovarati karakteru.
Razmislite kako zvuči vaš brend. Prijateljski i opušteno? Pogledajte zaobljene sans-serife. Profinjeno i ekskluzivno? Razmislite o čistom serifu. Tehnički i precizno? Geometrijski sans-serif ili monospace mogli bi pasti na mjesto.
Što god odabrali, budite dosljedni. Koristite iste fontove na web stranici, u promotivnim materijalima i poslovnim dokumentima. Tipografija je jedan od najvidljivijih dijelova vašeg identiteta brenda, a nedosljednost brzo ruši povjerenje.
Greške od kojih dizajneri strahuju
Previše fontova. Dva su idealna, tri su najviše, pet je kaos.
Zanemarena visina retka i razmaci. I sjajan font izgleda loše u pregustim recima. Tijelu teksta za ugodno čitanje obično treba visina retka između 1,5 i 1,7. Smjernice WCAG za najvišu razinu pristupačnosti traže najmanje 1,5 unutar odlomka.
Stil iznad funkcije. Ultratanki modni font izgleda prekrasno u prezentaciji, a na stvarnoj stranici u veličini tijela teksta ne može se čitati. To je česta zamka kada se vizualni identitet pokušava istaknuti: prepoznatljivost nikad ne smije ići na račun čitljivosti.
Zaboravljena pristupačnost. Tekst niskog kontrasta pravi je problem. Svijetlosivo na bijelom možda izgleda elegantno, ali slabovidne osobe to ne mogu pročitati. Smjernice WCAG 2.2 na razini AA traže kontrast od najmanje 4,5:1 za običan tekst i 3:1 za velik tekst. Za web trgovine to nije samo dobra praksa: Zakon o zahtjevima za pristupačnost proizvoda i usluga (Narodne novine 89/25) od 28. lipnja 2025. obuhvaća usluge e-trgovine, a izuzeti su samo mikro subjekti s manje od deset zaposlenih i prihodom do dva milijuna eura.
Preskočeno licenciranje. Nije svaki besplatni font besplatan za komercijalnu upotrebu. Provjerite licencu prije objave.
Donošenje konačne odluke
Nakon sve te analize, evo praktičnog puta: krenite od fonta za tijelo teksta. Odaberite nešto vrlo čitljivo, s rezovima koji vam trebaju, sa svim hrvatskim slovima i s dobrim performansama. Ostatak tipografije gradite oko tog temelja.
Testirajte uživo. Ne u alatu za dizajn, nego na stvarnoj stranici, na telefonu i na sporoj vezi. Tamo se vidi istina.
Dobra tipografija je nevidljiva. Čitatelj nikad ne bi trebao razmišljati o fontu, nego samo osjetiti da se tekst lako i ugodno čita. Kada se to dogodi, dobro ste odabrali. Tipografija je jedno od načela modernog web dizajna koje dobro stari bez obzira na trendove.
Gradite web stranicu na kojoj svaki detalj vrijedi? Pogledajte kako pristupamo web dizajnu od tipografije do objave.
