Većina članaka o "najboljim besplatnim fontovima" baci 30 opcija na vas bez ikakvog konteksta o tome kako zapravo performiraju na web stranici. To nije korisno. Ne trebate samo font koji lijepo izgleda u alatu za dizajn. Trebate onaj koji se brzo učitava, oštro prikazuje na svim uređajima i podržava jezike koje vaša publika čita.
Evo šest fontova koji vrijede vašeg vremena. Svaki je besplatan, optimiziran za web i odabran za konkretnu namjenu. Ne fontovi-punjači. Prave preporuke od tima koji svakodnevno gradi web stranice.
Zašto odabir fonta vrijedi više nego što mislite
Prije nego dođemo do popisa, razgovarajmo o tome zašto je ova odluka važna specifično na webu.
Font na plakatu samo treba lijepo izgledati. Font na web stranici mora lijepo izgledati, brzo se učitavati, oštro se prikazivati na malim veličinama, raditi na svim operativnim sustavima i podržavati više skupova znakova. To je potpuno drugačiji skup zahtjeva.
Svaki prilagođeni font koji dodate na web stranicu je dodatna datoteka koju preglednik mora preuzeti. Jedna obitelj fontova s četiri težine može lako dodati 200KB učitavanju stranice. Na sporoj mobilnoj vezi, to je razlika između stranice koja se osjeća brzom i one koja pokazuje prazan tekst dvije sekunde.
Odabir fontova s fokusom na performanse nije opcionalan. To je dio dobrog web dizajna. Za detaljniji pogled na to kako tipografski odabiri utječu na posjetitelje, pročitajte naš vodič o odabiru pravog fonta.
Gelasio
Savršen za: Tekst tijela gdje želite osobnost bez žrtvovanja čitljivosti.
Gelasio je serifni font koji iznenađujuće dobro funkcionira na ekranima. Dizajniran je kao metrički kompatibilna alternativa Georgiji, što znači da ga možete koristiti kao web font s Georgijom kao fallbackom bez pomaka u layoutu.
Oblici slova su topli i čitljivi na veličinama odlomaka. Nije spektakularan, ali to je poanta. Za dugačke tekstove poput blog postova i opisa usluga, želite font koji nestaje u iskustvu čitanja.
Napomena o web performansama: Gelasio je dostupan putem Google Fonts CDN-a, što znači da će ga većina posjetitelja već imati u cacheu. Učitajte samo težine koje trebate. Regular i bold pokrivaju 90% slučajeva.
Space Grotesk
Savršen za: Brendove okrenute tehnologiji i SaaS web stranice.
Space Grotesk je proporcionalni sans-serif s geometrijskom strukturom i nekim neobičnim detaljima. Otvorene aperture i blago zaobljene krivulje daju mu tehnički osjećaj bez da je hladan.
Prekrasno funkcionira za naslove i UI elemente. Uparite ga s neutralnim fontom tijela poput DM Sansa ili Intera i imate tipografski sustav koji se osjeća moderno i namjerno.
Napomena o web performansama: Varijabilna verzija fonta je samo oko 50KB za cijeli raspon težina. To je odlično. Koristite varijabilnu verziju i pustite CSS da upravlja prilagodbama težina.
DM Sans
Savršen za: Čista sučelja, dashboardove i web stranice koje trebaju djelovati profesionalno bez da budu dosadne.
DM Sans je jedan od onih fontova koji jednostavno funkcionira posvuda. Geometrijski je precizan, nevjerojatno čitljiv na malim veličinama i dovoljno neutralan da se upari s gotovo ičim.
Ako gradite poslovnu web stranicu i ne želite previše razmišljati o tipografiji, DM Sans je siguran, pametan izbor. Jednako dobro obrađuje tekst tijela, navigaciju, gumbe i naslove. To je vrsta fonta na koji se nitko neće žaliti, a to je zapravo kompliment.
Napomena o web performansama: Varijabilna datoteka fonta je kompaktna. Učitajte ga s Google Fontsa ili hostajte sami za još bolje performanse. Dvije težine plus italic pokrivaju većinu projekata.
Playfair Display
Savršen za: Naslove na luksuznim, ugostiteljskim i lifestyle web stranicama.
Playfair Display je kontrastni serif s dramatičnim prijelazima debelih i tankih linija. Diše sofisticiranošću kad se koristi za velike naslove. Hoteli, restorani, modni brendovi, vinoteke. Svugdje gdje je atmosfera "luksuzan ali pristupačan."
Upozorenje: ne koristite ga za tekst tijela. Visoki kontrast koji ga čini zadivljujućim na 48px čini ga noćnom morom na 16px. Uparite ga s čistim sans-serifom za tijelo teksta. Kontrast između ta dva fonta stvara vizualnu hijerarhiju koja vodi pogled točno tamo gdje želite.
Napomena o web performansama: Playfair Display je teži od većine serifnih fontova. Ograničite se na jednu ili dvije težine i koristite font-display: swap da spriječite nevidljiv tekst tijekom učitavanja.
Aspekta
Savršen za: Sustave identiteta brenda i moderne korporativne web stranice.
Aspekta je suvremeni sans-serif koji uspijeva djelovati i prijateljski i autoritativno. Širine znakova su ujednačene, x-visina je velikodušna, a dolazi u širokom rasponu težina od tankog do crnog.
Ono što ga izdvaja je preciznost. Svaki oblik slova djeluje promišljeno. To je vrsta fonta koja čini da tekst logotipa djeluje dizajnirano, ne samo upisano. Ako gradite identitet brenda uz web stranicu, Aspekta vam daje dosljednost u oboje.
Napomena o web performansama: Budući da nije na Google Fontsu, morat ćete ga sami hostati. Konvertirajte u WOFF2 format, suzbijte na samo znakove koji su vam potrebni i preloadajte datoteku fonta u HTML zaglavlju za najbrže prikazivanje.
Instrument Serif
Savršen za: Uredničke sadržaje, magazine i portfolije.
Instrument Serif je elegantan bez da je precizan. Oblici slova imaju kaligrafsku kvalitetu koja dodaje toplinu uređivačkim layoutima. Funkcionira za naslove i istaknute citate na stranicama bogatim sadržajem.
Prirodno se upari s Instrument Sansom (ista obitelj, drugačiji stil) za koherentan tipografski sustav. Ili ga kombinirajte s geometrijskim sans-serifom za veći kontrast. Oba pristupa funkcioniraju.
Napomena o web performansama: Lagan i dostupan kao varijabilni font. Odlična opcija za stranice gdje performanse i estetika trebaju koegzistirati. A na webu, to je svaka stranica.
Kako odabrati između njih
Evo brzog okvira za odlučivanje.
Gradite blog ili stranicu sa sadržajem? Gelasio za tekst tijela, Space Grotesk ili DM Sans za naslove.
Gradite SaaS ili tech proizvod? DM Sans svugdje, ili Space Grotesk za naslove s DM Sansom za tijelo.
Gradite luksuzni ili lifestyle brend? Playfair Display za naslove, DM Sans ili Gelasio za tijelo.
Gradite korporativnu stranicu s jakim brendiranjem? Aspekta kroz cijelu stranicu. Ima dovoljno težina za svaki element.
Gradite uređivačku ili portfolio stranicu? Instrument Serif za display tekst, uparen s neutralnim sans-serifom.
Zapamtite da najbolja tipografija nije u pronalaženju savršenog fonta. Radi se o stvaranju sustava u kojem fontovi, veličine, težine i razmaci rade zajedno. Boje također igraju veliku ulogu u tom sustavu. Pročitajte o kako boje utječu na korisničko iskustvo za potpunu sliku.
Kontrolna lista performansi
Prije nego pošaljete bilo koji prilagođeni font u produkciju, prođite ovo.
- Koristite WOFF2 format. Najkomprimiraniji je i ima široku podršku preglednika.
- Suzbijte fontove. Ako je vaša stranica na hrvatskom, ne trebate ćirilicu ili vijetnamski skup znakova.
- Koristite
font-display: swapda spriječite nevidljiv tekst dok se fontovi učitavaju. - Ograničite težine. Svaka dodatna težina je još jedno preuzimanje datoteke. Budite neumoljivi.
- Razmislite o varijabilnim fontovima. Jedna datoteka, svaka težina. Obično manja od učitavanja tri odvojene datoteke težina.
- Preloadajte primarni font. Dodajte preload poveznicu u HTML zaglavlje da preglednik dohvati font rano.
Dobra tipografija je nevidljiva. Loša tipografija je sve što itko vidi. Odaberite font koji služi vašem sadržaju, optimizirajte ga za web i prijeđite na sljedeću stvar.
Trebate pomoć pri odabiru i implementaciji tipografije za svoju web stranicu? Pogledajte naše usluge web dizajna ili pročitajte više o odabiru pravog fonta za vaš projekt.
