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 pojam "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 sa time šta dva navedena termina zapravo označavaju.

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 - 'ono što na kraju vidimo'), "font" predstavlja 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).

Kategorije (familije) fontova

U tipografiji (oblasti grafičkog dizajna koja se bavi oblikom i osobinama slova), 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, objašnjenja i osvrt na tehničke osobine različitih kategorija (odnosno familija) fontova.

Familija fontova: serif

Familiju tzv. serifnih fontova odlikuje tradicionalan oblik slova, koja na krajevima osnovnih linija sadrže male poprečne crte ("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.

Pri biranju kombinacija fontova za (pod)naslove i pasuse, postoji nepisano pravilo da se serifni fontovi biraju za samo jedan od dva navedena elementa.

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 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

Kategoriju fontova monospace odlikuje osobina 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').

Pogledajmo 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, u navedenim okolnostima, pregledan, 'precizno iscrtan' i 'strukturiran' tekst predstavlja prednost).

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 korišćen je običan ('proporcionalni') sans font, a u donjem delu je korišćen monospace font.

Iako su znakovi očigledno veoma 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 čitljivosti).

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)

"Zakrčenost" koju smo pominjali, 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' će vrlo lako biti "raspršena").

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 i 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 (visina) 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 kada se odštampa, kao i kada se prikazuje na različitim uređajima (što je u web dizajnu bitnije).

Za zadavanje veličine fonta, može se koristiti i jedinica "px" (piksel), ali, takav pristup se ipak ne smatra 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 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, mnogi sajtovi 'naginju' ka veličini od 13pt, pa čak i 14 ili 15pt (ponegde i više), što naravno ne ugrožava čitljivost, ali, veličina osnovnog 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 ~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.

Sve navedeno je (razume se) u funkciji čitljivosti, preglednosti i dobrog dizajna (a dodatnim detaljima vezanim za veličine fontova, posvetićemo zaseban odeljak pred kraj).

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: 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 kao što su 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 se mora 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 slova za root element (16px), ali, svakako je praktičnije da se veličina fonta za root element zada preko CSS-a (čime se "staje na rep" svim ostalim podešavanjima veličina fontova 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:

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

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 font - 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).

Pošto smo se upoznali sa teorijom (uz koji konkretan primer sa CSS kodovima), osvrnućemo se detaljno na najuobičajenije CSS atribute koji se tiču podešavanja fontova ....

Podešavanje fontova preko CSS-a

Uzmimo za primer nekoliko selektora, 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 prethodnim odeljcima)
• font-weight - debljina linija na znakovima (tipično se zadaje kao normal ili bold, međutim, vrednost može biti i brojčana (sa čime ćemo se detaljnije upoznati u narednim odeljcima))

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) - tako 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

Ukoliko je neophodno da se određeni font učini dostupnim browserima koji pristupaju stranici, potrebno je: preuzeti TTF ili OTF datoteku * sa interneta, kopirati datoteku u folder fontovi ** (koji se nalazi u istom folderu kao i datoteka index.html), i potom treba dopuniti CSS kod odgovarajućim @font-face selektorom (koji se navodi pre selektora 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).

Debljina linija i širina 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:

Kada je u pitanju širina znakova, broj imenovanih opcija je za nijansu manji u odnosu na situaciju sa debljinom linija (debljina linija je u svim redovima 300, tj. "Light"):

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.

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 fonta, 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 odeljku (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, 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, problem može nastati sa konkretnim (varijabilnim) fontom - shodno konkretnim zahtevima (u određenoj situaciji).

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, koju 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 sajta

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 čitljivi.

Hoćemo reći: "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, međutim, i dalje taman toliko da se jasno izdvajaju od sadržaja, ali - bez prevelikog skretanja pažnje na sebe.

Ista pravilo važi i za fontove koji se koriste za ostale funkcionalne elemente na stranici (dugmići, linkovi i sl).

Veličina fonta u svemu takođe igra veoma važnu ulogu, pri čemu preporučene veličine i proporcije koje smo ranije naveli, odgovaraju zahtevima dobrog dizajna: 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), što podsvesno upućuje čitaoca na strukturu teksta, odnosno, na to "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 se dvoumite oko toga 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 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, "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 (gde su podnaslovi, gde su pasusi, navigacioni linkovi 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" (razlike u veličini fontova su jasno uočljive, ali, 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 (č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, i upravo je to tema kojoj ćemo u skorije vreme posvetiti zaseban članak ....