Fontovi u web dizajnu (osnove tipografije)

Uvod

Članak pred vama ne može (naravno) pružiti 'sve' odgovore na sva pitanja o fontovima (ne bi bilo praktično ni da pokušamo), međutim, potrudićemo se da napravimo što sveobuhvatniji osvrt na estetske i funkcionalne osobine različitih kategorija fontova, kao i detaljan osvrt na 'tehnikalije' koje se tiču prikaza fontova na web stranicama i međusobnog uparivanja fontova.

Najvažnija osobina fonta je čitkost, a upotreba pravilno dizajniranih i dobro podešenih fontova omogućava (upravo) da prikazana slova budu jasno definisana i međusobno različita. *

Kada je font u stanju da adekvatno prenese vizuelnu informaciju o izgledu slova, čitaocu je omogućeno da na kraju razume i sadržaj teksta (na jednostavan način i bez dodatnog 'naprezanja').

Kao sledeću važnu osobinu (pogotovo kada se radi o sajtovima na srpskom jeziku i srodnim jezicima), možemo navesti podršku za Unicode 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) često nije podržano.

U estetskom i funkcionalnom smislu, među fontovima postoje određene sličnosti koje omogućavaju da se po potrebi jedan font zameni drugim (sličnim), kao i razlike, koje određuju uobičajene načine upotrebe različitih tipova slova.

Definicije

U uvodu smo pomalo 'liberalno' upotrebljavali termin "font" (čitaocima već poznat iz svakodnevne prakse), na mestima na kojima bi pravilnije bilo upotrebiti odrednicu "tip slova", ali, to (razume se) nismo činili iz želje da nekoga zbunimo, već zato što je u svakodnevnoj komunikaciji veoma uobičajeno da se termin font koristi i onda kada se misli na tip slova.

U svakom slučaju (pre nego što se posvetimo praktičnijim temama), upoznaćemo se ukratko sa time šta dva prethodno navedena termina zapravo označavaju, a upoznaćemo se detaljnije i sa terminima "čitkost" i "čitljivost" (koji se takođe često upotrebljavaju 'jedan umesto drugog').

Tip slova (typeface)

Tip slova je termin koji se odnosi na dizajn određene kolekcije znakova u opštem smislu, to jest, na detalje kao što su:

• opšti oblik i proporcije velikih i malih slova (kao i drugih znakova)
• pozicije i proporcije različitih elemenata na simbolima (na primer, pozicija donje poprečne crte na slovu 'F', proporcije kvačica u latiničnim slovima 'č', 'ć', 'š' 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" i sl)

Font

Za razliku od tipa slova, što je odrednica koja se odnosi na dizajn znakova u apstraktnom smislu (ili, prostije, na 'ono što na kraju vidimo'), termin "font" označava konkretnu kolekciju slova, cifara i drugih simbola, koji se koriste pri ispisu teksta.

U tradicionalnoj štamparskoj tehnici, termin font se odnosi na kolekciju metalnih pločica sa rezbarenim simbolima (preko kojih se pravi otisak), dok, kada je u pitanju računarska tehnika, font predstavlja datoteku sa kolekcijama tzv. glifova (eng. glyph) - vektorskih simbola preko kojih su definisani oblici znakova (koji se mogu ispisivati u računarskim programima i na web sajtovima, a mogu se naravno i štampati).

Čitkost i čitljivost

Termini čitkost i čitljivost sreću se često - i isto tako se (vrlo često) mešaju u mnogim situacijama kada se diskutuje o osobinama teksta, pri čemu (praktično) ne postoje 'univerzalno prihvaćene definicije' za ova dva pojma, ali (bez obzira na navedeno), potrudićemo se da ponudimo 'razumne radne definicije' (po ugledu na 'najprihvaćenije definicije akademskog tipa').

Čitkost je termin koji se odnosi na tehničke i estetske osobine slova, u smislu pravilnog oblika i lakog raspoznavanja znakova), ali, često * se ovaj termin odnosi i na tehničke osobine štampanog teksta (ili teksta koji se prikazuje na računarskim monitorima i sl), u smislu veličina slova, horizontalnog i vertikalnog razmaka između znakova tj. redova, razmaka između pasusa i sl.

