Fontovi u web dizajnu (osnove tipografije)

Uvod

Članak pred vama ne može (naravno) 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 slova moraju biti jasno ispisana, dobro definisana i međusobno različita.

Poslednja konstatacija ne odnosi se naravno na parove slova kao što su "m" i "x", ali su zato znakovi "1" (jedan), "l" (malo "el") i "I" (veliko slovo "i") - vrlo često 'zabrinjavajuće' slični kod većine fontova (isto važi i za znakove "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) - i to je nešto na šta dizajneri fontova i te kako moraju obraćati pažnju.

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" (što je podržano u većini fontova) i naravno azbuku (što nažalost baš i nije slučaj).

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 tipične načine upotrebe različitih kategorija fontova.

Definicije

U uvodu smo pomalo "liberalno" upotrebljavali pojam "font" (čitaocima već poznat iz svakodnevne prakse), na mestima gde bi preciznije bilo upotrebiti odrednicu "tip slova", ali naravno, nismo to činili iz želje da nekoga zbunimo, već isključivo iz razloga što se termin font u svakodnevnoj komunikaciji tipično koristi i onda kada se misli na tip slova.

Naravno, u situacijama u kojima može doći do zabune - treba biti precizan, pa ćemo se stoga (pre nego što se posvetimo praktičnijim temama) upoznati sa time šta ova dva pojma zapravo označavaju.

Tip slova (typeface)

Tip slova je odrednica koja se odnosi na dizajn određene kolekcije znakova u opštem smislu, na primer: na oblik i proporcije velikih i malih slova, proporcije različitih elemenata na samim simbolima (veličinu dijakritičkih oznaka - npr. kvačica u latiničnom slovu "š" i sl), prisustvo ili odsustvo ukrasa i drugih detalja (da li znak "1" ima ili nema poprečnu crtu sa donje strane, da li je nula "precrtana"), kao i mnoge druge stvari o kojima dizajneri fontova moraju voditi računa.

Font

Za razliku od tipa slova, što je odrednica koja se odnosi na dizajn znakova u apstraktnom smislu (ili prostije - ono što na kraju vidimo), font predstavlja konkretnu kolekciju slova, cifara i drugih simbola preko kojih se tekst ispisuje, bilo da su u pitanju tradicionalne kolekcije metalnih pločica sa ugraviranim simbolima, koje se koriste u štampi, ili (kada je u pitanju računarska tehnika) datoteke sa kolekcijama tzv. glifova, vektorskih simbola preko kojih su definisani oblici znakova koji se mogu ispisivatati u računarskim programima, na web sajtovima i naravno - odštampati.

Kategorije (familije) fontova

Tipografija, oblast grafičkog dizajna koja se bavi oblikom i osobinama slova, prepoznaje pet kategorija fontova (u članku ćemo koristiti i termin familija fontova, koji je takođe u upotrebi):

• serif
• sans serif
• monospace
• cursive
• fantasy

Nazivi koji smo naveli su na engleskom jeziku, onako kako se koristite u CSS-u, a u sledećim odeljcima, osvrnućemo se na osobine različitih familija.

Familija fontova: serif

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

Sa serifnim fontovima često se susrećemo u offline publikacijama (knjigama, dnevnoj štampi i slično), pogotovo starijim izdanjima, a familija serif je svakako i dalje popularna 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 dva navedena elementa.

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

Familija fontova: sans-serif

Sans-serif je svakako najpopularnija familija fontova u web dizajnu i ovakvi fontovi se odlikuju 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").

Pored web dizajna, u današnje vreme se sans-serif fontovi često sreću i u štampanim publikacijama, što nije bio slučaj u prethodnim decenijama.

Moderan (ali i dalje klasičan i umeren) oblik sans fontova dobro se uklapa u savremeni grafički dizajn (što sa serif fontovima često nije slučaj).

Poznati ("starinski") primeri ove kategorije fontova su Arial i Helvetica, dok se popularni moderni sans-serif fontovi broje desetinama.

Familija fontova: monospace

Kategoriju monospace fontova odlikuje osobina da svaki znak ima istu širinu u ispisu, bez obaziranja na prirodne proporcije slova (na primer, slovo "i" je 'prirodno' uže od slova "m").

Kao takvi, monospace fontovi su od posebnog interesa za programere, jer se zbog svoje velike preglednosti upravo monospace fontovi koriste u editorima teksta i IDE okruženjima za razvoj aplikacija.

U web dizajnu, upotreba monospace fontova je tipično svedena na prikaz blokova koda (takođe i tabela i sl), dok se za naslove i standardni tekst u pasusima, monospace fontovi koriste prilično retko (tekst deluje previše "strukturirano", kao da je otkucan na mašini).

Donja slika jasno pokazuje razliku između dva fonta iz iste familije (jedan je monospace font, drugi nije):

Iako su znakovi, u smislu svojih osnovnih kontura 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 to da znak "0" (nula) na monospace fontu ima dijagonalnu crtu koja dodatno pomaže raspoznavanju ovog znaka, dok "ne-monospace" varijanta fonta nema dodatnu oznaku (što je vrlo praktično: lako uočavanje nule u programiranju jedan od prioriteta, dok u prikazu običnog teksta na web stranicama - nije).

Nekoliko poznatih monospace fontova možemo videti na donjoj slici:..

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 dužnu pažnju i preostalim kategorijama.

Familija fontova: cursive

Fontovi iz kategorije cursive obavljaju (reklo bi se ni malo lak) zadatak simuliranja ljudskog rukopisa, međutim, smatra se da je upotreba cursive fontova u izradi internet stranica "neozbiljna", osim (eventualno) kada su u pitanju sajtovi namenjeni mlađoj deci.

Pogledajmo nekoliko popularinh cursive fontova.

Familija fontova: fantasy

Kategorija fantasy obuhvata fontove koji odstupaju od iole tradicionalnog oblika slova, a često ni ne prikazuju znake alfabeta (ili drugih jezika) već posebne "fantastične" znakove.

Naravno, u ovoj kategoriji ima i fontova čija prava namena (a ponekad čak ni osnovna), nije prikaz "egzotičnih i fantastičnih" varijacija klasičnih fontova, ili drugih apstraktnih simbola, već imaju vrlo konkretnu namenu u računarskim aplikacijama (recimo, fontovi koji sadrže kolekcije specijalizovanih znakova za šahovsku notaciju, ili na primer kolekcije emotikona, koji su opšteprisutni na elektronskim uređajima i po pravilu nisu definisani kao slike, već kao UNICODE znaci).

Izbor i uparivanje fontova

Uz početnu opasku da se o ukusima (obično) ne raspravlja (i da je lepota uvek "u oku posmatrača"), navešćemo nekoliko (ne)pisanih pravila o upotrebi (odnosno uparivanju) fontova u web dizajnu.

• za telo pasusa najčešće se biraju sans fontovi (ali su serif fontovi i dalje prilično popularan izbor)
• ako se za telo pasusa izabere serif font, za naslov se po pravilu bira sans font (jer serif-serif kombinacije tipično deluju "zakrčeno"), međutim ....
• ako se za telo pasusa izabere sans font, za naslov se (osim serif fonta) može birati i sans font, možda čak i isti (s tim da se u takvoj situaciji za naslov tipično bira "bold" verzija fonta)
• 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 za prikaz programskog koda (što svakako nije zadatak za serif i sans-serif fontove), a inače retko

"Zakrčenost" koju smo pomenuli, odnosi se (doslovno) na preveliku količinu linija u odnosu na (belu) pozadinu, što nepovoljno utiče na zamor posetilaca sajta (pri dužem čitanju).

Opšte osobine fontova

Preko oblika slova (i uz uparivanje fontova, izbor boja i sl), sajt šalje određenu podsvesnu poruku korisniku (nešto što zapažamo direktno i, najčešće, bez naknadnog uključivanja "aparata za rasuđivanje").

Na primer, "umereni" fontovi i ozbiljne boje, sugerišu korisniku da je i sadržaj sajta ozbiljan (ali, naravno, ukoliko korisnik uoči nedostatak ozbiljnog sadržaja, a pogotovo ukoliko se to desi u prvih nekoliko sekudi - početna "iluzija" će vrlo lako biti "razbijena").

Cursive fontovi i "pastelne" boje, mogu sugerisati da je u pitanju sajt namenjen deci (ili da je jednostavno u pitanju "rasterećen" sadržaj orijentisan ka razonodi), dok bi, nasuprot tome, upotreba monospace fontova i tehničkih crteža kao pozadinskih slika, mogla sugerisati da je u pitanju posebno ozbiljan sadržaj prepun tehničkih detalja.

Međutim, da bi poruka bila preneta na pravi način (pogotovo kada su u pitanju sajtovi sa velikim količinama teksta) i pogotovo da se ne bi desilo da iskustvo korisnika bude narušeno na grub način, mora se voditi računa i o različitim "tehnikalijama", pre svega o veličini slova i razmacima ....

Veličina (visina) fonta

Veličina fonta se u web dizajnu tipično zadaje preko parametra font-size i u navedenom kontekstu predstavlja ukupnu visinu koju određeni znak (potencijalno) može zauzimati u ispisu.

Veličina se najčešće zadaje preko jedinice "pt" (point), koja odgovara 1/72 inča i predstavlja tipografski standard koji obezbeđuje (ili bi bar tako trebalo da bude), da tekst čija je veličina zadata preko jedinice pt, ima istu veličinu kada se odštampa, kao i (što je za web dizajn bitnije) kada se prikazuje na različitim uređajima.

Iako se širina slova (načelno) može zadavati preko CSS-a (transform: scale(0.5, 1);), u pitanju je opcija koja se izuzetno retko koristi (zanimljiv efekat, ali, nije u pitanju standardna opcija za podešavanje fontova, već opcija za podešavanje grafičkih elemenata koja po dizajnu ima uticaja i na fontove).

Shodno navedenom, veličina slova se (na kraju) praktično poistovećuje sa visinom (a širina slova je određena proporcijama koje su definisane u samom fontu).

Pravila internet tipografije nalažu da veličina slova u pasusima treba da bude bar 12 ili 13pt (odnosno 16 ili 17px), što pri čitanju sa razdaljine od ~0.5m odgovara standardnoj veličini od 12pt u štampanim publikacijama.

U poslednje vreme, mnogi sajtovi koristiti i veličinu fonta 14 ili 15pt, pa čak i više (što naravno ne ugrožava čitljivost), a može se reći da je i veličina fonta od 11pt prilično prihvatljiva, ali, takva veličina teksta već može otežati čitanje osobama sa nešto slabijim vidom.

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

• h1 - 2 x visina teksta u pasusima
• h2 - 1.5 x visina teksta u pasusima
• h3 - 1.2 x visina teksta u pasusima

.... pri čemu ćemo napomenuti da je razlika u veličini između teksta naslova h1 i pasusa je u praksi najčešće i veća, s tim da, u standardnom prikazu teksta, razlika ne bi trebalo prelazi ~3x (izuzetak su sajtovi gde se izrazito veliki naslovi postavljaju zarad "efekta").

Sve navedeno je u funkciji preglednosti i dobrog dizajna i dodatnim detaljima ćemo posvetiti zaseban odeljak u zaključnim delovima članka.

Relativne jedinice, rem i em

Jedinice pixel i point su apsolutne, pa na primer, ako donju marginu zadamo kao 26px, donja margina će uvek imati vrednost 26 piksela.

Ako se pitate u čemu je tačno problem (u celom pristupu), radi se o sledećem: ukoliko nam je namera bila da doslovno "namontiramo" marginu od 26px, odgovor je - ni u čemu.

Međutim, ako je margina od 26px izabrana tako da odgovara veličini fonta od 12pt, a ne zbog vrednosti od 26px kao takve, pa u nekom kasnijem trenutku odlučimo da promenimo veličinu fonta - moraćemo da menjamo i marginu.

Ukoliko želimo da dimenzije određenih funkcionalnih elemenata stranice budu relativne, u odnosu na druge elemente, najbolje će biti da ih definišemo preko relativnih jedinica kao što su em i rem.

em

U okviru određenog HTML elementa, 1em predstavlja veličinu (visinu) teksta "roditeljskog" elementa (elementa unutar koga je, u HTML strukturi, dati element smešten).

Na primer, link (<a>) unutar paragrafa, nasleđuje veličinu fonta od paragrafa, pa ako želimo da linkovi budu blok elementi i ispisani nešto krupnijim slovima, možemo koristiti sledeći kod:

		
p > a.blok_link {
	display:   block;
	font-size: 1.2em;
	margin:    1em 0 1em 4px;
}
		
	

Vidimo da smo i margine podesili preko jedinice em (levu marginu smo podesili preko piksela, čisto da se podsetimo da mogućnost kombinovanja jedinica uvek postoji, a često i dobro dođe).

Još više možemo postići ako slične principe primenimo na celu stranicu, ali će nam za tako nešto biti potrebna jedinica rem.

rem

Preko jedinice rem ("root em"), moguće je definisati relativnu veličinu elemenata, ali ovoga puta - ne u odnosu na roditeljski element - već u odnosu na koreni element DOM strukture.

To što smo naveli (naravno) zvuči apstraktno, ali, budući da u svemu važi sledeće:

• podrazumevana veličina slova za root element je 16px
• root elementu se može pristupiti preko CSS-a

.... može se doći do "raspleta" ....

Na primer (u smislu responzivnog web dizajna određene stranice), možemo prvo definisati da je 11pt veličina fonta za root element - za rezolucije manje od 300px, dok će u slučajevima kada rezolucija dostigne i preraste 300x, veličina fonta za root element takođe porasti, na 12pt - i potom definisati veličine svih ostalih elemenata u odnosu na navedena podešavanja:

		
:root {
	font-size: 11pt;
}

p {
	font-size: 1rem;
	margin:    0 0 1.618rem 0; 
}

h1 {
	font-size: 3rem;
	margin:    0 0 1em 0; 
	/*
	   Budući da je veličina fonta podešena
	   kao 3rem, a donja margina kao 1em,
	   donja margina takođe (praktično)
	   ima vrednost 3rem
	*/
}

@media only screen and (min-width: 300px) {
	:root {
		font-size: 12pt
	}
}
		
	

.... posle čega, pri promeni rezolucije, ne moramo više brinuti o veličini fontova, margina i sličnim podešavanjima (u suprotnom, bez jedinica rem i em, moramo za svaku rezoluciju pisati podebne selektore sa ručno podešenim dimenzijama).

Razmaci između redova i znakova u reči

Propisi nalažu da vertikalni razmak između dva reda mora biti najmanje 1 * visina slova, međutim takva vrednost samo omogućava da se slova u dva susedna reda ne preklope po visini. Podrazumevana vrednost u browserima je 1.4, a vrednosti koje se tipično koriste u pasusima (ali i drugim elementima) su u rasponu od 1.6 do 1.8.

Horizontalni razmak između znakova u reči najčešće nije potrebno menjati, ali, može se (naravno) podešavati po želji. Jedinica koja se tipično koristi za taj poduhvat je em (u ovom slučaju možemo reći: 1em = 100% širine znaka "M"), a horizontalni razmaci koji se zadaju su obično mali (tipično u rasponu od 0 do 0.1em, s tim da je 0.1em u većini situacija već poprilično "očigledno").

Podešavanje fontova u CSS-u

Uzmimo za primer nekoliko 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 jednom od narednih članaka)

