Шрифти для stories

02.05.
23, 15:07 Шрифти для stories
Шрифти для stories

Модуль: Блок 2. Оформлюємо stories та керуємо увагою через візуал
Поговоримо на дуже важливу тему – підбір шрифтів, шрифтові пари.

Аби тобі було легше орієнтуватися в уроці, тримай короткий план, про що ми поговоримо у
цьому навчальному матеріалі:
Основні види шрифтів

Як шрифти передають настрій
Як поєднувати шрифти
Загальні правила
Висновки
За допомогою шрифтів можна створити потрібний настрій та враження від твого проєкту.
Основа класного візуалу — це текст та колір, тому до підбору шрифтів треба ставитися
відповідально. Для правильного підбору шрифтів треба знати, які види шрифтів взагалі
існують.
Усі шрифти поділяються на текстові та акцидентні (не лякайся слова, далі буде зрозуміліше).
Текстові шрифти використовуємо для великих масивів тексту. Вони мають бути простими та
читабельними. П.с. ці шрифти можуть бути використані і для заголовків також, звісно.
https://kukurudza.kwiga.com/courses/kurs-zi-stories/shrifti-dlia-stories?hml=TVTeoLBTUb453WuMIJhbY16Jg3aCAD5P 1/31
02.05.23, 15:07 Шрифти для stories
Акцидентні шрифти призначені для використання у заголовках. Тому вони часто мають більш
помітний дизайн, що виділяється, аніж прості та відносно «‎стримані» шрифти, про які
говорили вище.
Акцидентний шрифт використовуються для того, щоб створити настрій. Саме він виділятиме
твій акаунт серед конкурентів (у поєднанні з фірмовими кольорами, стилістикою та
елементами, звісно). Запам’ятай, що такі шрифти не можна використовувати для основного
тексту, адже читабельність дуже падає і читати таке не захочеться нікому:
Інсує величезна кількість акцидентних шрифтів для різних проєктів та функцій (може бути
суто декоративна функція, наприклад, для творчих плакатів). Акцидентні шрифти можуть
виглядати як написи з малюнком, наприклад, з використанням штрихів, схожих на звичайний
почерк:
Вони можуть бути надто химерними, аби використовувати їх для stories, тому слідкуй за їх
читабельністю :)
Йдемо далі. Також шрифти діляться на три групи за своєю побудовую: антиква (з засічками),
гротеск (без засічок), брусковий (з великими засічками).
Давай розберемо кожну групу окремо, адже це нам допоможе підібрати класні шрифтові
пари. Кожна група передає свій настрій, котрий зчитується навіть при використанні в
основному тексту.
Антиква (SERIF) — шрифти із засічками. Зазвичай її використовують для набору основних

текстів та заголовків у книжках. Цей вид гарнітури був натхненний традиційною каліграфією і
вважається одним із найвідоміших та найстаріших стилів (антиква з’явилась ще у 15-му
столітті).
Шрифти цієї групи — класичні, виглядають досить витончено та елегантно, асоціюються з

традиційністю. До таких шрифтів відносяться Times New Roman, Georgia, Garamond,
Baskerville Old Face, Centaur, Vidaloka, Vogue, Playfair Display, Didot та інші.
Знайти шрифти із засічками можна на Google Fonts в категорії Serif (це зручний сервіс для
пошуку безкоштовних шрифтів, тому зберігай собі посилання).
Такі шрифти підійдуть для більш «‎спокійних» за настроєм брендів, що хочуть передати
впевненість та викликати довіру.
Гротеск (SANS SERIF) — це шрифти без засічок. Гарнітура почала набирати популярності у
20-му столітті. Сьогодні ж гротески використовують усюди: і як набірний шрифт, і для
заголовків. Гротеск виглядає сучасно та стильно, іноді вважається більш чітким і легким для
читання.
До гротеска відносяться: 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
Основні види шрифтів вивчили. Тепер більш детально поговоримо про те, як шрифти
передають настрій за допомогою своєї форми.
Користувачі схильні обирати продукт чи бренд, сенс та концепція якого влучно поєднуються
зі шрифтом. А це залежить від форми та накреслення літер.
На прикладі одного віжуала розберемося, як змінюється настрій залежно від шрифта:

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

здебільшого жінки, адже курсивний рукописний текст виглядає тендітно і його часто
використовують на вивісках салонів краси, магазинів жіночого одягу і т.д. А які у тебе
асоціації з такими шрифтами?
Схожі курсивні шрифти асоціюються зі швидкістю, адже мають сильну динаміку. Вони
мають квадратні форми та жирне накреслення. Підійдуть для віжуалів тренажерних залів,
СТО і усього, що зв’язано з рухом, швидкістю.
Звичайний витягнутий та тонкий за накресленням гротеск асоціюється із сучасністю. Для

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

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