Čitljivost je termin koji se (vrlo često) graniči ** sa 'književnim i estetskim' osobinama teksta, i odnosi se na: opštu strukturu rečenica i pasusa, broj znakova ili broj reči u rečenicama, broj rečenica u pasusima, prisustvo tj. odsustvo dugačkih reči ili reči koje se često ponavljaju i sl.

Kategorije (familije) fontova

U modernom web dizajnu, prepoznaje se pet kategorija fontova:

• serif
• sans serif
• monospace
• cursive
• fantasy

Naveli smo izvorne nazive na engleskom jeziku (onako kako se koristite u CSS-u i u web dizajnu inače), a u sledećim odeljcima slede prevodi i objašnjenja, i osvrt na tehničke osobine različitih kategorija (odnosno familija) fontova.

Familija fontova: serif

Familija tzv. serifnih fontova odlikuje se tradicionalnim oblikom slova, koja na krajevima osnovnih linija sadrže poprečne crtice, "serife", po kojima je familija i dobila naziv.

Sa serifnim fontovima najčešće se susrećemo u offline publikacijama (knjigama, dnevnoj štampi i sl), pogotovo u starijim izdanjima, ali, familija serif je svakako prisutna i na internet stranicama.

Kao (verovatno) najpoznatiji primer kategorije serifnih fontova, možemo navesti font Times New Roman, čiji oblik možete videti na donjoj slici (uz još nekoliko modernijih serifnih fontova).

Familija fontova: sans-serif

Familija beserifnih fontova nosi naziv koji je direktan prevod termina sans-serif (na francuskom jeziku, reč "sans" doslovno znači "bez"), i u pitanju je daleko najpopularnija familija fontova u web dizajnu.

Glavna odlika sans-serif fontova je klasičan oblik slova, uz (kao što naziv nagoveštava) - odsustvo serifa (sa kojima smo se upoznali u prethodnom odeljku):

Pored web dizajna, sans-serif fontovi se u današnje vreme često sreću i u štampanim publikacijama (što najčešće nije bio slučaj u prethodnim decenijama), a razlog je to što se moderan (ali i dalje klasičan i umeren) oblik beserifnih fontova, dobro uklapa u savremeni grafički dizajn.

Kao poznate "starinske" primere kategorije sans-serif, možemo navesti fontove Arial i Helvetica, a popularni moderni sans-serif fontovi, broje se desetinama.

Familija fontova: monospace

Fontovi kategorije monospace odlikuju se time da svaki znak zauzima istu širinu u ispisu, bez obzira na prirodne proporcije slova (na primer, slovo 'i' je "prirodno uže" od slova 'm').

Osim ujednačene širine znakova, monospace fontovi praktično nemaju druge definišuće karakteristike, * odnosno: monospace fontovi mogu biti serifni, mogu biti bez serifa (što je tipično za većinu novijih/modernijih fontova), a mogu čak biti dizajnirani na isti način kao fontovi iz kategorija cursive i fantasy; ** naravno - uvek uz poštovanje pravila o ravnomernoj horizontalnoj raspodeli prostora koji se dodeljuje svakom znaku.

U opštem smislu, pošto smo nagovestili da "ostale" familije fontova poštuju "prirodne proporcije znakova", navešćemo da se takvi fontovi prepoznaju kao "proporcionalni fontovi", a da bismo što bolje razumeli do sada navedene karakteristike različitih kategorija fontova, sagledaćemo dva primera koji prikazuju razliku između: proporcionalnih fontova (gornji deo slike), i monospace fontova (donji deo slike).

U prvom primeru - iako fontovi imaju istu visinu, reč dužine 12 znakova, koja je ispisana korišćenjem proporcionalnog fonta, ima približno istu širinu kao reč dužine 9 znakova, koja je ispisana korišćenjem monospace fonta.

U drugom primeru, u pitanju su dve iste niske (takođe su korišćeni različiti fontovi iste visine), međutim, niska koja je ispisana korišćenjem proporcionalnog fonta (gornji deo slike), vidno je uža od niske koja je ispisana korišćenjem monospace fonta (donji deo slike).

