Fontovi u web dizajnu (osnove tipografije)

Uvod

Sve što ste hteli da znate o fontovima, a niste imali koga da pitate ....

Članak pred Vama, naravno, ne može Vam pružiti "sve" informacije o fontovima (ne bi bilo praktično ni da pokušamo), međutim, potrudićemo se da napravimo sveobuhvatan osvrt na kategorije fontova, njihove estetske i funkcionalne osobine, kao i tehnikalije koje se tiču prikaza fontova na web stranicama i njihovog međusobnog uparivanja.

Najvažnija osobina fonta je njegova čitljivost - sposobnost da prenese informaciju o znakovima koji čine sadržaj teksta pri čemu će slova biti jasno ispisana, dobro definisana i međusobno različita. Ovde će neki čitaoci možda "podići obrvu" i zapitati se: da li baš slova "m" i "x" zaista mogu biti toliko slično prikazana da ih ne prepoznamo i odgovor je - "ne mogu", ali su zato znakovi "1" (jedan), "l" (malo "el") i "I" (veliko slovo "i") "zabrinjavajuće" slični kod većine fontova (u nastavku teksta navešćemo jedan poznat i vrlo ubedljiv primer), a takođe i znakovi "0" (nula) i "O" (veliko slovo O), mada je kod većine dobro dizajniranih fontova ta razlika odmah uočljiva (nula je vidno uža).

Druga važna osobina (pogotovo za sajtove na srpskom jeziku) je podrška za znakove koji ne pripadaju engleskom alfabetu, pre svega, slova sa dijakritičkim oznakama (kvačicama) i naravno - azbuku.

U estetskom i funkcionalnom smislu, među fontovima postoje određene sličnosti, koje dozvoljavaju da se po potrebi jedan font zameni drugim, sličnim, kao i razlike, koje određuju načine upotrebe različitih oblika slova.

Kategorije (familije) fontova

U tipografiji, oblasti grafičkog dizajna koja se bavi oblikom i osobinama slova, koristi se pet kategorija fontova (u članku ćemo češće koristiti naziv familija, koji je takođe u upotrebi):

serif
sans serif
monospace
cursive
fantasy

Nazivi koji smo ovde naveli su na engleskom jeziku, onako kako ćemo ih koristiti u CSS jeziku, a u sledećim odeljcima, osvrnućemo se na njihove osobine.

Familija fontova: serif

U pitanju je tradicionalan oblik slova, sa "serifima" (malim, poprečnim crticama na krajevima linija slova), po kojima je ova familija i dobila naziv (direktan prevod koji se na našim prostorima povremeno koristi je "serifni fontovi").

Slika 1. - Serif fontove odlikuje prisustvo "serifa", poprečnih crtica na krajevima linija slova. Ovi ukrasi, iako možda deluju nepotrebno, doprinose čitljivosti teksta.

Ovo je klasičan oblik slova sa kojim ste se mnogo puta do sada susretali, u offline publikacijama (knjigama, dnevnoj štampi i slično), a svakako je i dalje popularan i u izradi internet stranica

Pri biranju kombinacija fontova za naslove / podnaslove i pasuse, nepisano je pravilo da se serif fontovi biraju za samo jedan od navedena dva elementa (o uparivanju fontova ćemo pisati u posebnom odeljku).

Verovatno najpoznatiji primer ove kategorije fontova je Times New Roman, čiji oblik možete videti na slici, uz još nekoliko modernih serif fontova.

Slika 2. - Serifni fontovi koji se često koriste u web dizajnu.

Familija fontova: sans-serif

Svakako najpopularniji tip fontova u web dizajnu, sans-serif fontovi odlikuju se klasičnim oblikom slova, uz odsustvo serifa koje smo već spominjali (reč "sans", na francuskom jeziku doslovno znači "bez", a pomalo rogobatni prevod koji se povremeno koristi za ovu kategoriju fontova je "beserifni").

