Як працювати зі шрифтами, щоб привернути увагу

Час читання: 20 хвилин

Давай почнемо відразу з мінімального правила, яке покращить будь-яку ситуацію зі шрифтами: не використовуй багато шрифтів, максимум два.
Типографіка та шрифт
Типографіка — це, мабуть, найважливіша частина графічного дизайну, тому що вміючи правильно підібрати шрифт і побудувати текстову ієрархію (згадуємо, що ієрархія — це що за чим читати), можна вже отримати класний візуал! Але й навпаки, недоречно підібраним шрифтам можна зіпсувати класний візуал.

Важливо не недооцінювати силу шрифту, тому що шрифт — це не просто текст у роботі, написаний Times New Roman 14 розміром. Шрифт може виконувати й інші функції (дивимося нижче):

  • використовуючи лише шрифт можна створювати божественні цілісні композиції (1);
  • шрифт може лягти в основу айдентики і бути його характерною особливістю, за яким бренд буде відомий (2);
  • доносити інформацію у великих та малих обсягах (3);
  • виконувати функцію ідентифікації, тобто функцію інформування, у разі — назви вулиць, будинків, пам'яток (4).
Шрифт та гарнітура
Перш ніж перейти до класифікації, давай розберемося, що до чого в типографіці (це мистецтво оформлення тексту), щоб говорити однією мовою. У типографіці важливо розуміти різницю між гарнітурою, шрифтом і видами шрифту.

Гарнітура — назва шрифтової сім'ї, всередині якої є різні зображення: bold, regular, medium, light, italic і т.д. Наприклад, Arial, Times New Roman, Open Sans, які мають свої зображення (Arial Regular, Arial Bold, Arial Light і т.д.)

Шрифт — це одне зображення в рамках гарнітури, як шрифт Arial Regular, шрифт Arial Bold, Open Sans Light. І ще шрифт — це файл зі шрифтом, які ми завантажуємо та встановлюємо собі (зазвичай формат ttf, otf).

Можна сказати, що гарнітура — ​​це коробка, в якій лежать олівці-шрифти:
Класифікація шрифтів
Для того, щоб доречно підібрати шрифт, важливо розуміти, для яких цілей, він тобі потрібен. Усі шрифти поділяються на текстові та акцидентні (складне слово для першого разу, але ти його полюбиш, обіцяю).

Текстові шрифти використовуємо для великих масивів тексту (той же диплом, стаття в журналі, у дописі та сторіс, де більше 2-3 рядків). Вони мають бути простими та читабельними.

Акцидентні шрифти — шрифти, що використовуються для акцидентної продукції (афіші, постери, шрифтові виділення, тобто для заголовків тощо).

Якщо коротко, то це химерні шрифти, з нестандартними пропорціями, рукописні, декоративні та інші. Їх доречно використовувати для заголовків у сторіс, дописах, або як декор (наприклад, на задньому фоні можна використовувати контурні літери короткого слова). Їх не можна використовувати у великих масивах тексту, оскільки вони нечибельні.
Порівняй на картинці нижче два приклади. Де легше читати текст?
У першому варіанті — у заголовку акцидентний шрифт, а в текстовому блоці — текстовий. У другому варіанті — навпаки, і це вже неможливо читати.
Класифікація за будовою. Йдемо далі. Шрифти діляться на три групи: антиква (з засічками), гротеск (без засічок), брусковий (з великими засічками).

Давай розберемо кожну групу окремо, щоб зрозуміти їх відмінності та навчитися користуватися.

Антиква
(SERIF) – шрифти із засічками. Зазвичай її використовують і для набору основних текстів та заголовків.

Знайти шрифти із засічками можна на Google Fonts в категории Serif (це зручний інструмент для пошуку безкоштовних шрифтів).

Шрифти цієї групи — класичні, виглядають досить витончено та елегантно. До таких шрифтів відносяться Times New Roman, Georgia, Garamond, Baskerville Old Face, Centaur, Vidaloka, Vogue, Playfair Display, Didot та інші.
Гротеск (SANS SERIF) — це шрифти без засічок. Гротеськи виглядають більш сучасно, новаторськи та «стильно-молодіжно». До гротеск відносяться: Calibri, Helvetica, Arial, Futura, Montserrat, Myriad Pro, Oswald, Avenir, Gill Sans, Bebas Neun та інші.