Monospace fontovi su od posebnog značaja za programere i web dizajnere, jer upravo se fontovi iz kategorije monospace koriste u editorima teksta i IDE okruženjima, budući da pregledan, 'precizno iscrtan' i 'strukturiran' tekst predstavlja prednost u navedenim programima.

Sa druge strane, u web dizajnu, upotreba monospace fontova je tipično svedena na prikaz blokova programskog koda (ili tabelarni prikaz teksta i sl), dok se za naslove i tekst u pasusima monospace fontovi koriste prilično retko (u ovom slučaju, "strukturirani tekst" koji deluje kao da je "otkucan na mašini", najčešće nije prednost u estetskom smislu).

Donja slika dodatno potcrtava razliku između proporcionalnih fontova i monospace fontova, ali, ovoga puta su u pitanju dva fonta koji su praktično nastali iz jednog tipa slova (u prva dva primera, na slikama #5 i #6, niske su bile ispisane, ne samo korišćenjem četiri različita fonta, već - četiri različita tipa slova).

Na slici #7, u gornjem delu pojavljuje se običan ('proporcionalni') sans font, a u donjem delu se pojavljuje 'srodni' monospace font.

Iako je očigledno da su znakovi 'idejno slični' (u smislu osnovnih kontura), širina znakova u gornjem fontu varira dok su u donjem fontu svi znakovi iste širine, a primećuju se i serifi na nekoliko mesta (svrha "dodatnih crtica" je, naravno, povećanje čitkosti).

Na sledećoj slici možemo videti nekoliko poznatih monospace fontova:

Tri kategorije fontova koje smo do sada naveli, svakako su važnije u web dizajnu od preostale dve, * ali, posvetićemo dužnu pažnju i preostalim kategorijama.

Familija fontova: cursive

Fontovi iz kategorije cursive obavljaju (nimalo lak :)) zadatak simuliranja ljudskog rukopisa, međutim, tipično se smatra da je upotreba cursive fontova u izradi internet stranica "neozbiljna" (osim kada su u pitanju sajtovi namenjeni mlađoj deci, sajtovi sa zabavnom tematikom i sl).

Pogledajmo nekoliko popularnih cursive fontova.

Familija fontova: fantasy

Kategorija fantasy obuhvata fontove koji odstupaju od jednostavnijih grafičkih formi iz prve tri kategorije (a pri tom se ne uklapaju ni u IV kategoriju).

Najčešće su znaci alfabeta i drugih pisama 'očuvani', ali, prikazani na "fantastičan" način (slova kakva se sreću u SF filmovima i sl), ili su u pitanju slova sa (pre)naglašenim ukrasima, međutim, u ponekim fontovima iz kategorije fantasy, čak su i znakovi alfabeta zamenjeni maštovitim simbolima.

Fantasy fontovi često imaju konkretnu namenu u računarskim programima (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 ("lepota je uvek u 'oku posmatrača'" i sl), navešćemo nekoliko (ne)pisanih pravila za izbor i uparivanje fontova u web dizajnu:

• za telo pasusa najčešće se biraju sans-serif fontovi (s tim da su serifni fontovi i dalje prilično popularan izbor)
• ako se za telo pasusa izabere serifni font, za naslov se po pravilu bira sans font (budući da kombinacije serif-serif tipično deluju "zakrčeno"), međutim ....
• ako se za telo pasusa izabere sans-serif font, za naslov (osim serifnog fonta) takođe može biti izabran i beserifni font, možda čak i isti (za naslove se ionako tipično koristi "boldovana" verzija fonta, što znači da 'kontrast u dizajnu slova', u svakom slučaju postoji)
• za navigacione linkove i ostale funkcionalne elemente stranice (dugmad, oznake i sl), tipično se koriste sans fontovi
• monospace fontovi, kao što je već navedeno, koriste se za prikaz programskog koda (ili za prikaz tabelarnih struktura, simuliranje računarskih terminala na sajtovima i sl), što svakako nisu zadaci za serif i sans-serif fontove (u ostalim okolnostima, monospace fontovi se koriste retko)

Inače, "zakrčenost" koju smo ranije 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 izabranih slova (i uz izbor boja, grafičkih elemenata i sl), sajt šalje određenu podsvesnu poruku korisniku (nešto što se zapaža direktno, 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 sekundi - početna 'iluzija' se vrlo lako "rasprši").

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 i sl), dok - nasuprot navedenom - upotreba monospace fontova i tehničkih crteža kao pozadinskih slika, može sugerisati da je u pitanju posebno ozbiljan sadržaj prepun tehničkih detalja.

