9 съвета за по-добра типографска йерархия
Всеки проект изисква система и йерархия за текстови елементи. Помислете само за малките парчета текст, които се използват в дизайна - заглавия, копие на тялото, елементи за навигация, правна информация, надписи и т.н.
Но как да създадете тази йерархия, така че всеки текстов елемент плавно да преминава към следващия? Днес ще ви преведем стъпка по стъпка чрез изграждането на система от типографска йерархия, която може да се използва за почти всеки дизайнерски проект. (И ние съчетаваме съветите с красиви примери за страхотна типография, за да ви помогнем да съберете малко вдъхновение.)
Разгледайте елементи Envato
1. Започнете с удобно копие на тялото
Въпреки че може да искате да започнете с готино лечение на заглавието, мястото за начало всъщност е в средата. Първо установете удобен шрифт, размер и разстояние за основното копие на тялото.
Това трябва да има смисъл, защото това е основната част от текста в дизайна. Независимо дали изграждате уебсайт или брошура, тази концепция е същата. Идеалната четимост на копието на тялото е някъде между 50 и 60 знака на ред (или колона), според института Baymard. Тази насока ще ви помогне да зададете скала за текст, който е четим, и да отчита различни видове шрифтове (като например обикновени срещу кондензирани спрямо плочи).
2. Изградете скала
След като знаете как ще изглежда копието на тялото, можете да зададете мащаб около него за всички останали текстови елементи в дизайна. Може да бъде лесно да се пренебрегнат определени текстови блокове; направете списък на всяко различно използване на текст във вашия проект.
- Тяло копие
- Акценти
- В подпозиции
- Надписи
- Блок цитати
- Навигационни елементи
- Информация за долния колонтитул
- Правно копие или отказ от отговорност
Сега създайте мащаб, който диктува шрифт, диапазон на размера и използване за всеки от тези елементи. (И го вградете във вашия CSS за уебсайтове или файлове за стилове за работещи документи.) Има няколко начина за създаване на мащаба, но процентът на размера може да бъде добра отправна точка. Можете също така да установите скала въз основа на математиката зад основна линия или визуално.
Ето една проста скала за начало:
- Размер на копието на тялото
- Заглавията са размер на копието на тялото пъти 220%
- Подпозициите са с размер на копието на тялото, пъти 150%
- Навигационните елементи са размер на копието на тялото пъти 80%
- Footer / Legal copy е размер на тялото пъти 80%
3. Мислете най-големи до най-малките, отгоре отдолу
Това правило е доста просто: Най-големият и най-важният текст трябва да бъде в горната част, а размерите да намаляват, докато четете страницата или екрана.
Това не означава, че не можете да нарушавате това правило от време на време с някаква дизайнерска финес, но винаги трябва да бъде отправна точка за разработване на типографска йерархия. (Кой наистина ще превърти до края на уеб страница за заглавието и след това обратно към върха, за да започне да чете?)
4. Установете правила за космоса
Също толкова важно, колкото и размерът на буквите, е пространството между и около него. Факторите за определяне на пространството включват водещи (или височина на линията), отстъпи (или не), обвивки и улуци и подравняване.
Помислете за разстоянията, които отразяват мащаба, използван за оразмеряване на текст. Размерът на платното също е доста важен тук. По-големите платна се четат с по-строги разстояния от малките платна. (Ето защо много проекти имат много по-губи спецификации за разстояние за устройства като мобилни телефони и по-строги правила за настолни компютри.)
Точно както при размерите на шрифта, правилата за разстояние трябва да бъдат предварително зададени за цялата рамка на дизайна. Постоянното, чисто разстояние е едно от малките неща, които могат да направят или нарушат дизайна.
5. Задайте правила за Bold и Italics
Въпреки че удебеленият шрифт и курсив не са различни типове елементи или размери, използването е важно. (Просто представете как ще изглежда дизайнът, ако всяка друга дума е удебелена.)
Това прави насоките за смели и курсиви особено важни. Вместо да разглеждаме размер или пространство обаче, вниманието е много по-контекстуално. Спецификациите за употреба могат да посочват, че само толкова много думи или фрази (или конкретни думи или фрази) могат да бъдат обработени. Честа грешка е да прекалявате с удебелен шрифт и курсив; когато се съмнявате, не го използвайте.
6. Създайте „Z“
Общият модел на четене е във формата на Z. Независимо дали проектирате за език, който чете отляво надясно или отдясно наляво (обърнете Z), потребителите ще четат от един ъгъл през линията до края и след това обратно към началния ъгъл и през линията в повтарящ се шаблон.
Използвайте този естествен поток, когато поставяте текстови елементи на екрана. Тази Z форма е причина повечето марки да поставят логото си в горния ляв ъгъл. Това е първото място, което окото приземява при четене.
7. Помислете за визуално тегло
Размерът не е единственият фактор, когато става въпрос за това колко голям текстов елемент изглежда на екрана. Визуалното тегло е също толкова важно и може да повлияе на начина, по който създавате типографска скала.
Шрифтовете ще изглеждат по-големи, когато:
- Те включват дебели тежести на удара
- Те включват разцвета или разкрасяване
- Те са широки
- Те са новообразувани базови шрифтове
- Те имат по-високи х-височини
- Използват се като всички капачки
Шрифтовете ще изглеждат по-малки, когато:
- Те са кондензирани
- Те включват леки или тънки ширини на хода
- Има малък контраст с фона
- Използват се с малки букви
8. Създайте акценти
Има определени думи, които искате да подчертаете, които попадат малко извън нормалната типографска скала. Добавянето на акцент към буквите може да го изпъкне, без да се налага да коригирате действителния размер или шрифт.
Общите акценти включват:
- цвят
- Подчертан
- връхна точка
- Текст с бутон или форма
- Проста анимация
- Промяна в случай от друг тип със същия размер
Хубавото на всеки акцент в рамките на дадена йерархия на типа е, че той е непосредствен привличащ вниманието. Тези елементи трябва да се използват пестеливо за най-голямо въздействие и за ключови елементи в дизайна.
9. Използвайте „Очен тест“
И накрая, всяко правило има изключение (или две). Оттук идва „тестът за очи“. Просто погледнете скалата на екрана. Как изглежда и чувства текстът към вас? Има ли логичен поток? Лесно е да се чете?
Ако се чувствате изключен по някакъв начин, помислете дали да коригирате мащаба. В зависимост от използвания шрифт и други елементи в дизайна - от снимки до цветни до контрастни - скалата ще изисква корекция от ваша страна. Това е само отправна точка, когато не сте сигурни какво искате да направите.
И попитайте и за други очи. Създайте една или две версии с различни йерархии, за да видите коя версия получава най-добрия отговор. Дизайнът е визуално изкуство, което прави „очния тест“ неточна, но доста надеждна опция.
заключение
След като зададете типографска йерархия на проект, най-доброто, което можете да направите, е да го документирате. Установете скалата с CSS за уебсайтове или създайте файлове със стилове, когато работите върху печатни проекти.
За по-мащабни дизайни или брандиране, поставете мащаба и спецификациите писмено в ръководство за стил. Създаването на йерархия на типа изисква малко работа върху задния край, но прави завършването на проекта по-бързо, лесно и да не говорим за по-последователно, тъй като напредвате с последващи проекти.