Подивитися які бувають шрифти із засічками можна на Google Fonts у категорії Sans Serif.
Брусковий (SLAB SERIF) — шрифти з потужними засічками, а точніше — засічки рівні ширині самого штриха. Вони досить сильно схожі на антикву, але при цьому виглядають сучасно та впевнено.

Ось кілька прикладів цього типу шрифтів: Solway, Roboto Slab, Ultra, Clarendon, Copse, Silverfake, Galeria.
На наш подив, в Instagram практично ніхто не використовує брускові шрифти. Це можна пояснити тим, що у багатьох вони не асоціюються із сучасністю. Можливо, саме брусковий шрифт стане тією самою фішкою, яка виділить тебе серед конкурентів;)

Кожна ситуація — має свій шрифт.

Золоте правило, яким ми постійно користуємося :) Під кожну ситуацію потрібен свій шрифт. І з огляду на те, що ми знаємо види шрифтів, ми можемо підбирати потрібний.

Давайте подивимося на ці фрази. Вони мають один сенс, але зовсім різний настрій. Як ти думаєш, хто міг би написати кожну з них?
Вибираючи шрифт, важливо враховувати особливості цільової аудиторії. Антиква, наприклад, чудово підходить для жіночої аудиторії для якогось б'юті продукту, а шрифт твого ноута — для якогось фанового проекту про технології.
Як вибрати той самий шрифт
1. Визнач свою мету

Насамперед тобі потрібно запитати: «Яку функцію він виконуватиме?», «Який настрій я хочу передати?».

В оформлення дописів та сторіс, кожен стиль тексту (заголовок, абзац тексту) несе свою функцію, від цього і відштовхуємось:

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

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

  • шрифт може бути елементом декору, тому ми можемо покреативити з масштабом, прозорістю, ефектами і т.д. Але важливо пам'ятати, що його функція — декор, тобто він має доповнювати композицію та не сперечатися з головними елементами на креативі: забирати на себе надто багато уваги.
2. Визначся з аудиторією

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

Наприклад, деякі шрифти найкраще підходять для дітей. Оскільки вони тільки вчаться читати, для них найкраще підходять шрифти, що легко читаються, з великими і помітними літерами.

Підлітки швидше звернуть увагу на незвичайний акцидентний шрифт, ніж класичний Arial. А люди похилого віку — навпаки, такі шрифти нізащо не прочитати.

3. Шукай натхнення

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

4. Зверни увагу на деталі шрифта

Саме вони формують характер бренду. Подивися який цікавий варіативний шрифт у gBar. Якби це був умовно стандартний Arial, то він би просто був звичайним, що нічим не виділяється. А ось цей шрифт — інша справа: подивися, які характерні у G завитки, які милі A і S в словах.

Всі ці деталі додають візуального характеру бренду і йому легко масштабувати свій візуал. Якщо gBar не писатиме свій логотип на візуалах, але юзатиме свій варіативний шрифт — він все одно залишиться впізнаваним. Або skvot: ці піксельні літери ти впізнаєш скрізь :)
Ну а тепер чек-лист:

  • не використовуй акцидних шрифтів для основного набору тексту;
  • пам'ятай: кожній ситуації — свій шрифт;
  • дай відповідь на запитання «яку функцію виконує шрифт у цій ситуації»?;
  • визначись із аудиторією;
  • не забудь надихнутися;
  • якщо потрібно, додай шрифту трохи деталей.
Як поєднувати шрифти
Ми поєднуємо шрифти, щоб відокремити головне від другорядного, велике від маленького, зробити акцент чи навпаки його прибрати. І головне, що ми повинні пам'ятати при виборі шрифтів — це його функція. Але спочатку треба навчитися робити просто і зрозуміло, а вже потім, якщо потреба, ускладнювати. А не починати зі складного та химерного. Отже:

1. Поєднуй шрифт у рамках однієї гарнітури

Тобі і справді одного шрифту може бути цілком достатньо.

Головне, щоб там було кілька накреслень. Наприклад, Regular для великих масивів тексту, Bold для заголовка. Щоб виділити інформацію та ієрархію можна змінювати кегль шрифту, масштаб, колір та пропорції композиції загалом. Якщо буде більше накреслень — теж добре, але двох може бути цілком достатньо.

