Ključne stvari koje treba da znate o tipografiji za web

Ogromna količina informacija na webu je u tekstualnoj formi. Da li je to 60, 70, 80 ili 90 procenata, zaista nije bitno. Ono što je važno je da Internet bez teksta ne postoji, jer je tekst glavno sredstvo komunikacije.

Uzevši tu činjenicu u obzir, nameće se nepisano pravilo da mi dizajneri treba da znamo kako da oblikujemo tekstualnu formu i zato se u ovom članku bavim ključnim stvarima kada je u pitanju tipografija za web.

Večita zabuna – font ili typeface?

Da razjasnimo odmah na početku: font je deo skupa koji se zove typeface.

Helvetica je typeface. Arial je typeface. Roboto je typeface. Međutim, Helvetica Bold, Arial Italic, Roboto Extra Bold su fontovi (stilovi) u okviru typeface-a Helvetica, Arial i Roboto, koje drugačije zovemo font familija.

Ljudi koji se bave dizajniranjem typeface-a, možda će vas pogledati popreko ako kažete nešto tipa hej, možeš li da mi preporučiš neki cool font? Međutim, većini ljudi to stvarno nije naročito bitno – razumeće vas kada kažete i jedno i drugo i, iskreno, ja najčešće kažem font, pogotovo kada razgovaram sa prijateljima koji nisu u svetu dizajna ili klijentima koji se prvi put susreću sa sličnim terminima.

Nemojte time biti opterećeni. Bilo da kažete font ili typeface, ono što nas najviše interesuje je zapravo tipografija!

Tipografija – šta je to i zašto je bitno?

Šta je to čime možeš da dizajniraš, da ne upotrebiš ni jednu fotografiju, ilustraciju, ni jednu ikonicu ili boju, a da postigneš wow efekat? Odgovor je – tipografija.

Tipografija je doslovno umetnost, ali i nauka vizuelnog predstavljanja tekstualnog sadržaja tako da on bude čitaocu čitak i dopadljiv. Pozicioniranje, kompozicija, kontrast, balans, ritam, izbor fontova su samo neki od metoda kojima se služimo u tipografskom procesu.

Bilo na webu, u štampanim novinama, knjizi ili na spejs-šatlu, tipografija je primarno sredstvo koje mi dizajneri koristimo da prenesemo poruku. Kada se primeni kreativno i smisleno, tipografija može biti izuzetno moćno sredstvo komunikacije. Dobra tipografija doprinosi čitljivosti i definiše jasnu hijerarhiju informacija kroz osmišljenu kompoziciju i strukturu, tako da čitaocu bude očigledno šta je više, a šta manje bitno.

Kada pričamo o topografiji za web, najčešće mislimo na to kako je tekst na nekom sajtu prikazan. Sajt bez teksta je praktično nezamisliv i tekst je sastavni deo svakog sajta kog negde ga ima u većoj, a negde u manjoj meri.

Sadržaj i dizajn su ono što čini karakter jednog web sajta. Kao dizajner, u najvećem broju slučajeva nećete moći da utičete na kvalitet sadržaja, ali možete uticati na to kako će sadržaj biti prikazan, odnosno možete uticati na dizajn.

Da biste to postigli, treba da postavite par ključnih pitanja:

• Sa kakvom formom sadržaja baratate? Kraćom ili dužom?
• Šta sadržaj treba da iskomunicira?
• Za koga je pisan sadržaj?
• Kakav je personaliti brenda za koji dizajnirate? Opušten, korporativan, formalan?
• Šta je cilj web sajta?

Dodatno, postoje i tehnička pitanja na koja treba da imate odgovore. Primeri takvih pitanja su:

• Da li sajt treba da bude višejezičan i ako da, koje jezike (i karaktere) treba da podrži?
• Postoje li tehnička ograničenja za koja treba da znate? Na primer, sajt mora da bude strahovito brz i da ima što manju potrošnju saobraćaja.

Sledeća stvar? Sadržaj

U idealnom slučaju treba da dizajnirate sa konkretnim sadržajem. Međutim, pošto je idealan slučaj, baš to – idealan, šanse za to su male. Šta onda da radite?

Prvo, šta da NIKAKO ne radite: nemojte nikada, ikada, koristiti Lorem Ipsum. I kada kažem nikada, mislim baš nikada. Ono što možete da uradite je da kopirate sadržaj sa drugog web sajta.

