Najbolji načini upotrebe fontova na web sajtu

Razvoj tehnologija je doveo do toga se pojavi više opcija za upotrebu fontova u web dizajnu i to je dodatno zakomplikovalo ceo proces. Tako da se mnogi odlučuju da idu putem najmanjeg otpora sa ciljem što jednostavnije imprementacije željene tipografije.

Ako znate šta tražite, sve opcije su jednostavne. U ovom postu ćete se upoznati sa različitim tehnikama pozivanja fontova i sa tim znanjem ćete u svakom trenutku moći da odaberete i koristite onu metodu koja odgovara potrebama konkretnog projekta.

Ilustrovaćemo ove opcije sa fokusom na najbolje načine da isporučimo jedan od najpoznatijih klasičnih fontova – Garamond.

Slaganje fontova

Prva opcija koju ćemo razmotriti ne koristi web fontove uopšte. Slaganje fontova je CSS tehnika u kojoj definišemo više poziva fontova počevši sa prvim izborom i završavajući sa opštim rešenjem koje će raditi u svim situacijama.

Postoji više resursa koji mogu da vam pomognu u ovoj situaciji, a mi preporučujemo cssfontstack.com.

Prema ovome sajtu podrška za Garamond font je 49.91 % za Mac i 86.47% za Windows mašine, što je poprilično dobro, ali ne i dovoljno. Evo preporučenog rešenja sa gore navedenog sajta:

[code]font-family: Garamond, Baskerville, „Baskerville Old Face“, „Hoefler Text“, „Times New Roman“, serif;[/code]

Ovo pravilo bi se moglo unaprediti:

[code]font-family: Garamond, „Adobe Garamond Pro“, „Hoefler Text“, Georgia, serif;[/code]

Slaganje fontova je besplatno i do sada najbrže rešenje,  u zavisnosti od izabranog fonta može biti veoma efektivno.

Postoji međutim i problem sa ovom tehnikom, jer postoji veliki broj piratskih verzija fontova, tako da ne možemo biti sigurni da je font na računaru baš tako imenovan i da ćemo dobiti odgovarajući prikaz.

Slaganje fontova je odličan metod i treba ga uzeti u obzir za upotrebu i kombinaciji sa svim rešenjima ispod, ali nije idealan da bi ga koristili kao primarno rešenje.

Google fontovi

Google fontovi su za mnoge dizajnere tačka u kojoj završavaju svoju potragu. Ovom metodom možete potpuno besplatno uvesti web fontove u vaš sajt upotrebom CSS-a.

Jedina loša strana ove metode je ograničen izbor fontova. Trenutno postoji jedna varijacija Garamond fonta na Google fonts pod nazivom EB Garamond, ali ova verzija nije potpuna, jer ne postoji bold i italic stilovi.

Google fontovi su odlično rešenje jer omogućavaju veliku uštedu u budžetu i veoma se jednostavno pozivaju uz pomoć CSS-a. Jedina mana je ograničen izbor dostupnih fontova.

Samostalno hostovanje: online fontovi

Samostalno hostovanje je dosta podcenjen pristup upotrebe fontova. Ova tehnika podrazumeva preuzimanje željenih verzija fontova i postavljanje na web server sajta. Jednom kada odaberete sve neophodne fontove i stilove (regular, italic, bold, bold italic, itd.) i otpremite ih na vaš web prostor, potrebno je upotrebiti neka @font-face pravila u svom CSS-u.

Ako bi hteli da sami menjate fontove i izbacite nepotrebne simbole i stilove potreban vam je softver za editovanje. Za ovo možete koristiti ili besplatne softvere poput FontForge ili premijum verzije poput FontLab Studio.

Samostalno hostovani desktop fontovi

Većina font fajlova koje instalirate će biti TrueType (.ttf) ili OpenType (.otf). Potrebno je sačuvati ih na server i pozvati u CSS-u.

Podrška za .ttf i .otf je odlična na svim modernim browser-ima osim na IE i nekim mobilnim verzijama. Da bi povećali podršku potrebni su vam i neki dodatni formati poput .eof koji će raditi na IE, .woff koji će raditi na većini browser-a i on je format preporučen od strane W3C. Još treba uzeti u obzir i .svg  format koji će raditi na zastarelim verzijama browser-a.

Postoje razni web servisi uz pomoć kojih možete generisati ove formate od vašeg .ttf fajla, a jedan od najpopularnijih je Font Squirrel.

Loša strana konvertovanja desktop fontova za upotrebu online je slaba licenciranost, a drugi nedostatak je taj da su desktop fontovi gotovo uvek optimizovani za štampu, a ne za prikazivanje na ekranima.

Samostalno hostovani web fontovi

Resursi koji nude web fontove su dosta zastupljeni i nude fontove koji su ne samo licencirani već i dobro optimizovani za prikazivanje na ekranima.

Fontovi su dostupni u svim potrebnim formatima, zadovoljavaju standarde kvaliteta i lako se mogu postaviti na web server. Postoji veliki broj sajtova gde možete pronaći web fontove, a najpopularniji je MyFonts.com.

Situacija sa Garamond fontom ovde je malo drugačija i on je dostupan po ceni od 180 dolara.

Ova metoda nudi dosta opcija za prilagođavanje, niste zavisni od drugih web servera, nivo kvaliteta je odličan, ali ipak za vrhunski kvalitet potrebno je izdvojiti određenu sumu novca.

Web font servisi

Baš kao i Google fontovi, web font servisi isporučuju fontove u vaše browser-e putem jednostavnog CSS-a. Za razliku od Google fontova, ovde postoji mnogo veća mogućnost za odabir.

Najbolji ponuđač u ovoj oblasti je Adobe Typekit. Kvalitet njihovih fontova je na visokom nivou, implementacija je jednostavna i što je navažnije poseduju ogromni katalog za odabir.

Ovaj provajder nudi različite opcije pretplata počevši od 24 dolara pa naviše, a ako ste član Creative Cloud dobijate i neke font resurse besplatno.

U ovoj opciji imate veliku kolekciju fontova za odabir, ali ste ipak zavisni od servera sa treće strane.

Koji je pravi izbor?

Kao i kod većine situacija, odgovor je: zavisi od konkretnog projekta. U slučaju Garamond fonta koji smo koristili kao primer upotreba web fontova bi bila dobro rešenje, ali ukoliko bi imali neki budžet, samostalno hostovanje profesionalnog web fonta je najbolji izbor.