Наприклад: Kyiv Sans Bold та Kyiv Sans Regular.

2. Поєднуй шрифти в рамках шрифтової сім'ї

Шрифтові сім'ї — це шрифти однієї серії, які добре поєднуються між собою і відмінно працюють у контрастних кеглях та контурах.
Наприклад: шрифтова сім'я Roboto: Roboto, Roboto Mono, Roboto Slab, Roboto Condensed; сім'я шрифту Kyiv Type: Kyiv Sans, Kyiv Serif, Kyiv Titling.

3. Використовуй типографічні пари

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

Наприклад, @kukuruza_blog використовують два шрифти: Ermilov Bold — для заголовків та невеликих елементів дизайну, Open Sans та його накреслення — для основного тексту.
Типографічну пару ти можеш підібрати самостійно або скористатися вже готовими сервісами та добірками: fontpair.co, canva.com/font-combinations, typotheque.com/fonts/combinator/latin.

Також раджу обов'язково прочитати статтю від Readymag про типографічні пари.

4. Пам'ятай про правила:

Якщо ти ще не хочеш зупинятися на одному шрифті, то ось комбінації шрифтів, які працюють:

  • антиква+гротеск;
  • гротеск+гротеск;
  • гротеск+брусковий

Не варто брати різні шрифти та ставити їх разом просто так. Тут краще не експериментувати, тому що може вийти дуже дешево та недоречно. Але якщо дуже хочеться — просто починай заглиблюватися в цю тему, читати проф. літературу та вивчати шрифт «зсередини».
Як не можна поєднувати шрифти
1. Не поєднуй дуже схожі шрифти.
Це безглуздо візуально перевантажувати глядача, якщо шрифти мало чим відрізняються.

2. Не використовуй акцидентні (декоративні, рукописні тощо) шрифти різного розміру та кольорів одночасно.
Буде складно сприймати текст і розуміти його суть.

3. Не використовуй акцидентні (декоративні, рукописні тощо) шрифти у великих масивах тексту.
Його складно читати. Людина після двох рядків просто втомиться на нього дивитися.

4. Не використовуй більше одного акцидентного (декоративні, рукописні тощо) шрифта.
Ти також ускладниш сприйняття тексту, і він виглядатиме «дешево».

Давай розглянемо приклад нижче з домашкою учасниці цього потоку. Для контексту — це одна сторінка А4, але ми її розбили на дві частини, щоб було зрозуміліше.

Переглянь та скажи, швидко зчитується інформація, все зрозуміло та зручно читати до кінця?
А ось приклад, як виглядав би цей же візуал, якщо використовувати лише один шрифт і два його накреслення (Open Sans Regular, Open Sans Bold):
Вийшло просто? Так. Чи легко сприймається інформація та чи все зрозуміло? Теж так. А в цьому є головна функція дизайну: донести інформацію так, щоб була зрозуміла суть.

Можна також погратися: залишити акцидентний заголовок і підзаголовок, а для масиву тексту використовувати Open Sans — читабельність від цього не зміниться, але виглядати буде цікавіше.

Пам'ятаємо: іноді не варто йти в дизайн там, де він насправді не потрібен (у масивах тексту, наприклад).

Чек-лист:

  • використовуй максимум два шрифти одночасно;
  • поєднуй шрифти в рамках однієї гарнітури;
  • поєднуй шрифти у межах шрифтової сім'ї;
  • використовуй типографічні пари;
  • спробуй використовувати комбінації шрифтів, що працюють (з теорії);
  • не поєднуй дуже схожі шрифти;
  • не використовуй декоративні шрифти різних розмірів;
  • не використовуй більше одного декоративного шрифту;
  • не спотворюй шрифт;
  • не роби обведення і не додавай тінь.
Характеристики шрифту
Тепер давай трохи заглибимося в характеристики шрифту, з якими тобі потрібно буде працювати (нижче знайдеш відео, де шукати все це в Figma):
Тепер давай подивимося як з цим працювати у Figma, і в яких випадках нам це знадобиться:
Будь ласка, у жодному разі не роби це зі шрифтом:

  1. Не змінюй шрифт самостійно (не розтягуй, не стягуй, не спотворюй);
  2. Не роби обведення тексту: це ж не меми зі шрифтом impact, а якісний дизайн;
  3. Не додавай тінь. Чому? Це виглядає дешево. Щоб зробити текст більш «помітним», використовуй інші інструменти: колірний контраст, контраст шрифта, простір, композицію і т.д.
  4. Не давай жирність шрифту обведенням. Є ж накреслення Medium, Bold, Black і т.д.
