Типографічна ієрархія — фундамент будь-якого дизайну. Саме вона направляє читача на вебсайт, бренд або книгу. Вона підказує йому, на що дивитися насамперед, що прогортати, а що запам’ятати. У статті ви знайдете короткий посібник зі створення ефективної ієрархії.
Що б ви не розробляли — вебсайт, бренд чи розворот журналу — друкарська ієрархія — це ваш фундамент, ваші будівельні блоки. Саме вона направляє читача. Вона підказує йому, на що дивитися насамперед, що прогортати, а що запам’ятати. Якщо все зроблено правильно, ієрархія буде непомітною. Якщо ж ні, вона може спричинити сильну плутанину. Ієрархія — це те, як ви візуально структуруєте інформацію. Ось як це робити правильно.
Почніть із тексту
Перш ніж вибирати шрифти або розміри, зрозумійте, що ви хочете сказати. Прочитайте контент. Виділіть у ньому заголовки, підзаголовки, основний текст, цитати, заклики до дії, виноски тощо. Потім розташуйте їх у порядку важливості. Це стане вашою ієрархією. Запитайте себе: «Якщо читач побачить тільки щось одне, що це має бути?» Візьміть відповідь за відправну точку.
Вибирайте розміри з розумом
Розмір — найбільш очевидний спосіб показати важливість. Найбільший текст позначає найважливіший елемент (зазвичай заголовок), за ним слідують підзаголовки тощо.
Наприклад:
- (Веб) Заголовок: 40–60px / Підзаголовок: 24–36px / Основний текст: 16–20px / Підпис/сноска: 12–14px
- (Друк) Заголовок: 38–60pt / Підзаголовок: 20–36pt / Основний текст: 10–14pt / Підпис/сноска: 6–8pt
Для створення гарної, чистої та дуже зрозумілої типографічної ієрархії важливо не перестаратися. Головне — не драматичний ефект, а послідовність. Спочатку налаштуйте основний текст, а потім масштабуйте інші елементи.
Контрастні зображення та стилі
Поєднуйте різні шрифти (легкий, звичайний, жирний), щоб розставити акценти. Жирний шрифт може привернути увагу до ключових ідей, а легший вказувати на другорядну інформацію. Курсив також відмінно підходить для диференціації, але використовуйте його помірно, для окремих слів, цитат або виносок. Нахил потрібен далеко не скрізь.
Вибирайте шрифти з досить різноманітним набором написів (наприклад, PP Neue Montreal, PP Nikkei або PP Right Grotesk), щоб вибудовувати складні ієрархії без необхідності використання кількох гарнітур.
Поекспериментуйте з інтервалами
Міжрядковий інтервал (інтерліньяж) допомагає зробити більші обсяги тексту більш читаними. Оптимальне значення для основного тексту – 120-140% від розміру шрифту. Наприклад, текст 12pt, інтерліньяж ~14-16pt. Також важливо правильно налаштувати міжлітерну відстань (трекінг, кернінг).
Маленький трекінг може зробити заголовки компактними та виразними; ширший наповнити текст «повітрям» і надати йому формального вигляду.
Використовуйте колір, але не покладайтеся виключно на нього
Колір — чудовий спосіб підкреслити ті чи інші елементи, особливо в інтерфейсі чи брендингу. Але спочатку переконайтеся, що ваша ієрархія працює у чорно-білому режимі. І лише після цього додавайте колір, щоб посилити структуру, виділити важливі та інтерактивні елементи. Ієрархії, в основі яких лежить колірне кодування, часто розвалюються через недостатній контраст або проблеми з доступністю.
Використовуйте обмежену кількість шрифтів (але вибирайте їх з розумом)
Вам не потрібно 5 або більше шрифтів, щоб побудувати ефективну ієрархію. Найчастіше однієї сім’ї з кількома стилями більш ніж достатньо. Якщо ви все ж таки хочете використовувати шрифтову пару, спробуйте поєднувати шрифти із засічками та без. Наприклад, PP Editorial New для заголовків + PP Neue Montreal для основного тексту або PP Monument + PP Right Gothic.
Повторюйте знову та знову
Після того як ви визначилися з розміром та інтервалами для заголовка, підзаголовка та основного тексту, дотримуйтесь їх. Повторення стилів створює ритм та робить ваш дизайн продуманим та цілісним, надаючи всьому, що ви проєктуєте, візуальний та концептуальний темп. Створюйте стилі тексту у вибраному програмному забезпеченні та застосовуйте їх послідовно. Ніхто не хоче бачити у своєму проєкті 9 стилів, які трохи відрізняються один від одного за розміром заголовків.
Протестуйте свою систему
Зменшіть масштаб. Примружте очі. Прокрутіть. Чи можете ви сказати, що тут найважливіше? Чи хтось інший з першого погляду може зрозуміти, з чого почати? Хорошу ієрархію видно без зусиль — погляд повинен природним чином переміщатися по структурі, що ви вибудували. Якщо це не так, поверніться назад і знову налаштуйте розмір, зображення, інтервали або вирівнювання. Повторюйте, поки не досягнете потрібного результату.
Автор: Мусієнко Тимофій