Fontovi u web dizajnu (osnove tipografije)

Uvod

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

Č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 prenese vizuelnu informaciju o izgledu slova na adekvatan način, čitaocu je omogućeno da, na kraju, bez napora razume i sadržaj teksta.

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 dozvoljavaju 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 veoma uobičajeno da se termin font u svakodnevnoj komunikaciji 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 pojma 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 odnosi se na kolekciju metalnih pločica sa ugraviranim simbolima (koji se koriste pri pravljenju otiska), 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, na web sajtovima i, naravno - odš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

Nazivi koji smo naveli su na engleskom jeziku - onako kako se koristite u CSS-u (i u web dizajnu inače), a u sledećim odeljcima, osvrnućemo se na 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.

Slika 1. - Serifne fontove odlikuje prisustvo "serifa", poprečnih crtica na krajevima osnovnih linija slova (ovakvi ukrasi, iako možda deluju 'nepotrebno', doprinose čitljivosti teksta).

Sa serifnim fontovima najčešće se susrećemo u offline publikacijama (knjigama, dnevnoj štampi i sl), pogotovo u starijim izdanjima, ali, familija serif svakako je 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).

Slika 2. - Primeri serifnih fontova koji se često koriste u web dizajnu.

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

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

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.

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

Da se vratimo usput na primere za raspoznavanje sličnih znakova koje smo na početku pomenuli: samo napišite englesku reč "Illusion" (uzmimo jedan od najpoznatijih primera), i posmatrajte kako se sans fontovi "muče" sa ispisom, dok serifni fontovi nemaju takav problem.

Poprečne crtice na serifnim fontovima možda jesu previše "kitnjaste" za današnje pojmove, ali (kao što vidimo) - i te kako povoljno utiču na čitljivost (osim u slučajevima kada su serifi previše naglašeni, pa prikaz teksta postane "zakrčen").

Međutim, u praksi, čitljivost sans-serif fontova (u gornjem primeru i sličnim situacijama), najčešće nije nimalo dovedena u pitanje, jer ljudi ne procesiraju pročitani tekst znak-po-znak, već odjednom cele reči (pa čak i veće blokove teksta).

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.

Slika 5. - Šematski prikaz razlike između proporcionalnih fontova i monospace fontova - verzija #1 (niske su različite, ali - širina je približno ista).

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

Slika 6. - Šematski prikaz razlike između proporcionalnih fontova i monospace fontova - verzija #2 (niske su iste, ali - širina je očigledno različita).

Monospace fontovi su od posebnog značaja za programere i web dizajnere, jer - zbog velike preglednosti - upravo se fontovi iz kategorije monospace koriste u editorima teksta i IDE okruženjima.

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 standardni tekst u pasusima, monospace fontovi koriste prilično retko (u praktičnom smislu: tekst deluje previše "strukturirano", kao da je otkucan na mašini).

Tekst ispisan korišćenjem znakova koji se uklapaju u pravilnu "nevidljivu matricu", svakako je dobar izbor za pregled programskog koda ....


	/* ------------------------- */
#include <stdio.h>
int main() {
	printf("Dobar dan! :)");
}
/* ------------------------- */

.... kao i drugog teksta u kome prostorni raspored znakova može biti od značaja (pravilna geometrijska struktura prikazanog teksta omogućava lakše sagledavanje pravilnosti (ili nepravilnosti) u programskom kodu (pravilno ili nepravilno uvlačenje blokova koda i sl)), ali, (ne)pisana pravila estetike sugerišu da je tekst ispisan slovima sa promenljivom širinom, estetski dopadljiviji (i deluje prirodnije), i stoga su "proporcionalni" fontovi (serif i sans-serif), najčešće bolji izbor za prikaz teksta u kome pravilan raspored znakova nema praktičan značaj (naslovi, regularni pasusi, citati, fusnote i sl).

Pomenimo takođe da ranija konstatacija o tome da tekst koji je ispisan upotrebom monospace fontova, deluje kao da je "otkucan na mašini", nije (naravno) slučajna, budući da je oblik prvih monospace fontova doslovno preuzet sa različitih modela nekada popularnih pisaćih mašina (na kojima korišćenje fontova proporcionalne širine praktično nije bilo izvodljivo), a kao što verovatno i sami očekujete, "u stara vremena, na starim pisaćim mašinama", korišćeni su serifni fontovi - zbog čega su i stariji monospace fontovi bili serifni, kao na primer font Courier (verovatno najčuveniji monospace font), čiju noviju verziju možemo videti na jednoj od slika ispod.

