Učenje o vođstvu u web dizajnu

Web dizajn je uvijek pozajmljivao principe i definicije iz svijeta grafičkog i štampe dizajna. Ovo je naročito tačno kada je u pitanju web tipografija i način na koji se na našim web stranicama dobijaju slovni oblici. Ove paralele nisu uvek 1 do 1 prevod, ali svakako možete videti gde je jedna disciplina uticala na drugu. Ovo je posebno očigledno kada se uzme u obzir veza između tradicionalnog tipografskog izraza "vodeći" i CSS imovine poznate pod nazivom "visina linije".

Svrha vodećeg

Kada su ljudi ručno rukovali metalnim ili drvenim slovima da bi stvorili tipografiju za odštampanu stranicu, tanke komade olova bile su postavljene između horizontalnih linija teksta kako bi se napravio razmak između tih linija. Ako želite veći prostor, ubacite veće komade olova. Ovako je skriven termin "vodeći". Ako pogledate pojam "vodeći" u knjizi o tipografskom dizajnu i principima, to bi pročitalo nešto u smislu - "rastojanje između osnovnih linija uzastopnih linija tipa".

Vođenje web dizajna

U digitalnom dizajnu, pojam koji se vodi i dalje se koristi da se odnosi na razmak između linija teksta. Mnogi programi koriste ovaj tačan izraz, iako se očigledno ne koristi stvarno olovo u tim programima. Ovo je sjajan primer novih oblika dizajna zaduživanja ideja iz tradicionalnih, mada se tačna primjena tog principa promijenila.

Kada je reč o web dizajnu, ne postoji CSS svojstvo za "vodeće". Umjesto toga, svojstvo CSS-a koja bi se nosila sa ovim vizuelnim prikazom teksta naziva se visina linije. Ako želite da vaš tekst ima dodatni razmak između horizontalnih linija teksta, koristićete ovu osobinu. Na primer, recite da želite povećati visinu linije za sve stavke unutar elementa vaše stranice , možete to učiniti ovako:

glavni p {line-visina: 1,5; }

To bi sada bilo 1,5 puta veće od normalne visine linije, zasnovano na podrazumevanoj veličini fonta stranice (koja je normalno 16px).

Kada koristiti linijsku visinu

Kao što je već navedeno, visina linije je pogodna za korišćenje razmaka linija teksta u paragrafima ili drugim blokovima teksta. Ukoliko je premalo prostora između linija, tekst se može zamagliti i teško čitati za gledaoce na vašoj web lokaciji. Slično tome, ako su linije razmaknute preterano na strani, normalan tok čitanja će biti prekinut i čitatelji će imati problema sa tekstom iz tog razloga. Zbog toga želite da pronađete odgovarajuću količinu razmaka linije za korišćenje. Takođe možete testirati svoj dizajn sa stvarnim korisnicima da biste dobili povratne informacije o čitljivosti stranice .

Kada se ne koristi linijska visina

Nemojte mešati linijsku visinu s podlogama ili marginama koje biste koristili za dodavanje prostora do dizajna vaše stranice, uključujući ispod naslova ili stavova. Taj razmak ne vodi, i stoga se ne rukuje linijskom visinom.

Ako želite dodati prostor pod određene tekstualne elemente, koristite margine ili padding. Vraćajući se na prethodni CSS primer koji smo koristili, mogli bismo dodati ovo:

glavni p {line-visina: 1,5; margin-bottom: 24px; }

To će i dalje imati visinu linije od 1,5 linije teksta za stavku naše stranice (one unutar elementa

). Isti paragrafi bi takođe imali 24 piksela sličnog prostora ispod svakog od njih, omogućavajući vizuelne pauze koji omogućavaju čitaocima da lakše identifikuju jedan paragraf od drugog i olakšavaju čitanje web stranice. Takođe možete koristiti svojstvo padding umjesto margina ovdje:

glavni p {line-visina: 1,5; padding-bottom: 24px; }

U skoro svim slučajevima to bi se pokazalo kao prethodni CSS.

Recite da želite da dodate razmake ispod stavki sa liste koje su bile unutar liste sa klikom na "usluge-meni", koristili biste margine ili padding da biste to uradili, NE linija visine. Dakle, ovo bi bilo prikladno.

.services-menu li { Ovde biste koristili samo visinu linije ako želite da postavite razmak teksta unutar samih listova, pod pretpostavkom da su imali dugotrajni tekstovi koji mogu da se pokreću na više linija za svaku metku.