Međutim, da se ne bi dešavalo da 'prenos poruka' bude narušen pre nego što je započeo (zbog grubljih tehničkih nedostataka web stranice), potrebno je povesti računa i o mnogim 'tehnikalijama', pre svega o veličini slova i razmacima ....

Veličina fonta

U web dizajnu, veličina fonta zadaje se preko parametra font-size koji praktično predstavlja ukupnu visinu koju određeni znak (potencijalno) može zauzeti u ispisu.

Pri zadavanju veličine fonta, kao osnovna jedinica najčešće se upotrebljava "tipografska tačka" (eng. "point"; 1pt = 1/72", odnosno, 1/72 inča), * i takva jedinica predstavlja tipografski standard koji obezbeđuje (ili, 'bar bi tako trebalo da bude'), da tekst čija je veličina zadata preko jedinice "pt" ima istu veličinu, i kada se odštampa, i kada se prikazuje na različitim uređajima (što je u web dizajnu bitnije).

Za zadavanje veličine fonta često se koristi i jedinica "px" (piksel), ali, takav pristup se ipak smatra 'manje optimalnim'. **

Iako je "načelno"/"tehnički" moguće zadati i širinu slova preko CSS-a ....

		
#selektor_tekst {
	transform: scale(0.5, 1);
}
		
	

... u pitanju je opcija koja se vrlo 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 uticaj i na fontove).

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

Preporučene veličine

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

U poslednje vreme, na većini sajtova, osnovna veličina fonta je 13, 14 ili 15pt, a ponegde i više (što naravno ne ugrožava čitkost tj. čitljivost, ali, veličina teksta u pasusima, veća od 15pt, ipak može delovati 'predimenzionisano').

Š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
• h4 - 1 x visina teksta u pasusima

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

Takođe (kao što smo ranije nagovestili), za naslove se tipično koriste podebljane (tj. "boldovane") verzije fontova, što dodatno doprinosi 'izdvajanju' naslova od ostatka teksta.

Sve navedeno je (razume se) u funkciji čitljivosti, preglednosti i dobrog dizajna (a kasnije ćemo se pozabaviti, u zasebnom poglavlju pred kraj, dodatnim razmatranjima koja se tiču veličina fontova).

Relativne jedinice, em i rem

Iako međusobno različite, jedinice pixel i point su apsolutne, pa (primera radi), ako definišemo marginu od 26px (u nekoliko selektora), zadata margina će uvek imati vrednost 26 piksela, a da li je takav pristup problematičan (ili nije) - zavisi od toga "šta smo tačno hteli da postignemo".

Da pojasnimo detaljnije: ukoliko margina od 26px nije izabrana "zbog 26px", već (na primer), tako da se 'poklopi' sa veličinom fonta od 12pt, može se desiti da u nekom kasnijem trenutku bude potrebno da se promeni veličina fonta - što praktično znači da je potrebno promeniti i margine.

Ukoliko se doslovno radi o jednom atributu i nekoliko selektora, zamena neće biti komplikovana, međutim, u praksi je gotovo sigurno da neće biti u pitanju jedan ili nekoliko CSS selektora (i jedna vrednost za marginu i sl), već (tipično), više desetina atributa (različite vrednosti za margine, padding i sl) - pri čemu atributi pripadaju selektorima koji su "razvučeni" preko nekoliko stotina linija CSS koda (najverovatnije u više datoteka).

Možda sve što smo naveli ne deluje kao (pre)veliki problem, ali, u praksi najčešće jeste problematično - i svakako treba težiti elegantnijem rešenju.

Ukoliko je potrebno da dimenzije određenih funkcionalnih elemenata stranice uvek budu međusobno proporcionalne, najpraktičnije je da proporcije budu definisane preko relativnih jedinica em i rem.

Jedinica em

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

Na primer, link (<a>) unutar paragrafa (<p>), nasleđuje veličinu fonta od paragrafa, pa, ako je potrebno promeniti situaciju, tako da linkovi budu blok elementi i ispisani nešto krupnijim slovima (npr. 20% veća visina), možemo koristiti sledeći kod:

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