Slika 3. - Za razliku od serif fontova, sans-serif fontovi nemaju dodatne ukrase. Ovo ih čini modernijim, ali i donekle umanjuje njihovu čitljivost (koja je u praksi ipak više nego prihvatljiva).

Pored web dizajna, u današnje vreme se (za razliku od prethodnih decenija) sans-serif fontovi često sreću i u štampanim publikacijama. Moderan (ali i dalje klasičan i umeren) oblik ovih fontova, upotpunjuje savremen dizajn (što se upotrebom serif fontovi najčešće ne bi moglo postići).

Poznati primeri ove kategorije fontova su Arial i Helvetica, dok se moderni sans-serif fontovi broje stotinama.

Slika 4. - Sans fontovi koji se često koriste u web dizajnu.

Usput, sećate li se primera za "isprobavanje" fontova koji smo vam na početku obećali? Samo napišite englesku reč "Illusion" i posmatrajte kako se vaš omiljeni sans font "raspada" pred Vašim očima (ni naši omiljeni sans fontovi nisu ništa bolji) , dok serif fontovi nemaju taj problem (one crtice možda jesu malo previše "fancy" za današnje pojmove, ali, kao što vidite, dobro dođu u ovakvim situacijama).

Ovo je ipak pomalo granični slučaj i čitljivost najčešće nije ni malo dovedena u pitanje (zbog specifičnosti načina čitanja koji ne podrazumeva čitanje znak-po-znak).

Familija fontova: monospace

Ova kategorija fontova je od posebnog interesa za programere, jer se upravo ovakvi fontovi koriste u editorima teksta i programima za razvoj aplikacija, zbog njihove glavne odlike po kojoj su dobili naziv: "monospace" = svaki znak zauzima istu širinu u zapisu, što uveliko doprinosi preglednosti programskog koda.

Slika 5. - Struktura monospace i "ne-monospace" fontova iz iste familije, koja jasno prikazuje razlike. Iako su znakovi, u smislu svojih osnovnih knotura skoro isti, širina znakova u gornjem fontu varira, dok su u donjem fontu svi znakovi iste širine (a primećujemo i serife na nekoliko mesta). Takođe, primećujemo i da znak "0" (nula) na monospace fontu ima dijagonalnu crtu koja dodatno pomaže raspoznavanju ovog znaka, dok ne-monospace varijanta fonta to nema (ovo je vrlo praktično, jer, dok je lako uočavanje nule u programiranju jedan od prioriteta, u prikaz običnog teksta na web stranicama nije).

U smislu prisustva ili odsustva serifa, postoje monospace fontovi obe podkategorije, ali su i dalje u pitanju monospace fontovi (to jest, monospace je njihova glavna kategorija).

U izradi web stranica, ovakvi fontovi, koji su programerima obično veoma dragi (autor ovog teksta je veliki ljubitelj monospace fontova), obično kvare estetiku stranica zbog teksta koji izgleda kao da je otkucan na klasičnoj kucaćoj mašini (u izradi sajta koji čitate, pokušali smo da uvrstimo u dizajn naš omiljeni monospace font, ali .... jednostavno nije išlo).

Napoznatiji primer ove kategorije je font Courier, dok su neki od poznatijih modernih monospace fontova .....

Slika 6. - Monospace fontovi. Iako deluje da je Inconsolata serifni font, a Roboto Mono besirifni, oba fonta su zapravo "delimično" serifna (kao što smo već videli na gornjoj slici). I jedan i drugi imaju serife samo na specifičnim znakovima, kao što su mala i velika slova "I" i "L" (nešto nam je to poznato, zar ne).

Tri kategorije fontova koje smo do sada naveli su svakako važnije od preostale dve (u web dizajnu se tipično koriste samo prve dve, dok se monospace fontovi koriste zarad postizanja efekta i naravno - za prikaz programskog koda), ali, posvetićemo i njima dužnu pažnju.

Familija fontova: cursive

Fontovi koji pripadaju ovoj kategoriji obavljaju (ne previše lak) zadatak simuliranja rukopisa.

