Учење о вођству у веб дизајну

Веб дизајн је одувек позајмљивао принципе и дефиниције из света графичког и штампаног дизајна. Ово је нарочито тачно када је у питању веб типографија и начин на који добијамо слова на нашим веб страницама. Ове паралеле нису увек 1 до 1 превод, али свакако можете видети где је једна дисциплина утицала на другу. Ово је нарочито очигледно када се узме у обзир веза између традиционалног типографског израза "водећи" и ЦСС имовине познате под називом "висина линије".

Сврха водећег

Када су људи ручно руковали металним или дрвеним словима како би створили типографију за одштампану страницу, танке комаде олова биле су постављене између хоризонталних линија текста како би се створио размак између тих линија. Ако желите већи простор, убаците веће комаде олова. Овако је скривен термин "водећи". Ако сте погледали појам "водећи" у књизи о типографском дизајну и принципима, то би прочитало нешто у смислу "размака између основних линија узастопних линија типа".

Вођење Веб дизајна

У дигиталном дизајну, термин који води, још увек се користи да се односи на размак између линија текста. Многи програми користе овај тачан израз, иако се очигледно не користи стварно олово у тим програмима. Ово је сјајан пример нових облика дизајна задуживања идеја из традиционалних, мада се тачна примјена тог принципа промијенила.

Када је у питању веб дизајн, не постоји ЦСС својина за "водеће". Умјесто тога, својство ЦСС-а која би се носила са овим визуелним приказом текста назива се висина линије. Ако желите да ваш текст има додатни размак између хоризонталних линија текста, користићете ову особину. На пример, реците да желите повећати висину линије за све ставке унутар <маин> елемента ваше странице , можете то учинити овако:

главна п {лине-хеигхт: 1.5; }

Ово би сада било 1,5 пута веће од нормалне висине линије, засновано на подразумеваној величини фонта странице (која је нормално 16пк).

Када користити линијску висину

Као што је већ наведено, висина линије је погодна за коришћење размака линија текста у параграфима или другим блоковима текста. Уколико је премало простора између линија, текст се може заменити и тешко читати за гледаоце на вашој веб локацији. Слично томе, ако су линије размакнуте предалеко на страници, нормалан проток читања ће бити прекинут и читатељи ће имати проблема са текстом из тог разлога. Због тога желите пронаћи одговарајућу количину растојања линије за коришћење. Такође можете тестирати свој дизајн са стварним корисницима да бисте добили повратне информације о читљивости странице .

Када се не користи висина линије

Немојте мешати линијску висину са подлогама или маргинама које бисте користили за додавање простора до дизајна ваше странице, укључујући испод наслова или ставова. Тај размак не води, и стога се не рукује линијском висином.

Ако желите додати простор под одређене текстуалне елементе, користите маргине или паддинг. Враћајући се на претходни ЦСС пример који смо користили, могли бисмо додати ово:

главна п {лине-хеигхт: 1.5; маргин-боттом: 24пк; }

То би и даље имало висину линије од 1,5 линије текста за ставку наше странице (оне унутар елемента <маин>). Исти параграфи би такође имали 24 пиксела сличног простора испод сваког од њих, омогућавајући визуелне паузе који омогућавају читаоцима да лакше идентификују један параграф од другог и олакшавају читање веб странице. Такође можете користити својство за допуњавање умјесто маргина овдје:

главна п {лине-хеигхт: 1.5; паддинг-боттом: 24пк; }

У скоро свим случајевима ово би се показало као и претходни ЦСС.

Реците да желите додати размаке испод ставки са листе које су биле унутар листе са класи "услуге-мени", користили бисте маргине или паддинг да бисте то урадили, а НЕ линија висине. Дакле, ово би било прикладно.

.сервицес-мену ли {<паддинг-боттом: 30пк; }

Овде бисте користили само висину линије ако желите да поставите размак текста унутар самих листова, под претпоставком да су имали дуготрајни текстови који могу да се покрену на више линија за сваку метку.