Vidimo da su i margine podešene preko jedinice em (s tim da je leva margina podešena preko jedinice px, čisto da se podsetimo da mogućnost kombinovanja jedinica uvek postoji, a često i dobro dođe).

Podešavanje veličina slova preko jedinice em funkcioniše sasvim dobro u praksi, ali - pre ili kasnije - gotovo svaki web dizajner mora se zapitati: gde je (i kako), zapravo definisana veličina fonta na "roditeljskim elementima"?!

U praksi, da bismo elemente stranice postavili u željene proporcije (ali tako da svaki element ima konkretne dimenzije - i da je pri tom jasno odakle takve dimenzije "potiču"), potrebno je malo pažnje i preciznosti, uz poznavanje i uvažavanje elementarnih pravila ....

Jedinica rem

Preko jedinice rem ("root em"), moguće je definisati relativnu veličinu (tj. visinu) elemenata, ali, ovoga puta - ne u odnosu na roditeljski element (što bar ponekad deluje "čudno" / apstraktno / relativno / neodređeno), već - u odnosu na koreni element DOM strukture.

Preostaje dakle pitanje - kako se podešava veličina fonta za root element stranice?

Možemo se osloniti na podrazumevanu vrednost veličine fonta za root element (16px), ali, svakako je praktičnije da se veličina fonta za root element zada 'eksplicitno', preko CSS-a (čime se "staje na rep" svim ostalim podešavanjima koja se zadaju preko jedinica em i rem - posle čega situacija nije više "apstraktna i neodređena", već, skroz jasna).

Na primer, ako se bavimo responzivnim web dizajnom određene stranice, možemo definisati sledeće veličine fonta za root element:

• 11pt za rezolucije manje od 300px po širini
• 12pt za rezolucije od 300px ili više

Pošto je "utemeljena" osnovna veličina fonta za sve rezolucije (to jest, eksplicitno je definisan atribut font-size za root element), veličina fonta za ostale elemente može se definisati preko jedinica rem i em (posle čega, baš kao što smo već naveli, sve veličine postaju jasne i nedvosmislene):

		
:root {
	font-size: 11pt;
}

p {
	font-size: 1rem;
	margin:    0 0 1.12em 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)
	     dobija vrednost 3rem.

		 U nižoj od dve rezolucije: 3rem = 33pt ~= 42px
		 U višoj od dve rezolucije: 3rem = 36pt ~= 48px

	     Pravi smisao navedenih podešavanja
         je sledeći: "margina treba da ima istu
		 visinu kao i naslov - bez obzira na to koju
		 veličinu fonta izaberemo za tagove h1 -
		 i pri tom ne želimo da marginu (nadalje)
		 podešavamo 'ručno'".
	*/
}

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

Pri promeni rezolucije (uz gore navedena podešavanja), ne moramo (više) brinuti o veličini fontova, margina i sl.

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.

Razmak između redova zadaje se preko CSS atributa line-height koji u browserima ima podrazumevanu vrednost 1.4, a vrednosti koje se u modernom web dizajnu tipično koriste u pasusima (ali i za druge elemente), u rasponu su 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, pri čemu se tipično koristi jedinica em (u ovom slučaju može se reći: 1em = 100% širine znaka).

Podešavanje fontova preko CSS-a

Pošto smo se upoznali sa teorijom (uz koji usputni primer sa CSS kodovima), u ovom poglavlju ćemo se osvrnuti detaljnije na nekoliko najuobičajenijih CSS atributa koji se tiču podešavanja fontova (kao i na nekoliko dodatnih 'tehnikalija').

Osnovni CSS atributi (za podešavanje fontova)

Uzmimo za primer sledeće selektore, preko kojih se zadaju osobine fontova za pasuse i naslove h1, h2 i h3:

		
p {
	font-family: Roboto, Arial, sans-serif;
	font-size:   1rem;
	font-weight: normal;
	margin:      0 0 1.25rem 0;
	line-height: 1.8;
}

h1 {
	font-family: Raleway, Arial, sans-serif;
	font-size:   3rem;
	font-weight: bold;
	margin:      0 0 2rem 0;
	color:       #333;
}