Будь-який шрифт – це результат інтелектуальної праці, на який накладаються обмеження
авторського права. Тож, по-перше, краще не використовувати піратські шрифти (тобто
платний шрифт, який завантажили безкоштовно).
Спробуй завантажити безкоштовні шрифти у відкритому доступі, такі як Google Fonts (тут
хороші якісні шрифти з відкритою ліцензією), або купи платний шрифт. Як правило, файл із
описом ліцензії прикріплюється до архіву зі шрифтом, як це відбувається на сайті
fonts.google.com.
Зверни увагу, що кожен шрифт має різні ліцензії: для веб, для десктоп-версії, для соцмереж,
для сайту і т.д.. Завантажуючи шрифти з неперевірених джерел, ти береш відповідальність
за можливе неправомірне використання результатів чужої інтелектуальної праці (так само
працює і з картинками в Pinterest, краще використати спеціальні безкоштовні і платні стоки).
На комп’ютер завантажити шрифти з ліцензією можна тут:

https://fonts.google.com/
https://pangrampangram.com/
На телефон є варіант завантажити такі додатки із готовою бібліотекою шрифтів:
Loomy (достатньо написати текст потрібним шрифтом, і він скопіюється тобі в stories в Inst
за допомогою одного кліка)
Canva (додаток для повноцінного дизайну, є як на ПК, так і на телефон)

PicsArt (більше схоже на редактор світлин, але є багато цікавих функцій, у тому числі для
тексту).
Якщо ти підбираєш шрифти не на телефоні, то тримай корисні сервіси:
https://fontjoy.com/ — простий генератор шрифтових пар.

https://www.fontpair.co/all — це ілюстрована бібліотека шрифтових пар (усі шрифти — з
безкоштовної бібліотеки Google Fonts).
https://www.myfonts.com/pages/whatthefont — сервіс визначає шрифт за фото.
Добре. Ми розібралися із видами шрифтів, їх настроями та ліцензією. Так як, все ж таки,
поєднувати шрифти?
Ми поєднуємо шрифти, щоб відокремити головне від другорядного, велике від маленького,
зробити акцент чи навпаки його прибрати. Найбільш вдалі комбінації шрифтів утворюються
за принципом подібності чи навпаки — контрасту. Тобто два шрифти повинні мати якісь
спільні риси, або навпаки — відрізнятися.
Отже, які є можливі варіанти для stories (на прикладі шрифтів Instagram):
антиква + гротеск:
гротеск + антиква:
гротеск + гротеск:
антиква + антиква:
Як НЕ можна поєднувати шрифти?
Не поєднуй надто схожі шрифти. Це безглуздо — візуально перевантажувати глядача, якщо

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

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

віжуал, який захочеться прочитати:
1. Не використовуй більше двох-трьох шрифтів. Особливо, якщо у тебе недостатньо

досвіду. Обери фірмову шрифтову пару: перший шрифт для заголовків, другий — для
основного тексту (третій шрифт може бути, наприклад, рукописний і використовуватися рідко
для поодиноких підписів на віжуалі).
Зрівняй ці дві stories. Який варіант виглядає більш стильно та зрозуміло? До речі, фірмова
шрифтова пара підвищить впізнаваність та разом з унікальними декоративними елементами
стане візитівкою бренда.
2. Не роби текст дуже дрібним

Шрифт, менший за 25-30pt, уже погано сприймається на платформі Instagram. Не забувай,
що ти перебуваєш у контексті stories, які повинні зчитуватися за перші секунди. Тому, якщо ти
робиш візуал на комп'ютері, обов'язково перевір перед публікацією, як він виглядатиме зі
смартфона: чи видно усі елементи, чи легко читається текст. Порівняй приклади нижче.
3. Використовуй прості та зрозумілі шрифти.

Якщо у тебе великий масив тексту, не використовуй декоративні шрифти. Якими б гарними
вони не були, їх часто важко прочитати у великій кількості. Зрівняй приклади нижче. Обирай
прості шрифти для основного тексту, які будуть гарно читатися навіть у маленькому
масштабі. Для заголовків можна брати щось більш складне – акцидентні гарнітури.
4. Не залишай вдів та висяків у кінці рядка.

Вдови — це самотнє слово, що залишилося в останньому рядку. Редагуй текст, змінюй
розмір чи відстань між словами так, щоб такого не траплялося. Висяки — це прийменники,
які залишаються наприкінці рядка. Пам'ятай, що прийменник йде разом із наступним словом,
і їх не можна розділяти, бо так складніше читати текст.
Також забороняється:
залишати у кінці рядка відкриваючу дужку або відкриваючу лапку;
відділяти ініціали від прізвища або один ініціал від іншого;
відділяти пробілом знаки No, §, %, ° від цифр, яких вони стосуються;
відділяти цифри від одиниць виміру (роки, міліметри, сантиметри, метри, грами, кілограми,
літри тощо).
5. Вирівнюй текст за лівим краєм.

Рваний правий бік при вирівнюванні по центру чи за правим краєм — це не ок. Набагато
легше читати, коли очам є за що зачепитися наприкінці рядка. Можеш спробувати
вирівнювання по центру, якщо у тексті не більше двох рядків (!)
Який візуал простіше читається? Завжди вирівнюй текст за лівим краєм. Усе просто :)
6. Залишай достатньо вільного простору навколо тексту та між ним.

