Учење за водечки во веб дизајн

Веб-дизајнот отсекогаш ги позајмил директорите и дефинициите од светот на графичкиот дизајн и печатењето. Ова е особено точно кога станува збор за веб типографија и начинот на кој ние добиваме писмо на нашите веб-страници. Овие паралели не се секогаш 1 до 1 превод, но сигурно може да се види каде една дисциплина влијаела врз другиот. Ова е особено евидентно кога ќе се разгледа односот помеѓу традиционалниот типографски термин "водечки" и CSS имотот познат како "line-height".

Целта на водењето

Кога луѓето рачно ги користеле металните или дрвените букви за да ја создадат типографијата за печатена страница, тенки парчиња олово биле поставени помеѓу хоризонталните линии на текстот, со цел да се создаде празно место помеѓу тие линии. Ако сакате поголем простор, ќе вметнете поголеми парчиња олово. Така беше измислен терминот "водечки". Ако го погледнате терминот "водечки" во книгата за типографскиот дизајн и директорите, тоа би прочитало нешто за ефектот на - "растојанието меѓу базичните линии на последователни линии од типот".

Водечки во Веб Дизајн

Во дигиталниот дизајн, терминот кој се води се уште се користи за да се однесува на растојанието помеѓу линиите на текстот. Многу програми го користат овој точен термин, иако вистинското водство очигледно не се користи во тие програми. Ова е одличен пример за нови форми на идеи за позајмување на идеи од традиционалните, иако точната имплементација на тој принцип е променета.

Кога станува збор за веб дизајн, нема CSS имот за "водечки". Наместо тоа, сопственоста на CSS која ќе се справи со овој визуелен приказ на текст се нарекува висина на линијата. Ако сакате вашиот текст да има дополнителен простор помеѓу хоризонталните линии на текст, ќе го користите овој имот. На пример, да речете дека сакавте да ја зголемите висината на линијата за сите параграфи во елементот

на вашиот сајт , би можеле да го направите вака:

главна p {висина-линија: 1,5; }

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

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

Како што е наведено погоре, висината на линијата е соодветна за користење на линиите на текстот во параграфи или други блокови на текст. Ако има премногу малку простор помеѓу редови, текстот може да се пренатрупа и тешко да се прочита за гледачите на вашиот сајт. Слично на тоа, ако линиите се распоредени предалеку на страната, нормалниот тек на читање ќе биде прекинат и читателите ќе имаат проблеми со вашиот текст поради таа причина. Ова е причината зошто сакате да ја пронајдете соодветната количина на растојанието помеѓу линиите за употреба. Можете исто така да го тестирате вашиот дизајн со вистинските корисници за да добиете повратни информации за читливоста на страната .

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

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

Ако сакате да додадете простор под одредени текстуални елементи, би користеле маргини или баласт. Враќајќи се на претходниот пример на CSS што го користевме, би можеле да го додадеме ова:

главна p {висина-линија: 1,5; маргина-дното: 24px; }

Ова сепак ќе има висина од 1,5 линии помеѓу линиите на текстот за став на нашата страница (оние во елементот

). Тие исти ставови исто така ќе имаат 24 пиксели на празни места под секоја од нив, овозможувајќи визуелни паузи што им овозможуваат на читателите лесно да идентификуваат еден параграф од друг и да го направат читањето на веб страните полесно. Исто така, можете да го користите имотот за дополнување наместо маргините тука:

главна p {висина-линија: 1,5; Пополнување-дното: 24px; }

Во скоро сите случаи, ова ќе се прикаже исто како и претходната CSS.

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

.services-menu li { Вие би користеле само висина на линија ако сакавте да го поставите проредот на текстот внатре во самите списоци, претпоставувајќи дека имаа долги текстови кои може да се стартуваат со повеќе линии за секоја точка на куршум.