h2 {
	font-family: Raleway, Arial, sans-serif;
	font-size:   1.5rem;
	font-weight: bold;
	margin:      0 0 1.5rem 0;
	color:       #555;
}

h3 {
	font-family: Raleway, Arial, sans-serif;
	font-size:   1.25rem;
	font-weight: bold;
	margin:      0 0 1.25rem 0;
}
		
	

Ako pogledamo bilo koji od selektora, mogu se zapaziti tri najvažnija atributa:

• font-family - izbor fonta, odnosno familije fontova
• font-size - veličina fonta (sa podešavanjima smo se detaljno upoznali u prethodnom poglavlju)
• font-weight - debljina linija na znakovima (tipično se zadaje kao normal ili bold, međutim, ima i drugih imenovanih opcija, a mogu se koristiti i brojčane vrednosti (u narednim odeljcima, upoznaćemo se detaljnije sa navedenim opcijama))

Kao vrednost atributa font-family navodi se bar jedan font, s tim da je mnogo praktičnije navesti bar dva.

Pre svega (empirijski gledano), 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, razmotrićemo šta se dalje događa ukoliko font "ipak" ne bude pronađen.

Ukoliko browser ne pronađe prvi font koji je naveden, pokušaće da pronađe drugi, treći .... n-ti, a ukoliko ne pronađe nijedan od navedenih fontova, browser će za prikaz iskoristiti podrazumevani font (na primer, na operativnom sistemu Windows, font Times New Roman), pri čemu je problem u tome što podrazumevani font najverovatnije ne podseća na font koji je predviđen za prikaz.

Međutim, fontovi (u gornjim primerima), nisu navedeni nasumično: prvi font se može čuvati na serveru i učiniti dostupnim browseru (preko podešavanja koja ćemo pokazati u narednom odeljku) - što znači da je gotovo sigurno da će biti učitan, a drugi navedeni font je dobro poznati font koji se pojavljuje kao deo osnovne instalacije operativnog sistema Windows (i osim ako se neki korisnik nije "potrudio" da ručno obriše datoteku u kojoj je font zapisan, font će biti dostupan).

Treća stavka, koja predstavlja familiju fontova, najbitnija je od svih u smislu obezbeđivanja najpovoljnije moguće alternative ("ako baš nema prethodno navedenih fontova, 'mora' * biti bar jednog sans fonta na celom sistemu", i to je mehanizam koji će obezbediti da prikaz elementa bar okvirno podseća na originalnu zamisao web dizajnera).

Ipak (kao što smo naveli), može se postići da prvi navedeni font - u iole 'normalnim i uobičajenim' uslovima učitavanja stranice - bude izabran odmah ....

Korišćenje lokalnih fontova sa servera

Da bi određeni font postao dostupan browserima koji pristupaju stranici, * prvo je potrebno preuzeti TTF ili OTF datoteku ** sa interneta i kopirati datoteku u folder fontovi *** (koji se nalazi u istom folderu kao i datoteka index.html), nakon čega treba dopuniti CSS kod odgovarajućim @font-face selektorom (koji se navodi pre drugih selektora u kojima 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 (zarad ažurnosti - uvek pretpostavite da nije).

Podešavanje debljine linija i širine znakova

Često se dešava da se određeni tip slova pojavljuje u različitim varijacijama, u smislu debljine linija i/ili širine znakova, pri čemu je do nedavno važilo pravilo da se svaka varijacija zapisuje kao zaseban font (praktično, kao zasebna datoteka).

Uzmimo za primer da osnovni font (sa standardnom širinom znakova i standardnom debljinom linija), ima naziv Font_XY (ili Font_XY_Regular i sl), pa - ako se varijacije osnovnog tipa slova zapisuju preko zasebnih datoteka - mogli bi postojati sledeći fontovi (navešćemo samo nekoliko mogućih kombinacija):

• Font_XY_Bold (deblje linije)
• Font_XY_Condensed_ExtraBold (uži znakovi; linije još deblje u odnosu na "Bold" varijantu)
• Font_XY_ExtraLight (veoma tanke linije, ali, ne i najtanje moguće (postoji i varijacija "Thin"))

Kada je u pitanju debljina linija na slovima, u web dizajnu se tipično pravi razlika samo između regularnih fontova koji se koriste za tekst u pasusima (debljina "normal"), i podebljanih fontova koji se koriste za naslove/podnaslove i sl (debljina "bold"), ali, u CSS-u se (zapravo) prepoznaje i koristi devet različitih imenovanih debljina fontova, kojima odgovaraju različite brojčane vrednosti CSS atributa font-weight:

Ukoliko definišemo sledeći CSS kod (i pod uslovom da je font "Font_XY_ExtraLight" prisutan u odgovarajućem direktorijumu u okviru projekta) ....

		
#element_xy {
	font-family: Font_XY_ExtraLight, Font_XY, sans-serif;
	font-size:   1.5rem;
	font-weight: 200;
}
		
	

