Web dizajn uvijek je posudio principe i definicije iz svijeta grafičkog dizajna i tiska. To je osobito istinito kada je u pitanju web tipografija i način na koji dobivamo letterforms na našim web stranicama. Te paralele uvijek nemaju 1 do 1 prijevoda, ali sigurno možete vidjeti gdje jedna disciplina utječe na drugu. To je osobito vidljivo kada uzmete u obzir odnos između tradicionalnog tipografskog pojma "vodeći" i CSS imovine poznate kao "line-height".
Svrha vođenja
Kada su ljudi ručno slušali metalne ili drvene slova kako bi stvorili tipografiju za ispisanu stranicu, između vodoravnih linija teksta postavljene su tanke komadiće olova kako bi se stvorio razmak između tih crta. Ako želite veći prostor, umetnuli biste veće komade olova. Ovako je izrađen pojam "vodeći". Ako ste pogledali pojam "vodeći" u knjizi o tipografskom dizajnu i principima, pročitat će nešto u smislu - "udaljenost između osnovnih linija uzastopnih linija tipa".
Vodeći u web dizajnu
U digitalnom dizajnu, pojam vode još se koristi za označavanje razmaka između redaka teksta. Mnogi programi upotrebljavaju taj izraz, iako se u tim programima očito ne upotrebljava stvarni vod. Ovo je izvrstan primjer novih oblika projektiranja posuđivanja ideja iz tradicionalnih, iako se točna implementacija tog načela promijenila.
Kada je u pitanju web dizajn, nema CSS imovine za "vodeće". Umjesto toga, imovina CSS-a koja će nositi ovaj vizualni prikaz teksta naziva se visina linije. Ako želite da vaš tekst ima dodatni prostor između vodoravnih linija teksta, upotrijebili biste ovaj entitet. Na primjer, recimo da želite povećati visinu linije za sve stavke unutar
To bi sada bilo 1,5 puta veće od normalne visine linije, na temelju zadane veličine fonta stranice (obično 16px).
Kada upotrebljavati visinu linije
Kao što je gore navedeno, visina linije prikladna je za razmještaj redaka teksta u odlomcima ili drugim blokovima teksta. Ako je između redaka premalo prostora, tekst može postati neuredan i teško ga je čitati za gledatelje na vašu web-lokaciju. Slično tome, ako su linije razmaknute previše udaljene na stranici, normalni tijek čitanja će biti prekinut i čitatelji će imati problema s vašim tekstom iz tog razloga. Zato želite koristiti odgovarajuću količinu razmaka visine i visine. Također možete testirati svoj dizajn s stvarnim korisnicima kako biste dobili povratnu informaciju o čitljivosti stranice .
Kada ne upotrebljavate visinu linije
Nemojte zbuniti visinu linije s padinom ili marginama koje biste upotrijebili za dodavanje razmaka na dizajn stranice, uključujući ni ispod naslova ili odlomaka. Taj razmak ne vodi, i stoga ga ne obrađuje visina linije.
Ako želite dodati prostor pod određene elemente teksta, koristili biste margine ili padding. Vraćajući se na prethodni primjer CSS-a koji smo koristili, mogli bismo ovo dodati:
glavni p {line-height: 1.5; margina-dno: 24px; } To će i dalje imati visinu od 1,5 linija između redaka teksta za stavke naše stranice (one unutar U gotovo svim slučajevima to bi bilo isto kao i prethodni CSS. Recimo da ste htjeli dodati razmak ispod stavki popisa koji su bili unutar popisa s klasi "usluge-izbornika", koristili biste margine ili padding da to učinite, a ne visinu retka. Zato bi to bilo prikladno.