Друкарня як вибрати ТІЙ самий шрифт, UXPUB
Інтернет схожий на лайно. Використання інтернету не повинно бути таким складним
Поділитися
Одна з найважливіших навичок, які має освоїти будь-який дизайнер, - як вибирати шрифти. Все тому, що текст - це один з головних способів комунікації з користувачами. Друкарня може як "зробити" ваш дизайн, так і повністю його зруйнувати.
У друкарні поєднуються краса та складність. Деякі дизайнери повністю присвячують свою кар'єру одним шрифтам. На щастя, їхня робота добре документована, так що у нас є тонни ресурсів по друкарні онлайн.
Цей пост створений для допомоги у виборі шрифтів під ваші дизайни. Він допоможе вам відкрити шрифти та шрифтові комбінації за межами тих, з якими ви вже знайомі.
Визначте свою мету
Перед тим, як щось робити, обов'язково позначте мету вашого дизайну. Яку інформацію ви маєте намір подати? Для якого середовища створюється дизайн?
У хорошому дизайні друкарня повністю відповідає його меті. Все тому, що саме друкарня – ключ у завданні настрою, тону та стилю в дизайн-проекті.
Наприклад, якщо ви малюєте вітальну листівку, навантажену графікою, виберіть шрифт, який підходить вашій ілюстрації. Гармонізуйте текст з іншою частиною дизайну.
Якщо ви створюєте лендинг, головним контентом якого є зображення, виберіть простий шрифт, який не відволікає від графіки. Використовуйте шрифт як спосіб підкреслити те, що ви хочете донести до користувача.
Якщо дизайн фокусується на зображенні, вибирайте прості шрифти, щоб графіка виходила на перший план.
Визначте свою аудиторію
Після завдання цілідизайну, визначте свою аудиторію. Цей крок критичний, оскільки вік та інтереси користувачів впливатимуть на вибір шрифтів.
Інші шрифти більше підходять літнім читачам. Це шрифти більшого розміру, у більш контрастних кольорах, у них немає химерного декору та інших елементів, які могли б ускладнити розпізнавання літер.
При виборі шрифту беріть до уваги особливості аудиторії та їх потреби. Іншими словами,виявіть емпатію до своїх користувачів.
Шукайте натхнення
Подивіться роботи інших дизайнерів. Спробуйте зрозуміти, на чому ґрунтувався їх вибір шрифтів.
Джерела натхнення
Відмінний пост на цю тему – 100 найкращих безкоштовних шрифтів на CreativeBloq. CreativeBloq пояснює мотивацію для вибору кожного представленого шрифту.
Invision також пропонує величезне сховище ресурсів із друкарні. Тут ви точно знайдете чим натхнитися.
Typ.io – цілий веб-сайт, присвячений шрифтам. Тут зібрані ідеї з усього Інтернету. Крім того, сайт надає CSS-визначення шрифтів внизу кожного прикладу.
Ідеї для комбінування
Крім просто шрифтів, шукайте ідеї для їхнього поєднання. Це не менш важливо, ніж шрифти окремо. Хороші шрифтові комбінації задають візуальну ієрархію та покращують читабельність дизайнів.
Для натхнення почніть з Typewolf. Typewolf показує ідеї щодо комбінування шрифтів з різних сайтів. Крім того, там ви знайдете рекомендації з друкарні та масу поглиблених уроків.
На FontPair також маса ідей щодо шрифтових пар, особливо щодо шрифтів Google. Ви можете фільтрувати комбінації за типом, наприклад sans-serif та serif, або serifта serif.
Також є цілі колекції шрифтових комбінацій, створені дизайнерами. Наприклад, Typography: Google Fonts Combinations та Typography: Google Fonts Combinations Volume 2. Просто погуглить “font pairing” на сайтах на кшталт Behance та Dribbble.
Виберіть свої шрифти
Озброївшись своїм ресерчем та знайденими ідеями, ви готові вибрати шрифт для свого дизайну. Тут слід дотримуватись деяких принципів:читабельність, розбірливість і мета.
Вибирайте шрифти, які легко та швидко читаються. Уникайте химерних накреслень на користь простих та практичних. Наприклад, деякі шрифти більше підходять для заголовків, ніж для тексту.
Томуперед вибором шрифту завжди визначайте його ціль.
Поєднуйте максимум три різні типи шрифту. Крім того, поєднуйте ті, які контрастують один з одним. Це допоможе читачам спочатку звернути увагу на заголовок, а потім уже пробігтися очима за основним текстом.Ви можете створити візуальний контраст і за рахунок різного розміру, кольору та жирності тексту.
Ви можете використовувати веб-шрифти з колекцій Google Fonts, Typekit та Font Squirrel. Google Fonts безкоштовні, а Typekit і Font Squirrel є як платні, так і безкоштовні шрифти.
Визначте потрібний розмір
Наступний крок після вибору комбінації – визначення розміру. Відмінний інструмент для цього – Modular Scale від Tim Brown, головного друкаря Adobe. Modular Scale – це система визначення об'єктивно поєднуються пропорцій шрифтів до створення розмірних шкал.
Наприклад, можна використовувати шкалу, засновану на золотому перерізі. Такими будуть перші 5 обчислених розмірів шрифту:
При використанні золотої пропорції ви можете зіткнутися з проблемою – занадто велика пропорція. Подивіться, що відбувається з наступними інтервалами шкали, заснованої на золотому перерізі:
Як бачите, інтервали між числами стають занадто великими. Для більшості інтерфейсів потрібні менші інтервали. На щастя, Modular Scale передбачені різні коефіцієнти, засновані на геометрії, природі і музиці.
Тому замість використання золотого перерізу ви можете використовувати пропорції, що генерують менші інтервали, наприклад чисту кварту.
Коли ви визначилися зі шкалою, можете вибирати розміри зі списку та заокруглювати їх до найближчого цілого числа.
Для генерації розмірів метод модульної шкали використовує математичне наближення. Хоча це лише підказка.Використовуйте цей спосіб як початковий посібник, і налаштовуйте точні розміри, спираючись на своє візуальне сприйняття.
Створіть посібник зі стилів типографіки
Останній крок у цьому процесі – створення посібника зі стилів друкарні, яке допоможе стандартизувати її для всього дизайну.
У програмах типу Sketch можна створювати спільні текстові стилі для швидкої стилізації тексту.
Тут ви можете грати та відточувати текстові атрибути, включаючи колір, вагу та розмір.
Пари слів про колір: при виборі відтінку враховуйте палітру кольорів проекту.Вибирайте кольори, які поєднуються із загальною палітрою.
У керівництві повинні бути принаймні наступніелементи: типи шрифтів, розміри, кольори та приклади використання.
Посібник з друкарні Google Material Design – гарний приклад того, що має включати посібник зі стилів друкарні. Пара інших прикладів – посібники зі стилів Mailchimp, Apple та Focus Labs.