.... navedenom elementu biće pripisana širina znakova 200.

Kada je u pitanju zadavanje širine znakova (što se može izvesti preko atributa font-stretch), broj imenovanih opcija je za nijansu manji u odnosu na situaciju sa debljinom linija - postoji sedam imenovanih širina znakova (u donjim primerima, debljina linija u svim redovima je 300 tj. "Light"):

Ukoliko definišemo sledeći CSS kod (i pod uslovom da je font "Font_XY_ExtraLight_Condensed" prisutan u odgovarajućem direktorijumu) ....

		
#element_xy {
	font-family:  Font_XY_ExtraLight_Condensed, Font_XY, sans-serif;
	font-size:    1.5rem;
	font-weight:  200;
	font-stretch: 200;
}
		
	

.... slova u tekstu kome je pripisan id element_xy, biće "uzana" (i u smislu debljine linija, i u smislu širine znakova).

Kao što smo videli u gornjim primerima, ukoliko se koriste standardni, pojedinačni fontovi, "računica" je jasna: za definisanje svih debljina linija potrebno je devet različitih fontova, * dok je za definisanje svih širina znakova potrebno sedam fontova * (i pri tom je neophodno da odgovarajući fontovi budu dostupni u direktorijumu sa fontovima).

Ukoliko je (iz nekog razloga), potrebno koristiti sve moguće kombinacije, aritmetika je još "nemilosrdnija" i mora se upotrebiti nekoliko desetina fontova (9 x 7 = 63 datoteke)!

Međutim, postoji i alternativni pristup: umesto zasebnih fontova (tj. datoteka), mogu se koristiti i tzv. varijabilni fontovi ....

Varijabilni fontovi

Varijabilni font je (u najpraktičnijem smislu), pojedinačna datoteka koja sadrži sve informacije neophodne za definisanje svih debljina linija, kao i svih širina znakova određenog tipa slova, pri čemu je moguće postići i razne druge efekte (koji se ne mogu postići sa "običnim" fontovima).

Kada kažemo "sve" (debljine i širine), na posredan način smo nagovestili da postoje i dodatne opcije u odnosu na imenovane debljine linija i širine znakova koje smo prikazali u prethodnom poglavlju (praktično: nivo kontrole nad parametrima je osetno veći u odnosu na standardne fontove, to jest, mogući su "sitniji koraci" u podešavanjima).

Pogledajmo (preko donjeg formulara), kako sve funkcioniše u praksi.

		
@font-face {
    font-family:  'RobotoFlex-Variable';
    src:          url('./fontovi/RobotoFlex-Variable.ttf')
                  format('truetype');
    font-display: swap;
}

#selektor {
    font-family: RobotoFlex-Variable, sans-serif;
    font-weight: 150;
    font-size:   5rem;
    font-variation-settings: 'slnt' 0,
                             'wdth' 100;
}
		
	

Primer deluje zanimljivo (i 'obećavajuće'), ali, valja se zapitati i da li varijabilni fontovi imaju nedostatke?!

U opštem smislu - može se reći da nemaju (iako je u pitanju tehnologija novijeg datuma, varijabilni fontovi su već neko vreme dovoljno dobro podržani u browserima).

Međutim, iako je sama tehnologija dovoljno 'zrela' i upotrebljiva, u 'realnim'/svakodnevnim situacijama mogu se javiti problemi sa konkretnim varijabilnim fontom - shodno specifičnim zahtevima.