Obično se smatra da je upotreba ovakvih fontova u izradi internet stranica "neozbiljna" i svojstvena (možda) samo sajtovima namenjenim deci.

Ne možemo ovde propustiti priliku da spomenemo izuzetno popularni Comic Sans, a Vama prepuštamo da pronađete više desetina pošalica na internetu koje se tiču upotrebe ovog fonta u web dizajnu.

Slika 7. - Cursive fontovi. Dok prva dva fonta imitiraju ljudski rukopis, poslednji font prikazuje rukopis kakav malo ko ima.

Familija fontova: fantasy

Poslednja kategorija fontova obuhvata fontove koji odstupaju od iole tradicionalnog oblika slova, a često ni ne prikazuju znake alfabeta (ili drugih jezika) već posebne "fantastične" znake. Međutim, ima fontova iz ove kategorije koji imaju vrlo konkretnu primenu. Recimo, fontovi sa specijalnim znakovima za šahovsku notaciju.

Izbor i uparivanje fontova

Uz početnu opasku da se o ukusima (obično) ne raspravlja i da je "lepota u oku posmatrača", navešćemo neka (ne)pisana pravila o upotrebi fontova.

(Zanemarićemo stotine sajtova koji se bave upravo takvim raspravama - o ukusima, kao i nebrojene desetine hiljada razgovora koji su od pamtiveka vođeni na tu temu. :))

Za telo pasusa najčešće se biraju sans fontovi, mada su i serif fontovi i dalje jako popularan izbor
Ako smo za telo pasusa izabrali serif font, za naslov ćemo, gotovo sigurno, izabrati neki sans font (jer serif-serif kombinacije obično deluju pomalo "zakrčeno"), međutim ....
Ako smo za telo pasusa izabrali sans font, sasvim je "legitimno" da i za naslove izaberemo sans font (možda čak i isti)
Za navigacione linkove i ostale funkcionalne elemente stranice (dugmad, oznake i slično), tipično se koriste sans fontovi
Monospace fontovi, kao što je već navedeno, koriste se na "programerskim" sajtovima (kao što je sajt koji trenutno čitate), za prikaz programskog koda (što svakako nije zadatak za serif i sans-serif fontove)

Osobine fontova

Veličina fonta

Veličina fontova se tipično zadaje upotrebom jedinice "pt" (point), koja predstavlja 1/72 inča. U pitanju je tipografski standard koji obezbeđuje (ili bi bar trebalo da je tako) da font čija je veličina zadata ovom jedinicom, zapravo ima istu veličinu na različitim uređajima (iako je za zadavanje veličine moguće kao jedinicu koristiti i "px" - piksel - mora se primetiti da se fizička veličina piksela na uređajima varira).

Pravila internet tipografije nalažu da veličina slova u pasusima bude 12 ili 13pt. Malo manje od toga (11pt) je i dalje prihvatljivo, ali, osobe sa slabijim vidom svakako mogu imati problema sa čitanjem, dok je veličine 14pt takođe prihvatljiva (mada se ređe koristi). Opšta ideja je da veličina fonta na ekranu bude (približno) ista kao veličina fonta u štampanim publikacijama (knjige i časopisi), s obzirom na razmak između ekrana i posmatrača.

Što se tiče naslova, standardne visine su:

h1 - 2 * visina teksta u pasusima
h2 - 1.5 * visina teksta u pasusima
h3 - 1.2 * visina teksta u pasusima

Napomenimo da je razlika u veličini između teksta naslova h1 i pasusa je u praksi najčešće i veća (na desktop verziji sajta koji čitate, ona iznosi ~3.33x).

Sve navedeno je u funkciji preglednosti i dobrog dizajna i ovim detaljima ćemo posvetiti zaseban odeljak u zaključnim delovima članka, ali ćemo se pre toga osvrnuti na još neka podešavanja fontova.

Razmaci između redova i znakova u reči