Kao vrednost atributa font-family navodi se bar jedan font, s tim da bi u praksi svakako trebalo navesti bar dva.

Pre svega, u 99% situacija, prvi navedeni font će biti pronađen i iskorišćen za prikaz (pokazaćemo u sledećem odeljku kako se možemo postarati da bude tako), ali razmotrimo šta se dalje dešava ukoliko to ipak nije slučaj.

Ukoliko browser ne pronađe prvi font koji smo naveli (među CSS podešavanjima za fontove ili među fontovima koji su prisutni u operativnom sistemu klijenta), pokušaće da pronađe drugi, treći .... a, ukoliko se ne pronađe ni jedan od navedenih fontova, browser će za prikaz iskoristiti podrazumevani (default) font (u praksi, na Windows operativnim sistemima, to je Times New Roman) .... koji najeverovatnije ne podseća na font koji smo predvideli za prikaz.

Međutim, fontove nismo navodili nasumično: prvi font se može čuvati na serveru i (preko podešavanja koja ćemo pokazati u narednom odeljku) učiniti dostupnim browseru (tako da je gotovo sigurno da će biti učitan), a drugi je dobro poznati font koji je deo osnovne instalacije operativong sistema Windows (i osim ako se neki korisnik nije potrudio da ga ručno obriše, biće dostupan).

