Spatierea textului

Acum ca stiti cum sa descrieti diferitele parti ale unei litere, urmatorul pas este sa fiti in stare sa definiti si sa ajutati spatiile dintre litere. Am mentionat inainte ca multe decizii in materie de tipografie sunt bazate pe spatiere. Acest lucru a fost intotdeauna adevarat in ceea ce priveste literele tiparite si au devenit aplicabile caracterelor pentru web odata cu aparitia CSS. Indiferent daca vorbim despre folosirea caracterelor pentru mediul tiparit sau pentru web, exista doua directii pe care le pute controla spatierea: orizontala si veritcala.

Spatierea orizontala

Kerning-ul si tracking-ul sunt doi termeni pe care ii veti auzi deseori in conversatiile legate de spatierea orizontala a literelor. Kerning este proceul de ajustare a spatiului intre literele individuale. Deseori, cand veti lucra cu caracterele, veti observa doua litere care par ori prea aproape ori prea departe. Cele mai multe fonturi includ un set de reguli care determina spatierea intre anumite litere ale alfabetului. Kerning-ul intre litere “Wa”, de exemplu – si este – mult mai strans decat spatierea dintre “WV”. De cele mai multe ori, regulile din fonturi sunt suficiente pentru a face textul lizibil. Daca nu, puteti ajusta perechile individuale de litere cu ajutorul programului preferat de prelucrare a imaginilor. Figra de mai jos arata exemple de text fara kerning aplicat, kerning automat sau kerning ajustat manual.

 

Nu este posibil sa ajutasti kerning-ul litera cu litera in cazul textului dintr-o pagina web. Ceea ce puteti face este sa modificati proprietatea CSS letter-spacing, cunoscuta in lumea tiparului ca ajustarea tracking-ului fontului. Ca si kerning-ul, tracking-ul ajusteaza spatierea orizontala intre caractere, dar se aplica spatiului dintre fiecare litera. Daca vreti ca textul dumneavoastra sa dea senzatie mai mare de deschidere, sa fie aerisit, incercati sa adaugati putina spatiere intre caractere cum am facut noi in figura de mai jos.

 

O alta optiune de spatiere orizontala in CSS este oferita de spatierea word-spacing. Aceasta poate lua valori care reprezinta o distanta pozitiva sau negativa sau cuvantul cheie normal. Dupa cum va asteptati, aceasta influenteaza spatiul gol dintre cuvinte.

Spatierea verticala

In limbajului designului tiparit, spatiul veritcal dintre liniile de text este cunoscut ca interliniere(leading). Acest termen vine din zilele de inceput ale textelor tiparite, cand benzi goale de plumb era folosite pentru a separa randurile de litere din metal. Cand nu erau adaugate distantiere, randurile erau considerate a fi “solide”. Textul care include spatiu vertical intre randuri este mult mai usor de citit.Dupa cum puteti vedea in primul paragraf din imaginea de mai jos, spatierea implicita dintre randurile de text este prea mica. Ideal, veti vrea ca inaltimea randului de text sa fie o data si jumatate fata de marimea caracterelor; daca aveti text de 12px, la 18px randul de text este lizibil. In al doilea paragraf, am ajustat proprietatea CSS line-height la 1.5em. Un em este o unitate CSS care masoara marimea unui font, de la inaltimea majuscului fontului pana la marginea de jos a prelungirii inferioare. Initial, un em era egal cu latimea literei mari de tipar M, de unde ii vine si numele.