Propisi nalažu da vertikalni razmak između dva reda mora biti najmanje (ali, najčešće ne mnogo više od toga) 1 * visina slova. Tipična vrednost je 1.4.

Horizontalni razmak između znakova u reči najčešće nećemo menjati, ali, ukoliko je potrebno, zadaćemo vrednost upotrebom jedinice "em" (1em = 100% širine znaka). Horizontalni razmaci koje ćemo u takvim situacijama zadavati su mali i tipično iznose od 0.01em do 0.1em.

CSS - podešavanja fontova

Za početak, pogledaćemo primer selektora kojima se zadaju osobine fontova za pasuse i naslove h1, h2 i h3:

									
p {
	font-family: Roboto, Arial, sans-serif;
	font-size:   12pt;
	font-weight: normal;
}

h1 {
	font-family: Raleway, Arial, sans-serif;
	font-size:   36pt;
	font-weight: bold;
}

h2 {
	font-family: Raleway, Arial, sans-serif;
	font-size:   18pt;
	font-weight: bold;
}

h3 {
	font-family: Raleway, Arial, sans-serif;
	font-size:   14pt;
	font-weight: bold;
}

Ako pogledamo bilo koji od selektora, zapazićemo tri atributa:

font-family - zadavanje fonta, odnosno familije fontova;
font-size - veličina fonta
font-weight - debljina slova, može biti normal ili bold (a može imati i brojčanu vrednost, ali, o tome ćemo govorti u nekom od narednih članaka)

Za atribut font-family možemo navesti i samo jednu vrednost, ali u praksi to nije dobro rešenje. Ukoliko navedemo font Raleway (koji smo ovde naveli), naš browser pokušaće da pronađe taj font i iskoristi ga za prikaz elemenata h1, h2 i h3. Šta ako browser ne pronađe taj font? U tom slučaju, program će po svom izboru iskoristiti podrazumevani (default) font umesto onog koji smo mi naveli (u praksi, na Windows operativnim sistemima, to će biti Times New Roman .... koji ni izdaleka ne liči previše na font koji smo hteli).

Međutim, mi smo, pored fonta Raleway, naveli i font Arial, kao i familiju sans-serif. Ako program ne pronađe font Raleway, pronaći će Arial (u praksi, gotovo sigurno hoće, na Windows sistemima), ali, ako baš ne nađe ni jedan ni drugi, na kraju je navedena familija sans-serif i podrazumevani sans-serif font (nije isto što i podrazumevani font, koji tipično nije sans-serif, već neki od serif fontova), biće iskorišćen za prikaz.

Međutim, postoji način da font koji nije instaliran u okviru operativnog sistema korisnika, učinimo dostupinm browser-u

CSS - Korišćenje lokalnih fontova sa servera

Ukoliko želimo da određeni font (neka to ponovo bude Raleway), bude dostupan programima koji pristupaju našoj stranici, preuzećemo font sa interneta (Raleway dolazi u zip arhivi, u više stilova, a stil koji ćemo mi koristiti je "Raleway-Regular"), smestiti datoteku Raleway-Regular.ttf u folder "fontovi" (koji će se nalaziti u istom folderu kao i datoteka index.html), a potom dopuniti naš CSS kod na sledeći način (navešćemo donji odeljak pre prvog pozivanja fonta):

									
@font-face {
	font-family: 'Raleway';
	src:         url('fontovi/Raleway-Regular.ttf') format('truetype');
	font-weight: normal;
    font-style:  normal;
}

Sada naša stranica može da koristi navedeni font, nezavisno od toga da li je on instaliran na računaru korisnika ili nije.

Izbor fonta kao deo dizajna

Za kraj smo ostavili ono najvažnije - kako ćemo navedena pravila kombinovati u izradi sajtova.

Odlike fontova o koje smo do sada naveli, nalaze se (ili bi bar trebalo da se nalaze) u službi dizajna. Međutim, dizajn nije samo lepota. Dizajn je kombinacija estetske dopadljivosti (lepote) i funkcionalnosti (upotrebljivosti). Oblici fontova, veličine slova i sva ostala podešavanja - treba da pomognu u ostvarenju tog cilja.

