Багато дизайнерів лише в останню чергу замислюються про вибір шрифту.
Вони більше зосереджені на графіку, кольорах, розташуванні елементів та формулюваннях. Однак шрифт – один із найважливіших елементів дизайну.
Текст оточує нас усюди, ми постійно взаємодіємо з ним. Шрифт дозволяє пов'язати текст із певними емоціями та вплинути на настрій користувачів. Насправді це ціла наука.
У статті ви знайдете ряд порад та хитрощів, які зможете застосовувати під час створення типографіки для своїх рекламних постів. У кожному розділі є підрозділ "Практика" із прикладами, які ми самі публікували у соціальних мережах.
Перед тим, як продовжити, я рекомендую вам познайомитися з основними термінами зі світу типографіки.
Отже, приступимо до вивчення основ рекламної типографіки.
1. Чим менше, тим краще
Використовуйте одну родину або перевірену комбінацію шрифтів. Звичне поєднання – шрифт із засічками та шрифт без засічок – забезпечить високу читабельність тексту. Проте чи всі комбінації працюють добре.
Практика
В одному зі своїх постів ми використовували поєднання шрифтів Playfair Display та Epilogue. Основний текст на першому слайді набрано Playfair Display, а заголовок - Epilogue. Заголовок виглядає нормально, але текст прочитати практично неможливо.
Причина в тому, що Playfair Display це декоративний шрифт, який зазвичай не застосовується для абзаців. Якщо поміняти шрифти місцями (див. другий слайд), то дизайн буде виглядати сучасніше і привабливіше. Пост можна знайти тут.
Порада: Встановіть розширення WhatFont для Chrome, щоб визначити, які саме шрифти використовуються на тому чи іншому сайті.
2. Подбайте про контраст
Розділіть текст на заголовки та абзаци. Найкращий спосіб зробити це – контрастна типографіка. Йдеться не лише про те, щоб пофарбувати фрагменти тексту у різні кольори. Контраст можна створити за допомогою розмірів, розташування елементів, шрифту, кольору фону і т.д.
Практика
Пост на малюнку нижче ідеально підходить для демонстрації того, наскільки важливою є контрастність. У ньому багато текстових блоків. Якщо вони будуть оформлені неправильно, читач може прогаяти важливі моменти, про які хотів розповісти автор.
Давайте вирішимо цю проблему разом. Що тут не так:
один колір,
немає помітної різниці між заголовком та підзаголовками,
надто тісно.
Ось як ми можемо все виправити:
Контрастні розміри: Заголовок в 2 рази більше підзаголовків.
Контрастні кольори: Підзаголовки та текст абзаців пофарбовані у різні кольори.
Контрастне розташування (принцип близькості): Абзаци згруповані так, щоб читач міг розрізняти блоки. Немає потреби у нумерації.
Пост ви знайдете тут.
Порада: Якщо ви працюєте у Figma, використовуйте плагін Contrast для перевірки контрастності кольорів.
3. Створюйте текстові блоки
Текстові блоки відіграють важливу роль під час роботи з великими написами. Ідея полягає в тому, щоб рівномірно заповнити доступний простір зліва направо без пробілів.
Практика
На першому слайді текст начебто звисає межі текстового поля, через що його дуже незручно читати. Діра між рядками також виглядає погано.
На другому малюнку слова заповнили порожній простір, і тепер здаються частиною одного текстового поля. Якщо текст має довгі слова, можна зменшити розмір шрифту, щоб помістити їх у контейнері. З постом ви можете ознайомитись тут.
Порада: Якщо якесь слово не міститься в блокі, розташуйте поряд зображення або ілюстрацію та оберніть текст навколо нього.
4. Не забувайте про читабельність
Пости в соціальних мережах повинні бути не лише яскравими, а й читабельними, щоб користувачам не довелося надто напружувати очі. Тут першому плані виходять такі чинники, як розмір шрифту, контрастність і вирівнювання.
Практика
Перший слайд – приклад надто низького контрасту між кольоровим текстом та тлом. Теоретично кольору контрастними називають відтінки, розташовані один навпроти одного на колірному колі.
Оскільки ми розробляємо дизайн і для мобільних екранів, важливо пам'ятати про колір та розмір шрифту. Ви можете використовувати коло кольорів, щоб знайти відповідні кольори для вашого проекту.
Що стосується розміру: не варто використовувати шрифт менше 35px (у нашому випадку йдеться про Epilogue). Ідеальний розмір буде власним для кожного конкретного шрифту, тому краще протестувати дизайн на телефоні, перш ніж публікувати його.
Зазвичай люди читають текст зліва направо згори донизу. За загальним правилом рекомендується вирівнювати текст ліворуч. Пост можна знайти тут.
Порада: Використовуйте Figma Mirror для попереднього перегляду проектів на мобільному телефоні прямо з Figma.
5. Виділяйте важливе
Користувачі не завжди читають текст. Виділяйте важливі слова. Ви також можете використовувати для цього різні поєднання кольорів.
Практика
Погляньте на зображення нижче. Дизайн зліва досить вдалий, але в ньому не розставлені акценти, що спрямовують погляд користувача. З огляду на коротку тривалість концентрації уваги людина може швидко втратити інтерес до посту.
Щоб уникнути цього, ми виділили частину тексту іншим шрифтом. Пам'ятайте, що не можна вибирати такі фрагменти довільно. Виділений текст має вписуватись у контекст.
Пост ви знайдете тут.
6. Найголовніше - однаковість
Необхідно, щоб користувачі дізнавалися про ваш бренд, просто глянувши на дизайн. Щоб досягти цієї мети, потрібен фірмовий стиль. Виберіть кольори, шрифти та складіть рекомендації щодо розробки рекламних постів. Завжди намагайтеся слідувати їм, щоб ваше портфоліо виглядало однаково.
Не обов'язково використовувати скрізь той самий шрифт і колір. Наприклад, ви можете вказати у рекомендаціях: кольори з насиченістю 100%, шрифти Epilogue/Playfair Display.
7. Порушуйте правила
Рекомендації можуть не вписуватися в ідею конкретного посту. Порушуйте правила. Це дозволить вам поглянути на ситуацію з іншого боку та передати потрібний настрій.
Корисні ресурси
Ось кілька облікових записів, які вміло використовують типографіку для свого просування:
Загляньте на сторінку bazen.talks на Dribbble, і ви знайдете безліч корисних порад щодо дизайну постів у соціальних мережах.
Якщо ви хочете поринути у вивчення типографіки, вирушайте на Incredible Types або Fonts In Use, де зібрана ціла колекція прикладів, що надихають, роботи з текстом.
Джерело: medium.muz.li