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.
- Posted in:
- CSS
- Tags:
- CSS,
- font-weight,
- line-height,
- tipografie
pentru line-height merge si cu procente. acu nu stiu sigur daca unitatea de masura default e procentul si mi-e lene sa caut
Merge și cu procente, merge și cu pixel sau em. Merge cu orice unitate. Doar că-i recomandat să fie fără nici un fel de unitate
http://codepen.io/iamntz/pen/XbJKEV (demo din MDN)
Lectură suplimentară: 1 2 3