Teme koje smo do sada obradili i kojima smo naše 'studente' naučili dizajnu su:

1. Inspiracija
2. Hamurabijev zakonik web dizajna
3. Dizajn page layout-a
4. Boje u web dizajnu
5. Neka pravila tipografije
6. Posetioci - kako
zadobiti njihovo
poverenje
7. DHTML vs. Flash
8. Dizajn i pitanje
upotrebljivosti

Očekujte još mnogo novih tema od DNK i drugih profesionalaca!

Ako imate temu za koju mislite da bi pomogla svakom web dizajneru, ne oklevajte da nam pišete.

Želite da 'predajete' u DNK školi dizajna? Imate znanje, iskustvo i želite to da podelite sa drugima? Pišite nam!

DNK servisi - sve što će vam ikada trebati na designersnetworku da bi se uspešno reklamirali.

Resursi za dizajn će vam isto toliko značiti koliko i znanje da bi napravili dobar sajt!

Drugi dizajneri diskutuju o pravim temama web dizajna.

Peta lekcija - Neka pravila tipografije
kako i na koji način koristiti fontove

Siguran sam da se, kao i ja, ponekada zgadite sajtom koji koristi sada već otrcani Times New Roman font za tekst. Shvatam da se može lepo uklopiti u slikama, ali kao tekst - slažete se? Fuj! Da ne pričam o kompoziciji boja teksta i o takozvanom kerning-u, tj. razmaku između svakog slova u rečima. Zato ćemo ovde pričati baš o toj problematici, tj. o nekim tipografskim pravilima, vezanih za web dizajn koji te probleme rešavaju na lak način.

Započnimo priču ...
U samom startu se vraćamo na staru činjenicu o delimičnoj nekompatibilnosti između računara prikačenih na internet. Kada kažem 'nekompatibilnost' mislim najpre na operativne sisteme, browsere ali i sistemske fontove koje posetilac ima instalirane. Imajte na umu da nema svako, recimo Windows 2000 ili Windows XP i 800 fontova koje vi imate i da se neće uvek pogoditi da i on ima font koji ste vi postavili u html ili CSS klasu.

