Ukoliko se bavite web dizajnom sigurno dolazite u veliku dilemu koji font koristiti. Po web 2.0 standardu tipografija je izuzetno važna stavka. Sigurno ste primetili brojne veće sajtove, internet magazine, blogove koji koriste razne vrste nestandardnih fontova. Ti nestandardni fontovi se nazivaju non-web safe fontovi.
Tipografija (eng. Typography) je izbor slova, njihovih oblika i grafičkih odlika. Doprinosi izgledu štampane poruke, pod tim smatramo: veličinu slova, oblik, specijalne znakove.
Web safe fontovi su fontovi koje operativni sistemi današnjice imaju preinstalirano, tako da je korišćenje istih sigurno za verodostojni prikaz istih.
Non-web safe fontovi su, kao što već verovatno nagađate, fontovi koji u većini slučajeva nisu instalirani na operativnom sistemu. Radi se o netipičnim fontovima, kreiranim od strane 3rd party lica. Pa je prikaz istih nemoguć. Od nedavno postoji više rešenja, kako platnih, tako i besplatnih, vezanih za upotrebu non-web safe fontova. Važna stvar prilikom odabira non-safe fontova jeste rešenje koje ćemo koristiti. A sve to treba sagledati sa više aspekta: licenca fontova, način implementiranja, isplativost i stabilnost.
Fontovi, kao i svaki drugi produkt imaju svoju licencu pod kojom su izdati. Neki su OpenSource ili GPL (ili GPL kompatibilni) pa je njihovo korišćenje moguće bez bilo kakve dozvole ili kupovine licenci. Ali, trebate obratiti pažnju da postoje fontovi koji imaju komercijalnu licencu. I da za njihovo korišćenje morate imati licencu koja se, naravno, plaća.
Što se tiče načina implementiranja, sve zavisi od rešenja. Neka rešenja zahtevaju integrisanje pomoću API-ja, druga se mogu lokalno definisati (preko CSS npr. @font-face). Ovde svakako trebamo razmisliti koliko je rešenje prihvatljivo sa pogleda SEO. Mnoga rešenja, odnosi se na servise, fontove ne prikazuju kao tekst, već kao grafičke elemente (slika ili fleš format). Što je svakako vrlo loše zbog SEO optimizacije.
Rešenja, koja postoje trenutno, su sledeća:
- Definisanje fonta preko CSS-a (CSS v.3) – @font-face
- Google Fonts
- Cufón
- sIFR
- TypeKit
CSS3 – @font-face
Ovo je najbolje rešenje, barem po meni. Ali trebate uzeti u obzir da još uvek postoje browseri, koji ne podržavaju CSS3. Što znači, da font neće prikazan onako kako je predviđeno. Način implementacije je vrlo jednostavan, u vašem css fajlu definišete font i putanju istog (font upload-ujete na server, kako bi css mogao da ga učita lokalno). Trebam samo napomenuti da ovo rešenje povećava HTTP zahteve. Još jedna pogodnost korišćenja, jeste što je sve lokalno, tako da je stabilnost rada zagarantovana.
Primer:
@font-face {
font-family: Calibri;
src: local("Calibri"), url("fonts/calibri.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-family: Calibri, sans-serif;
}
Fontovi, definisani ovom metodom se učitavaju (renderuju) kao tekst, tako da je ovo najbolje rešenje sa aspekta SEO. Inače, metodi implementacije se mogu razlikovati, vezano za format fontova (TrueType, OpenType i sl.). I, naravno, ne zaboravite, da pogledate licencu fonta koji želite da koristite.
Google Fonts (Google Fonts Directory)
Drugo najbolje rešenje. Implementacija je takođe laka i koristi se API servisa. Jedina mana je mali izbor fontova (barem za sada). No verujem da će se spisak fontova svakako povećati u skorije vreme. Da bi smo implementirali Google Fonts, moramo u <head> linkovati ka css, primer:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
A zatim u vašem css fajlu napraviti definiciju:
body {font-family: 'Lobster', arial, serif;}Za sada postoji svega 20 fontova, koje imaju po nekoliko različitih varijacija. Ovaj servis je besplatan.
Sajt: www.code.google.com/webfonts
Cufón
Radi se o rešenju, koje funkcioniše tako što se font upload-uje na njihov server, zatim se pretvara u odgovarajući format i pomoću JavaScripta učitava i prikazuje na strani. Ukoliko je JavaScript isključen u browseru prikaz je nemoguć. To je jedna od mana ovog servisa. Servis je besplatan.
Sajt: www.cufon.shoqolate.com/generate/
sIFR
Rešenje, koje je vrlo slično Cufón-u. Za implementiranje koristi se JavaScript, a tekst se prikazuje kao Flash. Velika mana sa aspekta SEO. Servis je besplatan.
Sajt: www.sifrgenerator.com
TypeKit
Iako je na zadnjem mestu, radi se o izuzetno dobrom servisu koji se u poslednje vreme dosta koristi. Pogodnost korišćenja ovog servisa je ogromna baza fontova koji su podeljeni po kategorijama. Servis je besplatan samo za jedan sajt (po nalogu) i moguće je koristiti samo dva fonta na istom. Postoji ograničenje (25.000 PV/mesečno). Najjeftiniji nalog iznosi 24.99$ (godišnje). I u to spada mogućnost korišćenja fontova na dva sajta, pet fontova po sajtu, u okviru 50.000 PV/mesečno.
Sajt: www.typekit.com
Takođe preporučujem da pogledate ovaj članak, vezan za fontove koji su besplatni, a koji se mogu koristiti preko @font-face:
http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/
Sva pitanja, predloge ili rešenja, možete ostaviti u komentarima.
{ 12 comments… read them below or add one }
Nije ti loš ovaj tekst, ali kao i svakome drugom moram da ti skrenem pažnju na pravopis srpskog jezika.
Veb nije web, to je engleska reč. Ukoliko koristiš engleske reči, nemoj da ih provlačiš kroz padeže i lica.
Vi „informatičari“ ste upropastili srpsi jezik i prihvatili hrvatski pravopis.
Što se tiče ostalog tvog rada, samo napred…
Ja da se pitam ne bi mi koristili nase reci uopste za IT termine
Na vasu srecu, ne pitam se 
Aleksandre ja sam isto bio vrlo zagrižen da treba poštovati pravopis, a onda sam naišao na jedan zanimljiv komentar, naime: „u vreme Vuka Stefanovića Karadžića sva tadašnja vlastela je insistirala na tome da se zadrži tadašnji pravopis, odnosno književni jezik, međutim Vuk je insistirao na tome da jezik živi u narodu i da je najpravilnije onako kako narod govori.“ E sada ja znam da je čovek parafrazirao Vuka, i malo mu dodao svoje mišljenje u sve to ali kada pogledaš ima tu logike. Meni, kao i velikoj većini koji su na neki način u IT vodama se sviđa hrvatsko rešenje, i kao što vidiš pišem latinicom (iz praktičnih razloga) i mnogo mi je prirodnije da strane reči pišem u izvornom obliku umesto da ih pišem kao što govorim. Ja sam za to da sve državne institucije i javni servisi tipa novine, da svi oni poštuju pravopis i da koriste ćirilicu jer je to državno pismo, a da se narodu dozvoli umetnička sloboda, tj. da piše kao što mu odgovara.
A momku koji ima 18 godina, ili je imao 18 godina 2008. kada je počeo da piše ovaj blog (u tom slučaju zamerka
), želim puno uspeha u daljem radu i još puno ovakvih odličnih tekstova.
Zdravo Stefane,
Moram da se slozim sa Aleksandrom u vezi sa pravopisom a dodao bih i sa gramatikom.
Pretpostavljam da si obrazovan mladic i da ovakve greske pravis ne iz neznanja nego u zelji da napises sto vise o web dizajniranju.
Pozdravljam sve tvoje napore i zelim mnogo uspeha tebi i tvom blog-u.
M. Jocic
@combuster
U potpunosti se slažem sa tobom. Nažalost mi se tu ništa ne pitamo.
@krle
Hvala na pohvali. Inače sada imam 18 godina. Blog sam počeo da pišem aktivno pre više od godinu dana.
@M.Jocic
Zapravo ne postoji tu neka greška. Moj stav je da srpski izrazi (veb, brouzer, i sl.) jednostavno nemaju šta da traže među stručnim terminima. „Veb“ na srpskom ne znači ništa, dok „web“ svakako ima značenje (više značenja). Provlačenje kroz padeže je stilski podrazumljivo. Sve tehničke termine na srpskom nameću domaći „stručnjaci“ koji nažalost i pišu školske udžbenike vezane za IT, a čije je znanje potpuno minimalno.
O svemu ovome ne trebamo diskutovati, jer su mišljenja oko ovoga ionako podeljena. Uostalom ne pišem blog o lingvistici, već vodim tehnički blog te su ovi termini neizbežni (zarad boljeg razumevanja).
Još jednom hvala svima na komentarima!
Odličan članak Stefane, samo tako nastavi!
Грешиш Стефане, веб на српском има значење док web на српском не значи ништа. Зашто? Једноставно – слово w не постоји у српском језику.
Иначе, ако нисте знали, наш правопис дозвољава да се, у латиничном тексту, страни изрази пишу у оригиналу при чему се наставци за падеже пишу одвојени цртицом.
Е сад, пар коментара што се текста тиче. Google Fonts је, колико сам разумео, у суштини @font-face решење, с тим што су фонтови хостовани на Гугловом серверу.
И мислим да нема велике препреке за SEO ни за Cufón, ни за sIFR с обзиром да у оба случаја текст на страници постоји, само се на страни клијента замењује Флешом, ради приказа фонта.
Web je reč (termin) koja se upotrebljava u takvom obliku na mnogim blogovima koji nisu na engleskom. To je jednostavno usvojen termin.
Znači nisam pogrešio?
Da, na istom principu rade. Mada je po meni uvek sigurnije kada su mi svi neophodni fajlovi na mom serveru.
Za Cufón si upravu (my bad), ali sIFR zapravo sve pretvara u flash i u source nema teksta.
Hvala na komentaru.
Ispravi da ti se sifrgenerator.com prikazje sa http:// .
Hvala na prijavi, ne znam kako mi je ovo promaklo.
Baš radim temu za moj blog (od nule) i hteo sam da prikažem naslov i još neke stvari u različitom fontu. Naleteo sam na Cufon, i podesio ga za svega 15 minuta. Sasvim pristojno obavlja posao, a meni je najbitnije da znam da će raditi pod svim uslovima u svim browserima. Inačeo, uopšte ne škodi opzimizaciji za pretraživače.
Odlična stvar.