Treća stavka, koja predstavlja familiju fontova je najbitnija ("ako baš nema prethodno navedenih fontova, mora biti bar jednog sans fonta na celom sistemu"), i to je "sigurnosni mehanizam" koji će obezbediti da prikaz elementa bar okvirno podseća na ono što smo naumili.

Međutim (kao što smo naveli), možemo postići i da prvi navedeni font - u iole normalnim i uobičajenim uslovima učitvanja stranice - bude odmah izabran ...

Korišćenje lokalnih fontova sa servera

Ukoliko želimo da određeni font (ponovo ćemo za primer uzeti font Raleway), učinimo dostupnim programima koji pristupaju stranici, potrebno je da preuzmemo TTF datoteku sa interneta, kopiramo je u folder fontovi (koji se nalazi u istom folderu kao i datoteka index.html), i potom dopunimo CSS kod na sledećim selektorom (koji treba da bude naveden pre selektrora u kome se poziva font):

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

Sada stranica može da koristi navedeni font, nezavisno od toga da li je font instaliran na računaru korisnika ili nije (naravno - uvek pretpostavite da nije).

Podešavanja fontova kao deo dizajna

Za kraj smo ostavili kraću diskusiju o tome kako se do sada navedena pravila koriste u izradi sajtova.

Pre svega, sve 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, već je cilj dobrog dizajna napraviti kombinaciju estetske dopadljivosti (lepote) i funkcionalnosti (upotrebljivosti), a oblici fontova, veličine slova i sva ostala podešavanja - treba da pomognu u ostvarivanju tog cilja.