Znači, početak sadrži konstataciju - ne koristite nestandardne fontove. Treba svakako shvatiti da se uz instalacije Windows operativnih sistema dobija određena količina fontova. Tu se uglavnom podrazumevaju sledeći: Arial, Verdana, Tahoma, Times New Roman, Terbuchet i slični. Obzirom na to da smo rekli (jel'te...) da Times nikako ne treba koristiti u tekstu, opcije za standardne tekstove vam se smanjuju, ali ne preterano, niti drastično. Arial veličine 10 piksela je fantastično čitljiv i pregledan i mnogo stilskiji od njemu sličnog Arila veličine 11 ili 12 piksela. Toplo preporučujem i jedne i druge (doduše, ove druge manje). Verdanu, veličine 10 piksela, upravo čitate, dok su sve veće verzije ovog fonta do veličine 13 ili 14 prihvatljive, ali preko nikako ne izgleda lepo. Tahoma, je slično Arialu, u padu popularnosti na uštrp Verdane, i njene veličine 10 i 11, pa čak i 12 piksela su podjednako lepe i pristojne za čitanje na html stranicama. Trebuchet je tek u poslednje vreme počeo biti interesantan za web dizajnere, jer obuhvata klasiku koju je imao Times, ali i modernost koju ima Arial, Verdana ili Tahoma. Ovaj font je time prilično neutralan, ali fantastično dobar i zahvalan za tekstualnu fornu. Od 11 piksela pa naviše, Trebuchet ne gubi na kvalitetu i vidi se podjednako dobro i pristojno.

Zapamtite
Times New Roman, nikako kao font za običan tekst, Arial, Verdana, Tahoma ili Trebuchet, da.

Boja fonta na html stranicama
Pretpostavimo da imate solidno odabranu kolor šemu i da treba da odredite font za naslove, podnaslove, linkove, tekst i slično, kao i njihove veličine i boje. Prva prirodna činjenica do koje ćete doći jeste da stavite crni tekst ako vam je pozadina bela. Ovo pitanje je u poslednje vreme prilično diskutabilno, i moja lična preporuka jeste da boju fonta malo 'ublažite'. To ćete učiniti tako što ćete boju sa crne prebaciti na jako tamno sivu. Tipičan primer jeste, recimo promena sa #000000 na #444444, koja će dati fantastične rezultate. Crna boja na belom je apsolutni kontrast, pa je korisno taj kontrast malo smanjiti 'ublaživanjem' crne.

Što se tiče boja u naslovima, podnaslovima ili linkovima, tu je malo drugačija priča. Počećemo od linkova, tj. od najlakših. Najvažnije pravilo koje trebate da imate na umu pri definisanju klasa za linkove jeste to da linkovi treba da budu uočljivi na prvom ili drugom pogledu na celu stranicu. To se uglavnom čini ili bojom ili 'underline' osobinom fonta. Ako je boja u pitanju, 'underline' nije obavezan, ali boja treba biti koliko-toliko kontrastna u odnosu na elemente na stranici. Ukoliko tekst ima 'underline' tag tada se boja može uklopiti u dizajn.

Naslovi i podnaslovi treba da se takođe ističu, ali ne preterano. To se uglavnom čini diskretnim povećavanjem veličine fonta (za 3, 4 ili 5 piksela), stavljanjem slike koja sadrži naslov ili podnaslov, gde tada trebate obraćati pažnju na tzv. 'kerning' ili ostavljanjem praznine oko naslova. Ne bi trebalo praviti naslove ili podnaslove kontrastnim bojama u odnosu na kolor šemu sajta, osim ako ne nose neku poruku.

Zapamtite
Tamno sivi tekst na beloj pozadini mnogo bolje pristaje od crnog, linkovi treba da se ističu na prvi pogled a naslovi i podnaslov da se diskretno ističu.

Kerning
U slučaju da se odlučite za ubacivanje teksta u slikama, bilo za header, naslove, podnaslove, zaista nije važno, kerning trebate najviše da imate na umu. Kada kažem 'kerning' mislim na razmak pojedinih slova u rečima, odnosno parova slova u rečima. Parovi slova su bilo koji parovi u bilo kojoj reči, kao recimo: ga, mn, sa, or ili neki drugi parovi.

Vrlo ružno i neprofesionalno izgleda kada posetilac dođe na sajt i zatekne neki naslov u kome su na pojedinim mestima slova blizu, a negde poprilično razmaknuta. Odnosno, kao na prvoj slici. Vidi se na prvi pogleda da je razmak između svih slova trebao da bude mali, tj. da izgledaju zbijena. Ovde je prevelik razmak između slova e i t, kao i između o i r, dok je razmak između t i w premali. Željeni razmak između slova je razmak između r i k. Osnovna ideja u ovakvoj problematici jeste da posmatrate prazninu između svakog para slova. Ova praznina između svakog para slova treba da bude jednaka. Neka slova svojim oblikom stvaraju veču ili manju prazninu između sebe i drugih slova. Primer za to jesu recimo parovi slova kao što su or ili od, gde je d oblije i zauzuma više tog praznog prostora.

Obzirom na to da profesionalni i ozbiljni programi za obradu slika (Photoshop, Fireworks i njima slični) imaju opciju za podešavanje kerninga, preporučljivo je da se kerning podesi po vašoj sopstvenoj želji. Makar na početnu vrednost - 0px. To čete učiniti u Photoshopu tako što ćete otiči na menu Window > Character pa u drop down meniju kojeg simbolizuju slova av sa strelicom ispod, ili izabrati neku od postoječih vrednosti ili ukucati vašu.

Zapamtite
Ne dozvolite da razmaci u tekstovima u slikama budu premali ili preveliki. Podesite kerning na valjanu veličinu i rešite sve probleme.

O autoru
Goran Ratković član je grupe RatkovićDesign i jedan od osnivača designersnetwork-a. Od 2000. godine radi u internacionalnog firmi Gowi Group Ltd i iza sebe ima gomilu različitih referenci i radova.

nazad na školu dizajna