(Nasuprot starim monospave fontovima, moderni monospace fontovi postoje u različitim varijacima po pitanju prisustva ili odsustva 'serifa'.)

I naravno - ponekad (u smislu "dizajnerske odluke", u cilju definisanja određenog stila i sl), može se udesiti da tekst deluje "kao da je otkucan na mašini". :)

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

Slika 7. - Dve varijacije istog fonta (monospace i "ne-monospace" varijanta).

U gornjem delu slike korišćen je običan ('proporcionalni') sans font, a u donjem delu slike, monospace font.

Iako su znakovi (u smislu svojih osnovnih kontura), očigledno veoma slični, š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 donjoj slici možemo videti nekoliko poznatih monospace fontova:

Slika 8. - Primeri različitih monospace fontova: iako deluje da je Inconsolata serifni font, a Roboto Mono beserifni, oba fonta su zapravo "delimično serifna" (kao što smo već videli na gornjoj slici). I jedan i drugi font imaju serife samo na specifičnim znakovima, kao što su mala i velika slova "I" i "L".

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 zadatak simuliranja ljudskog rukopisa (koji, reklo bi se, nije nimalo lak :)), 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.

Slika 9. - Cursive fontovi: dok prva dva fonta imitiraju ljudski rukopis, poslednji font prikazuje rukopis kakvim se malo ko može pohvaliti.

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.

Slika 10. - Fantasy fontovi (iz grupe "delimično fantastičnih" fontova).

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 (ali, serifni fontovi su 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).

Pogled iz druge perspektive ....

Pravila koja smo naveli nisu "uklesana u kamenu", već su nastala empirijski (kroz praksu), ali, uglavnom "imaju smisla".

Međutim, postoje naravno i odstupanja i izuzeci: prilično 'zakrčeni' sans fontovi, serifni fontovi koji (uopšte) ne deluju 'zakrčeno', monospace fontovi koji ne deluju 'strukturirano i neprirodno' kada se upotrebe za naslove i pasuse, cursive fontovi koji nisu 'neozbiljni' (kao i mnogi drugi primeri).

Takođe (kad smo već kod iskustvenih zaključaka), deluje da su licencirani fontovi (to jest, oni koje treba platiti), u većini situacija bolje dizajnirani od open-source fontova (ili besplatnih fontova), ali, ni u toj diskusiji situacija nije "crno-bela", jer postoji i čitava "gomila" licenciranih fontova koji nisu adekvatno dizajnirani, kao naravno i veliki broj kvalitetno dizajniranih open-source fontova.