Konkretno, ako dizajnirate sportski web sajt, nemojte kopirati sadržaj iz rubrike politika, već iz rubrike sport. Zašto? Iako to nije konkretan sadržaj koji će ići online, podsvesno ćete sebe usmeriti na kreiranje optimalnog vizuelnog rešenja, a klijent će imati realniju sliku kada mu budete predstavljali dizajn.

Naravno, vodite računa da to ne ode tako online, čijom god krivicom, pa da odgovarate zbog kršenja autorskih prava.

Nakon što ste obezbedili sadržaj, ovo je par stvari o kojima treba da vodite računa.

Izbor font familije

Ključna stvar kod tipografije je izbor font familije. Postoji mnogo sajtova na kojima besplatno ili jeftino možete da nađete dobre font familije, a neki od primera su Google Web Fonts, Adobe Fonts, Fonts, MyFonts.

Naravno, postoji mnoštvo biblioteka na Internetu gde možete da kupite fantastične familije, ali sve ima svoju cenu. Posebnu pažnju obratite na licenciranje, jer neke familije možete da primenite samo na webu, ali ne i u printu, i obratno.

Počnite s jednostavnom, čitljivom familijom. Pre svega, primenite ga na paragrafe, a potom formatirajte naslove i podnaslove koristeći različite veličine i debljine fonta. Ako je potrebno, iskoristite drugu familiju za naslove kako bi došli do izražaja, ali izbegavajte korišćenje više od dve različite familije, zato što je svaka familija ekstra informacija koji mora da se download-uje i učita i to može da uspori web sajt.

Osim toga, pravom majstoru je najčešće dovoljno maksimalno dve familije da se kreativno izrazi i napravi magiju.

Line height

Line height je vertikalna razdaljina između linija teksta. Cilj je pronaći optimalnu vrednost razdaljine između linija teksta tako da čitanje bude ugodno, a vizuelni prikaz teksta atraktivan. Ako je razdaljina između linija teksta suviše mala, sadržaj će biti težak za čitanje, jer će se čitaoc previše napinjati da napravi distinkciju između reči.

Ako je razdaljina između linija teksta prevelika, sadržaj će izgubiti kompaktnost i oko će suviše da skače kako bi skeniralo informacije.

U najvećem broju slučajeva ako uzmete veličinu teksta i pomnožite je sa vrednošću između 1.2 i 1.5 dobićete optimalnu vrednost za Line height.

Budući da je svaki typeface specifičan, potrebno je da eksperimentišete sa različitim vrednostima kako biste pronašli optimalnu vrednost, koja je, da se razumemo, najčešće subjektivna, ali u granicama optimalnog.

Line lenght

Line lenght predstavlja dužinu linije teksta i kao u slučaju Line heighta, treba naći optimalnu meru. Najčešće je ta mera od 50 do 70 karatera (slovnih znakova, uključujući i razmake) po liniji teksta.

Iskustvo je pokazalo da je okvirno ta dužina linije prijatna za čitaoca, jer nije prekratka da bi suviše brzo prekidala horizontalno pomeranje oka, a nije ni predugačka da izazove nemir.

Veličina fonta

Da, veličina je u ovom slučaju stvarno bitna. Veličina fonta će diktirati hijerarhiju i prioritet informacija i zato je ovo izuzetno moćna taktika.

Da biste pronašli optimalnu vrednost potrebno je da eksperimentišete kako biste uskladili i optimizovali hijerarhiju i prioritete, imajući u vidu osobu koja čita tekst.

Alignment

Alignment, odnosno srpski rečeno poravnanje teksta pomaže u strukturi stranice. Veoma često ćete videti stranice koje kombinuje više različitih aligment-a. Ono što se najčešće sreće na webu je da su naslovi poravnani u levo, opisni tekstovi koji se nalaze u gridu su centrirani, a paragrafi su poravnani na levo ili justified (obostrano).

Duži tekstovi, po pravilu, ne bi trebalo da budu poravnati po središnjoj osi, jer mogu biti veoma naporni za čitanje.

Pored ovoga napisanog, postoji još masa stvari u vezi sa tipografijom, kao što su razlike između serifnih, sans-serifnih, monotajp i displej fontova, kada se koji upotreblja i dr, ali sam dao sve od sebe da vam prenesem ono osnovno i suštinski bitno.

Budite strpljivi i eksperimentišite mnogo, jer uprkos tome što postoji niz stvari koje su egzaktne, tipografija ipak jeste jedna velika umetnost i stvar osećaja.