Despre tipografie

Văd aceeași greșeală de atât de multe ori încât simt că este nevoie de o însemnare pe blog. Nu că asta ar schimba multe, dar… să încercăm.

Sunt doi factori ce contribuie foarte mult la lizibilitatea unui text: font-weight și line-height.

font-weight

Până acum vreo doi ani, majoritatea fonturilor comune știau de două unități: normal și bold. Sau 400 și 700. Dar cum webfonts au devenit tot mai comune, s-au dezvoltat foarte mult și restul mărimilor (de la 100 la 900, în increment de 100). Prin urmare, un font-weight diferit de 400 (sau normal) pe conținut ar putea genera un text mai dificil de citit:

În stânga este textul la font-weight:300, în dreapta este font-weight:400. (sursa)

O problemă suplimentară – dincolo de lizibilitate – apare la anumite fonturi, ce nu sunt complete: nu conțin diacriticile românești pe toate variantele. Și apar situații în care textul este afișat cu font-weight:300, dar diacriticile apar boldate.

Păi și când ar trebui să folosești altceva în afară de normal și bold?

Varianta sigură? Niciodată! Varianta mai puțin radicală? Doar atunci când ai un motiv bine întemeiat. Adică așa cum folosești bold sau italic pentru a scoate în evidență ceva, la fel ar trebui să folosești și un font-weight diferit de normal. Varianta cea mai comună? Titluri.

line-height

Despre line-height am scris acum mai bine de cinci ani. Lucrurile rămân valabile, cu o completare: am tot observat că se practică foarte mult specificarea unei unități atunci când se setează line-height. Adică lucruri de genul line-height:26px sau line-height:1.3em. Chiar dacă nu este neapărat o practică greșită, este mult mai util să se specifice o valoare fără nici o unitate, de exemplu line-height:1.5. Asta înseamnă că va avea întotdeauna o valoare relativă la dimensiunea fontului.