Jasno je da u izboru fontova i u dizajnu uopšte ("kad se sve sabere i oduzme"), najveći značaj na kraju imaju: dobra procena, zdrav razum i iskustvo.

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), mora se 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 jedinica se tipično upotrebljava "tipografska tačka" (eng. "point"; 1pt = 1/72", ondosno, 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. **

Šta tačno označava atribut font-size?

Pošto slika (u krajnjoj liniji) vredi više od opisa, pogledajmo usput šta tačno podrazumeva visina fonta (za primer ćemo uzeti visinu fonta ~16px, odnosno, 12pt):

x-height

Visina malog slova 'x' - posmatrana u odnosu na ukupnu visinu fonta - popularno se naziva "x-height" * i smatra se da pozitivno utiče na čitljivost fonta, u smislu: veći x-height = bolja čitljivost (pri čemu se svakako podrazumeva da mora postojati jasno vidljiva razlika u visini velikih i malih slova).

Na slici, x-height iznosi 9px.

* U najpraktičnijem smislu, u pitanju je 'osnovna visina malih slova' koja nemaju 'ascendere' i 'descendere', tj. gornje i donje produžetke (na većini fontova, x-height se poklapa sa visinom slova 'x', 'v', 'w' i 'z', dok "zaobljena" slova kao što su 'o' i 'e', imaju neznatno veću visinu od znaka 'x').

Iako se i širina slova, "načelno"/"tehnički", može zadavati preko CSS-a ....

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

Slika 11. - Skaliranje teksta po širini (nije u pitanju standardna opcija za direktno zadavanje širine teksta, već, opcija koja se tipično koristi za slike).

... 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 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, za naslove (kao što smo nagovestili), tipično se 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, rem i em

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 znači da je potrebno promeniti i margine.

Ukoliko se doslovno radi o jednom atributu i nekoliko selektora, zamena neće biti kompllikovana, međutim, u praksi je gotovo sigurno da neće biti u pitanju nekoliko 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 (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;
}

Slika 12. - CSS selektor u kome se koristi jedinica "em".

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

Slika 13. - CSS selektor u kome se koriste jedinice "rem" i "em" (uz prethodno zadatu veličinu fonta za root element, za sve rezolucije).

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

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

Slika 14. - CSS selektori sa osnovnim podešavanjima za fontove.

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 (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 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 obezeđ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 potrebno 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;
}

Slika 15. - Podešavanje selektora "@font-face", koji (nadalje) omogućava korišćenje fonta sa servera (sa koga se pokreće sajt).

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 skoro 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 kao zasebni fontovi - 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 ("normal") - koji se koriste za tekst u pasusima, i podebljanih fontova ("bold") - koji se koriste za naslove/podnaslove i sl.

Međutim, u web dizajnu se (zapravo) prepoznaje i koristi devet različitih (imenovanih) debljina fontova, kojima odgovaraju različite brojčane vrednosti CSS atributa font-weight:

100 - "Thin"

200 - "Extra Light"

300 - "Light"

400 - "Normal"

500 - "Medium"

600 - "Semi Bold"

700 - "Bold"

800 - "Extra Bold"

900 - "Black"

Kada je u pitanju širina znakova, situacija je tipično definisana na manje precizan način (posmatrano u odnosu na situaciju sa debljinom linija), ali, ukoliko su se dizajneri fonta "potrudili", možemo očekivati sledeće varijacije (debljina linija je u svim redovima 300, tj. "Light"):

"Illusion"	- Ultra Condensed
"Illusion"	- Condensed
"Illusion"	- Semi Condensed
"Illusion"	- Regular
"Illusion"	- Semi Expanded
"Illusion"	- Expanded
"Illusion"	- Ultra Expanded

Ukoliko se koriste standardni, pojedinačni fontovi, "računica" je jasna: za definisanje svih debljina linija, potrebno je devet različitih fontova, a za definisanje svih širina znakova - sedam.

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

Varijabilni fontovi

Umesto zasebnih fontova (tj. datoteka), postoji i opcija korišćenja tzv. varijabilnih fontova.

U pitanju je tehnologija novijeg datuma koja podrazumeva da se preko jedne (TTF/OTF i sl) datoteke, mogu definisati sve debljine linija, kao i sve širine znakova * i (takođe) - moguće je postići i razne druge efekte koji se ne mogu postići sa "običnim" fontovima.

* Kada kažemo "sve", mislimo na to da postoje i dodatne opcije u odnosu na "imenovane" debljine linija i širine znakova koje smo videli u prethodnom odeljku (varijabilni fontovi omogućavaju osetno veći nivo kontrole nad parametrima u odnosu na standardne fontove, to jest, "sitnije korake" u podešavanjima).

Osnovni ("ne-varijabilni") fontovi, tipično nude izbor između (najviše) devet debljina linija i (najviše) sedam širina znakova (što smo videli u prethodnom odeljku).

Varijabilni fontovi dozvoljavaju da se izaberu i "međuvrednosti" (kojih gotovo nikada nema kod "ne-varijabilnih" fontova).

Na primer: debljina linija (font-weight), može se zadati i kao 214 (a ne samo kao 200 ili 300, to jest, može se izabrati vrednost između "Extra Light" i "Light"), pri čemu isto važi i za širinu znakova i druge parametre.

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

CSS:

Probni tekst ....

Weight: 150

Size: 5.0rem

Slant: 0

Width: 100

		
@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 (već neko vreme su 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 svakako 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, a 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".

Naslov primera - h1

Ovo je odeljak sa tekstom (standardni pasus sa nekoliko rečenica). Prvu rečenicu smo već ispisali, a na ovom mestu se završava druga. 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 sada - 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);
}

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

Autor članka Nikola Vukićević Za web portal codeblog.rs

Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.