Naime, ne podržavaju svi varijabilni fontovi sve opcije koje smo videli u gornjem primeru (i još nekoliko opcija koje inače postoje, ali se znatno ređe koriste (pa ih zato nismo prikazali)).

Ako (recimo), konkretan varijabilni font ne podržava zadavanje širine znakova (kao što je slučaj sa varijabilnom verzijom fonta Open Sans, koji inače koristimo za sajt koji čitate) - ne vredi ni da pokušavamo da zadamo širinu znakova preko CSS atributa. :)

Takođe, varijabilni fontovi nisu mali (u smislu memorijskog zauzeća), i u praksi se može primetiti da varijabilna verzija fonta tipično zauzima (primetno) više prostora od "Regular" i "Bold" verzije zajedno.

Podešavanja fontova kao deo dizajna web stranice

Za kraj smo ostavili kraću diskusiju o tome kako se pravila koja smo do sada naveli primenjuju u izradi sajtova.

Pre svega, sve odlike fontova koje smo do sada pominjali, nalaze se (ili, bar bi trebalo da se nalaze), u službi dizajna, međutim, dizajn nije samo "lepota", već je cilj dobrog dizajna - postizanje najbolje moguće ravnoteže između funkcionalnosti (tj. upotrebljivosti), i estetske dopadljivosti (tj. 'lepote'), a oblici i veličine slova (i sva ostala podešavanja) - treba da pomognu u ostvarivanju navedenog cilja.

Fontovi koji se koriste za tekst pasusa (počnimo od najvažnijeg), treba da budu pre svega čitki, to jest, "body fontovi" svakako mogu biti i "lepi" i dopadljivi, ali - tako da ne skreću pažnju na sebe i tako da budu u funkciji što lakšeg usvajanja predstavljenih informacija.

Fontovi koji se koriste za naslove i podnaslove mogu biti ponešto "lepši" i "posebniji" od osnovnog fonta (takođe bez 'prevelikog skretanja pažnje na sebe'), a isto pravilo važi i za fontove koji se koriste za interaktivne elemente na stranici (dugmići, linkovi i sl).

Međutim, u sveukupnom utisku koji stranica ostavlja na posetioca, tip slova nije jedino o čemu treba voditi računa, odnosno: veoma važnu ulogu igra i veličina fonta na različitim funkcionalnim elementima stranice, pri čemu preporučene veličine i proporcije koje smo ranije naveli, odgovaraju zahtevima dobrog dizajna.

Na primer, 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 i h3 naslove (ako ih ima u vidnom polju), čime se kreira početna predstava o strukturi teksta, odnosno, predstava o tome "odakle treba započeti sa čitanjem i kuda posle nastaviti".

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

Ako niste sigurni da li navedena pravila imaju smisla, probajte da zamislite šta bi se dogodilo kada bismo se oglušili o pravila, to jest, šta bi bilo kada bismo npr. podesili da h3 (pod)naslovi budu veći od h1 naslova, a h1 elementi manji od teksta pasusa (i sl).

Ili, još bolje, probajte sami: preko klizača na donjem formularu, izaberite za svaki element kategoriju fonta i veličinu - 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, "donekle sažeti" pravila koja smo do sada navodili:

• na pravilno dizajniranoj stranici, kada se stranica posmatra sa udaljenosti od dva ili tri metra (u kom slučaju se ne može čitati tekst u pasusima), lako se zapaža glavni naslov, i razaznaje se ostatak strukture (položaj podnaslova, pasusa, navigacionih linkova i sl)
• kada se stranica posmatra sa uobičajene udaljenosti (~0.5m), veličina teksta u pasusima je umerena i tekst je jasno čitljiv, a razlike u veličini između teksta pasusa i naslova/podnaslova "ne štrče" (odnosno: iako su razlike u veličini fontova jasno uočljive - istovremeno 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 vrlo bitno da sva pravila o kojima smo govorili (čitkost/čitljivost teksta, uočljivost funkcionalnih elemenata i sl), budu uvažena bez obzira na to da li se sajt posmatra na velikom desktop monitoru ili na omanjem ekranu telefona, što je zadatak poddiscipline web dizajna koja popularno nosi naziv "responzivni web dizajn" (čime ćemo se podrobnije baviti uskoro, u zasebnom članku) ....