Designul web a împrumutat întotdeauna principii și definiții din lumea designului grafic și tipărit. Acest lucru este valabil mai ales atunci când vine vorba de tipografia web și de modul în care obținem formularele de scris pe paginile noastre web. Aceste paralele nu sunt întotdeauna între 1 și 1 traduceri, dar cu siguranță puteți vedea unde o disciplină a influențat cealaltă. Acest lucru este evident mai ales atunci când luați în considerare relația dintre termenul tradițional de tipografie "de conducere" și proprietatea CSS cunoscut sub numele de "înălțime linie".
Scopul conducerii
Când oamenii foloseau manual litere din metal sau din lemn pentru a crea tipografia pentru o pagină tipărită, bucăți subțiri de plumb au fost plasate între linii orizontale de text pentru a crea distanțe între aceste linii. Dacă v-ați dorit un spațiu mai mare, ați introduce mai multe bucăți de plumb. Acesta este modul în care termenul "conducere" a fost inventat. Dacă ați căutat termenul de "conducere" într-o carte despre designul tipografic și principalele, ar fi citit ceva în sensul - "distanței dintre liniile de bază ale liniilor succesive de tip".
Conducerea în Web Design
În designul digital, termenul de conducere este încă folosit pentru a se referi la distanța dintre liniile de text. Multe programe utilizează acest termen exact, chiar dacă conducerea reală nu este în mod evident folosită în programele respective. Acesta este un exemplu excelent de noi forme de proiectare care împrumută idei de la cele tradiționale, chiar dacă implementarea exactă a acestui principiu sa schimbat.
Când vine vorba de designul web, nu există nici o proprietate CSS pentru "conducere". În schimb, proprietatea CSS care ar ocupa această afișare vizuală a textului se numește linie înălțime. Dacă doriți ca textul dvs. să aibă un spațiu suplimentar între liniile orizontale de text, ați folosi această proprietate. De exemplu, spuneți că doriți să creșteți înălțimea liniei pentru toate paragrafele din interiorul elementului
Aceasta ar fi acum de 1,5 ori înălțimea normală a liniei, bazată pe dimensiunea implicită a paginii (care în mod normal este de 16 pixeli).
Când să utilizați înălțimea liniei
După cum am detaliat mai sus, înălțimea liniei este adecvată pentru a utiliza liniile de text din paragrafe sau alte blocuri de text. Dacă există prea puțin spațiu între linii, textul poate deveni jalnic și dificil de citit pentru spectatori pe site-ul dvs. În mod similar, dacă liniile sunt distanțate prea mult pe pagină, fluxul normal de lectură va fi întrerupt și cititorii vor avea probleme cu textul dvs. din acest motiv. Acesta este motivul pentru care doriți să găsiți cantitatea corespunzătoare de spațiere în linie înălțime care trebuie utilizată. De asemenea, puteți testa designul cu utilizatorii reali pentru a obține feedbackul asupra lizibilității paginii .
Când nu utilizați înălțimea liniei
Nu confundați înălțimea liniei cu plăcuțele sau marginile pe care le-ați folosi pentru a adăuga spații libere la designul paginii dvs., inclusiv sub titlu sau paragrafe. Spațierea nu conduce și, prin urmare, nu este manipulată de înălțimea liniei.
Dacă doriți să adăugați spațiu în anumite elemente de text, ați folosi margini sau elemente de umplutură. Revenind la exemplul CSS anterior utilizat, am putea adăuga acest lucru:
principala p {linie-înălțime: 1,5; margin-bottom: 24px; } Aceasta ar avea în continuare înălțimea de 1,5 linii între liniile de text pentru paragraful paginii noastre (cele din elementul
În aproape toate cazurile, acest lucru ar arăta la fel ca CSS anterioare.
Spuneți că ați dorit să adăugați spații sub elementele listei care se aflau în interiorul unei liste cu o clasă de "servicii-meniu", ați folosi margini sau elemente de umplutură pentru a face acest lucru, nu înălțimea liniei. Deci, acest lucru ar fi potrivit.
.services-menu li {