Як працювати з текстом правильно
Лови ще кілька моментів, на які варто звертати увагу, коли працюєш з оформленням тексту.

1. Не роби текст дуже дрібним
Інакше його просто не читатимуть.
До того ж, не забувай, що ти перебуваєш у контексті Instagram, де шрифт менший за 20pt вже погано сприймається. Тому тестуй свій допис з телефону (шукай найменший телефон) та дивись, чи читається твій текст за масштабом.

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

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

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

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

3. Стеж за інтерліньяжем (міжрядковим інтервалом)

Рядки не повинні «‎злипатися»‎, але і не повинні бути далеко один від одного. Став у шрифті автоматичний інтерліньяж — у хороших шрифтах він чудово виглядатиме по пропорціях. Але в деяких він може трохи не відповідати, тож доведеться ручками підправити.
4. Не використовуй капс у великих масивах тексту

Тільки у заголовках. Якщо багато рядків, то текст може складно читатися, як би візуально добре він не виглядав.
5. Не роби рядки надто довгими чи надто короткими

Найоптимальніший варіант — це приблизно 60-70 символів, умовно 3-4 слова, менше — вже не дуже добре.
6. Не залишай вдови та висяки в кінці рядка
Вдови — це самотнє слово, що залишилося в останньому рядку. Редагуй текст, змінюй розмір так, щоб такого не траплялося.

Висяки — це прийменники, які залишаються наприкінці рядка. Пам'ятай, що прийменник йде разом із наступним словом і їх не можна розділяти. Тому наприкінці, коли допис готовий, пройдися по тексту і перенеси на наступний рядок всі свої самотні прийменники.

Також не можна переносити знаки пунктуації на наступний рядок: тире, двокрапка, крапку кому і т.д. Ми залишаємо їх наприкінці рядка.

7. Використовуй правильні лапки

У кирилиці ми використовуємо «лапки-ялинки», а в латиниці "лапки-лапки".

8. Використовуй довге тире

Ось цей знак «-» зазвичай ставлять і як дефіс, і як тире. Але це не правильно.

1. Довге тире —
Використовуємо між словами у реченнях:
Він — Маяковський. Тире — це знак пунктуації.

2. Короткий тире –
Воно використовується між цифрами:
5–7 травня. 100–200 пунктів

3. Дефіс -
Використовується в словах:
більш-менш, рано-вранці
Де шукати шрифти
Ліцензия на шрифт. По-перше, ми не використовуємо піратські шрифти (тобто платний шрифт, який завантажили безкоштовно).

Використовуємо безкоштовні шрифти у відкритому доступі, такі як Google Fonts (тут хороші якісні шрифти з відкритою ліцензією), або купуємо їх.

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

а) не етично;
б) загрожує судовим позовом.

Де шукати шрифти:
https://fonts.google.com/
https://www.awwwards.com/awwwards/collections/free-fonts/
https://www.myfonts.com/hotnewfonts/
https://pangrampangram.com/
https://t.me/shrift_free
https://www.behance.net/ (із запитом Free Font)

Додаткові медіа про шрифт:
http://rus.paratype.ru/
https://minttype.com/
https://yurigordon.com/en/shop/fonts
https://type.today/ru

Telegram-канали для наглядовості:
https://t.me/awdee
https://t.me/typeschool
https://t.me/newfonts
https://t.me/paradigm_graphics

Тема шрифтів вийшла досить великою, сподіваємось, що тебе це не відлякало. А тепер спробуй пройти цей тест по типографіці :)
Чек-лист:

  • не роби текст надто дрібним;
  • використовуй прості та зрозумілі шрифти;
  • стеж за міжрядковим інтервалом;
  • не використовуй капс у великих масивах тексту;
  • не роби рядки надто довгими або надто короткими;
  • не залишай вдови та висяки в кінці рядка;
  • використовуй правильні лапки;
  • використовуй довге тире.