Створення чіткої ієрархії шрифтів – ключ до успіху динамічного дизайну. Це риса, яка відокремлює ефективний спосіб донесення до користувача важливого повідомлення, від барикади безглуздого тексту, блокує вашу комунікацію з аудиторією сайту.

Якщо ви навчитеся правильно користуватися візуальними сигналами, закладеними в гарнітурах, поєднаннях кольорів і пробільних елементах між блоками тексту, ви гарантовано зможете передати відвідувачу своє повідомлення з усіма її смислами та акцентами.

1. Обмежте кількість гарнітур (шрифтів)

Не використовуйте багато різних шрифтів. Головний сенс створення типографічної ієрархії – ясність. Дві гарнітури в одному дизайні – стандарт для безпечної типографіки. Чому? Три гарнітури, вибрані без належної акуратності, здатні влаштувати погром на сторінці.

Зазвичай шрифт оригінального зображення доповнюється нейтральним. Перший призначений для заголовків, другий – для основного тексту. Третій шрифт, бездумно кинутий на сторінку, зруйнує зорові орієнтири, створені оригінальністю і нейтральністю перших двох:

2. Додаток і контраст

Використання пари шрифтів: одна з зарубками, інша без зарубок – ще один поширений принцип шрифтового дизайну. Складний, інтригуючий і елегантний дизайн serif добре відтіняє простим, чистим sans. Разом ці дві гарнітури створять необхідну ієрархію без умовностей і натяжок. Один – для заголовків, другий – для дрібного тексту.

Підібрати пару з шрифтів одного типу дуже складно: таке поєднання часто не можна назвати ні взаємодоповнюючим, ні контрастним. Також не налягайте на контраст: вибір двох шрифтів з дуже яскравою індивідуальністю відволікає читача від змісту тексту:

6 простих порад по створенню ефективної типографічної ієрархії

3. Враховуйте характер

Вибрати довільні шрифти із засічками і без них часто буває недостатньо. Два шрифту різних сімейств, мають виконувати одне завдання. Уникайте поєднання класичного serif з химерним sans, або декоративного serif з жорстким sans.

Запитайте себе, який характер має кожен з обраних вами шрифтів, і підходять їхні характери до змісту вашого повідомлення.

4. Стратегічно використовуйте кегль

Як і в дикій природі, на сторінці з усіх шрифтів виживає той, чиє зображення сильніше. Якщо основна думка вашого повідомлення виражена шрифтом того ж кегля і стилі, що і решта тексту, очей читача не затримається на ній. Ще гірше, якщо ця думка оточена елементами більш помітного накреслення.

Щоб звернути увагу на основну думку, зробіть різницю між нею і навколишнім її текстом драматичною. Виберіть накреслення такий жирності, яка дійсно здатна відобразити її важливість.

Масштабування шрифтів часто залежить від системи відображення, тому слід бути обережним, задаючи кегль деяких шрифтах. Наприклад, занадто маленька напис, зроблений декоративним шрифтом начебто Thirsty Script, буде читатися, що додасть всій сторінці неохайний вигляд.

З іншого боку, деякі гарнітури, які використовуються для відображення основного тексту, можна використовувати і в дуже великому кеглі. Наприклад, з OpenSans виходять чудові заголовки, причому як в легкому, так і в самому важкому зображенні:

6 простих порад по створенню ефективної типографічної ієрархії

5. Контрастні кольори

Кольори можуть використовуватися як для класифікації тексту, так і для створення настрою. Але контрастний колір не тільки підказує користувачеві, куди слід звернути увагу, – він впливає на його емоційне сприйняття. Кольори пов’язані з емоціями, і традиційно асоціюються з різними рисами характеру.

Використання цих асоціацій повинно враховуватися в типографічної ієрархії. Якщо ви використовуєте рожевий, читачі сприймуть ваш тон як грайливий, зухвалий або чуттєвий. Використовуйте колір, щоб доповнити сенс, створений вибором гарнітури, або створити новий сенс. Тільки не забувайте враховувати також колір фону і сусідніх елементів:

6 простих порад по створенню ефективної типографічної ієрархії

6. Слідкуйте за пробілами

Інший спосіб зосередити увагу на повідомленні – відокремити його порожнім простором. Дизайн, заснований на накопиченні щільного тексту, навряд чи буде мати добре читану ієрархію, навіть якщо ви будете слідувати всім іншим правилам.

Більшість користувачів не стануть обтяжувати себе читанням такої сторінки. Ви повинні оточити елементи достатньою кількістю фону, щоб око міг зосередитися на кожному елементі окремо, і тоді вся сторінка буде виглядати охайно.

Використання прогалин не означає, що текст повинен виглядати простим або надмірно зріджені. Наявний простір сторінки потрібно використовувати ефективно.

Правильне використання пробільних елементів дозволить вмістити на сторінку максимум сенсу, при цьому допомагаючи користувачеві виділити поглядом ключові елементи текстового дизайну. Пробіл – це не просто порожній простір, а важлива частина візуальної ієрархії:

6 простих порад по створенню ефективної типографічної ієрархії

Переклад статті «easy 6 ways to create an effective typographic hierarchy» був підготовлений дружною командою проекту Сайтостроение від А до Я.