Fontovi koji se koriste za tekst pasusa treba da budu pre svega čitljivi.

Svakako mogu biti i "lepi" 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 svakako mogu biti nešto "lepši" i "posebniji" od osnovnog fonta, ali (i dalje) taman toliko da se jasno izdvajaju od sadržaja (bez prevelikog skretanja pažnje na sebe).

Ista pravilo važi i za fontove koje ćemo koristiti za ostale funkcionalne elemente na stranici (dugmiće, linkove i slično).

Veličina fonta u svemu takođe igra jako važnu ulogu, a preporučene veličine koje smo ranije naveli 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.

Na kraju je pažnja čitaoca usmerena na prvi pasus, u kome je veličina fonta takva da omogućava čitanje bez ikakvog naprezanja.

Ako se dvoumite na šta ciljamo sa navedenim pravilima, probajte da zamilsite šta bi bilo kada bismo se oglušili o pravila i podesili da h3 (pod)naslovi budu veći od h1 naslova, a da h1 elementi budu manji od teksta pasusa.

Ili još bolje, probajte sami: preko klizača na donjem formularu zadajte elementima različite kategorije fontova i veličine i proverite da li pravila o kojima smo diskutovali "drže vodu".

		
#include<stdio.h>

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

Možemo na kraju i malo pojednostaviti navedena pravila: stranica mora biti tako dizajnirana da, kada je posmatramo sa udaljenosti od tri metra, odmah zapazimo naslov i razaznamo ostatak strukture (gde su podnaslovi, gde su pasusi), ali istovremeno, da kada je posmatramo sa uobičajene udaljenosti (~0.5m), razlika u veličini ne "bode oči" (razlike u veličini elemenata moraju biti jasno uočljive, ali je potrebno i da deluju deluju prirodno).

Za kraj ....

Nije lako u početku voditi računa o (baš) svim aspektima dizajna, ali (sa druge strane), nije ni mnogo teško bar se potruditi da bude tako.

U današnje vreme, takođe je jako bitno da sva pravila o kojima smo pričali (čitljivost teksta, uočljivost funkcionalnih elemenata), budu uvažena bez obzira da li sajt posmatramo na velikom desktop monitoru, ili na omanjem ekrenu telefona, što je zadatak poddiscipline web dizajna, koja popularno nosi naziv responzivni web dizajn.

Upravo je to tema kojoj ćemo u skorije vreme posvetiti zaseban članak.