Вільний простір полегшує сприйняття інформації. Тому не розміщуй декоративні елементи
поруч з текстом, вони будуть відволікати. Також не соромся робити адекватну відстань між
рядками. Використовуй достатньо великий інтерліньяж (інтервал між рядками). Сусідні рядки
мають бути чітко відокремлені один від одного, так, щоб біле поле між ними перевищувало
(було більше за) міжслівний пробіл:
Тож, пам’ятаємо про достатнє «‎повітря» навколого тексту, аби він простіше зчитувався:
7. Не забувай про акценти у тексті.

Розставляй акценти правильно та на потрібних словах. Це теж спрощує життя користувачу
та одразу чіпляє його погляд. Як можна виділити потрібний текст? За допомогою кольору (як
на прикладі), а також розміру, накреслення (більш жирний шрифт) чи плашки. Тепер текст
виглядає не так сухо.
8. Роби достатню контрастність між текстом та фоном.

Якщо колір тексту та фону будуть з однієї гами або просто схожі, вони читатимуться важко.
Чим дрібніший текст, тим вищою має бути контрастність. Можна використати плашку або
просто затемнити фотографію на фоні. Порівняй приклади нижче. Друга світлина була зовсім
трішки затемнена, але текст читається уже набагато легше.
Також запам’ятай: усі слова в реченні відокремлюються лише одним пробілом. Після крапки
наприкінці речення теж використовуй лише один пробіл. Стрічка тексту завжди повинна мати
вигляд цілісного рядка без будь-яких дефектів.
Не набирай великі частини тексту курсивом, напівжирним накресленням або великими

літерами. Ці специфічні засоби акцентування суттєво погіршують сприйняття тексту.
А ще — запам’ятай ці табу:
Ніколи НЕ змінюй шрифт самостійно (не розтягуй, не стягуй, не спотворюй).
Ніколи НЕ роби жирність шрифту обведенням. Для цього є накреслення Medium, Bold, Black і
т.д. Також чорний контур, як на прикладі нижче, це моветон у дизайн-світі.
А тепер перевір себе: що не так з текстом на цих віжуалах?
Висновки. Після того, як обереш шрифт для свого проєкту, не забуть поставити йому кілька
запитань :) :
Чи передається ефективність мого продукту чи бренду (міцність/сучасність/м’якість/…)?
Чи передається рівень активності мого продукту (швидкість та молодість/спокій та
комфорт)?
Чи допомагає шрифт посилити тон, який я хотів (хотіла) би передати змістом тексту?
Чи підходить мій шрифт за настроєм концепції бренду?
Чи цей шрифт є розбірливим?
Платний шрифт чи безкоштовний?

Шрифти для stories

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Шрифти для stories

Uploaded by

Copyright:

Available Formats

02.05.

23, 15:07 Шрифти для stories

Шрифти для stories

Поговоримо на дуже важливу тему – підбір шрифтів, шрифтові пари.

Основні види шрифтів

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

Шрифти цієї групи — класичні, виглядають досить витончено та елегантно, асоціюються з

Брусковий (SLAB SERIF) — шрифти з жирними засічками, а точніше — засічки дорівнюють

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

Зрівняй, наскільки по-іншому зчитується текст з цим шрифтом. У схожих гарнітур ЦА

Звичайний витягнутий та тонкий за накресленням гротеск асоціюється із сучасністю. Для

Тож, потрібно розуміти, у якому середовищі буде знаходитися бренд.

Якщо це ділове середовище, щось пов’язане із бізнесом та фінансами, то підійде прямий та

Але і не забуваємо про авторське право на шрифти.

На комп’ютер завантажити шрифти з ліцензією можна тут:

На телефон є варіант завантажити такі додатки із готовою бібліотекою шрифтів:

Canva (додаток для повноцінного дизайну, є як на ПК, так і на телефон)

Якщо ти підбираєш шрифти не на телефоні, то тримай корисні сервіси:

https://fontjoy.com/ — простий генератор шрифтових пар.

Як НЕ можна поєднувати шрифти?

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

А також не використовуй більше одного акцидентного (декоративні, рукописні тощо) шрифту.

Тепер переходимо до загальних правил, що допоможуть тобі зробити працюючий

1. Не використовуй більше двох-трьох шрифтів. Особливо, якщо у тебе недостатньо

2. Не роби текст дуже дрібним

3. Використовуй прості та зрозумілі шрифти.

4. Не залишай вдів та висяків у кінці рядка.

5. Вирівнюй текст за лівим краєм.

6. Залишай достатньо вільного простору навколо тексту та між ним.

7. Не забувай про акценти у тексті.

8. Роби достатню контрастність між текстом та фоном.

Не набирай великі частини тексту курсивом, напівжирним накресленням або великими

А тепер перевір себе: що не так з текстом на цих віжуалах?

You might also like