Fontovi koji se koriste za tekst pasusa treba da budu pre svega čitljivi i dopadljivi, ali, tako da ne skreću pažnju na sebe i da budu u funkciji što lakšeg usvajanja predstavljenih informacija.

Fontovi koje koristimo za naslove i podnaslove (i podpodpod .... za naslove nižeg nivoa hijerarhije :)) svakako mogu biti "lepši" i "posebniji" od osnovnog fonta, ali (po nepisanom pravilu, koje ponekad možda i treba prekršiti) taman toliko da se jasno izdvajaju od sadržaja (ali, i ovoga puta, bez prevelikog skretanja pažnje na sebe).

Isto pravilo važi i za fontove koje ćemo koristiti za ostale funkcionalne elemente stranice (dugmad, linkove i slično).

U smislu dizajna (estetika i funkcionalnost), veličina fonta igra veliku ulogu. Preporučene veličine koje smo naveli u odeljku o veličini fonta odgovaraju tim zahtevima. Font za h1 elemente prvi privlači pažnju čitaoca svojom veličinom (ali, samo toliko da bude očigledno gde je glavni naslov i šta naslovljava), posle čega pažnja prelazi na h2 naslove i h3 (ako ih ima u vidnom polju), što podsvesno upućuje čitaoca na strukturu teksta, odnosno na to odakle treba započeti sa čitanjem.

Sa druge strane, ukoliko bismo se oglušili o navedena pravili i stavili h3 elemente veličine koji su veći od h1 elemenata i takođe podesili da h1 elementi budu manji od teksta pasusa, čitalac bi vrlo lako mogao ostati zbunjen.

Uostalom, probajte sami. Preko klizača na donjem formularu zadajte elementima različite kategorije fontova i veličine i proverite da li navedena pravila "drže vodu".

Naslov primera - h1

Ovo je odeljak sa tekstom, standardni pasus sa nekoliko rečenica. Prve dve rečeince smo već ispisali, tako da je ovo treća. Razmišljali smo o čemu da pišemo o ovom pasusu, ali, zaključili smo da baš i nemamo inspiraciju. Međutim, ako ste pročitali sav tekst do ovde, zaključićemo da Vam izbor fonta za paragraf nije odmogao u čitanju i da smo napravili dobar izbor.

									
#include<stdio.h>

void main()
{
	int a, b, zbir;
	scanf("%d %d", &a, &b);
	zbir = a + b;
	printf("Zbir unetih brojeva je: %d", zbir);
}

Ili da, pre nego što završimo članak, malo pojednostavimo navedena pravila: kada posmatramo stranicu sa udaljenosti od tri metra, moramo odmah zapaziti naslov i biti u stanju da razaznamo ostatak strukture (gde su podnaslovi i šta je tekst), ali istovremeno, kada posmatramo sajt sa uobičajene udaljenosti (~0.5m), razlika u veličini ne sme da "bode oči", odnosno, razlike u veličini elemenata moraju biti jasno uočljive, ali tako da, istovremeno, deluju prirodno.

Zaključak

Nije (naravno) lako u početku voditi računa o baš svemu navedenom, ali, kako vreme prolazi i iskustvo dizajnera se povećava, nije ni mnogo teško (bar se potruditi) da o navedenim pravilima vodimo računa, od čega samo možemo imati koristi.

Takođe, nešto što je jako bitno, a čemu iz praktičnih razloga nismo posvetili pažnju u ovom članku, tiče se podešavanja sajta (veličina teksta i ostalih funkcionalnih elemenata) tako da prikaz bude optimalan bez obzira na to da li sajt posmatramo na ekranu mobilnog telefona ili na monitoru desktop računara.

U pitanju je takozvani responzivni web dizajn, kome ćemo u skorije vreme posvetiti zaseban članak.