Tipografija i web 2.0 – web safe fontovi i alternativna rešenja

Stefan J. — Mon, 30 Aug 2010 19:07:56 +0000

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 linkovati ka css, primer:

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.

Obucite lisicu! Firefox Personas

Stefan J. — Sun, 12 Apr 2009 15:25:12 +0000

Nova igračka za Vaš omiljeni browser je izašla. Radi se o pluginu koji razvija Mozilla Labs, i služi tome da se preko web interfejsa izabere slika koja će biti stavljena kao default skin Firefox Mozille. U ponudi već postoji preko 50 hi-res slika koje besplatno možete odabrati i postaviti kao vaš default skin. Sve što trebate da uradite jeste da instalirate ovaj mali plugin, a zatim iz Personas galerije izaberete željenu sliku i kliknete na nju. Vaš browser će istog trena dobiti novi izgled. Imate mogućnost da sami napravite svoj skin, i da odaberete kome će on biti dostupan (samo vama ili široj javnosti). Više o projektu možete pročitati ovde .

Firefox Personas plugin možete instalirati ovde , a skinove za ovaj firefox plugin možete pronaći ovde.