Друкарня процес вибору шрифту
Одна з найцінніших навичок, які може освоїти дизайнер, — це вміння підбирати шрифти. Це пояснюється тим, що текст є одним із основних способів комунікації дизайнера з користувачем. Друкарня має вирішальне значення для дизайну.
Друкарня - річ складна і красива. Дехто присвячує роботі з нею всю свою кар'єру. На щастя для нас, вони докладно описують свій досвід, тому наші послуги мають цілу купу онлайн-ресурсів на тему типографіки.
Визначте свою мету
Насамперед, визначте мету, яку переслідує ваш дизайн. Яку інформацію ви бажаєте передати? У якому форматі?
У добрих дизайнах типографіка відповідає поставленій меті. Це важливо, тому що саме шрифти допомагають створити певний настрій, задають тон та стиль дизайну.
Якщо ви робите, скажімо, вітальну листівку з великою кількістю ілюстрацій, вибирайте шрифт, який буде поєднуватися з тим стилем, в якому вони виконані. Шрифт повинен гармоніювати з іншими елементами дизайну.
Якщо ви проектуєте вебсайт з акцентом на зображеннях, вибирайте простий шрифт, який не відволікатиме від них увагу користувача. Використовуйте шрифт як спосіб підкреслити інформацію, яку ви хочете донести.
Окресліть свою аудиторію
Визначившись із метою дизайну, вирішіть, для якої аудиторії ви його робите. Цей крок має величезне значення, тому відомості про користувачів (віку, інтереси, культурний фон) можуть впливати на рішення, які ви прийматимете при підборі шрифтів.
Інші шрифти більш доречні для людей похилого віку. Їх, як правило, відрізняє великий розмір букв, вираженаконтрастність, відсутність пропису та декоративних елементів.
При виборі шрифту враховуйте особливості та потреби своєї цільової аудиторії. Говорячи простіше, ставте себе на їхнє місце.
Шукайте натхнення
Подивіться роботи інших дизайнерів. Спробуйте зрозуміти, чим вони керувалися, приймаючи рішення використати саме ці шрифти.
За свіжими ідеями щодо шрифтів можете звернутися до The 100 Best Free Fonts від CreativeBloq – це чудове джерело, яке додасть вам потрібного настрою. У своїй статті CreativeBloq пояснює логіку, яку вони слідували при виборі кожного зі шрифтів.
Крім того, Invision склав цілий величезний репозиторій із ресурсами з друкарні. Там ви знайдете багато джерел для натхнення.
Якщо хочете надихнутись прикладом реальних веб-сторінок, раджу заглянути на Typ.io. На сайті зібрано колекцію джерел з цікавими рішеннями з усієї Мережі. Додатково для кожного семпла сайт відображає CSS-параметри шрифту під текстом.
Окрім спеціалізованих сайтів, можете відвідати свої улюблені сторінки та подивитися, що використовують там. Тут знадобиться інструмент WhatTheFont — розширення для Chrome, яке відображає інформацію про шрифт, коли наведеш мишку на текст.
Крім самих шрифтів, повивчайте різні варіанти їхнього поєднання — це не менш важливо. Правильні поєднання допомагають сформувати зорову ієрархію та зробити дизайн більш простим для сприйняття.
Перше джерело для натхнення, яке варто відвідати, це Typewolf. На Typewolf зібрані приклади цікавих поєднань із різних сайтів. Також вони пропонують рекомендації щодо підбору шрифтів та поглиблені посібники з друкарні. Для тих, хто працює зі шрифтами, це справжній скарб.
FontPair - ще один ресурс про те, як краще вибирати поєднання, призначений безпосередньо для роботи з Google Fonts. На ресурсі передбачена можливість сортування за поєднаннями стилів (наприклад, sans-serif та serif або serif та serif).
І нарешті, в мережі повно наборів готових поєднань від професійних дизайнерів. Скажімо, Typography: Google Fonts Combinations або Typography: Google Fonts Combinations Volume 2. Просто вбийте запит "font pairing" на Behance, Dribble та інших подібних сайтах.
Виберіть шрифт
Тепер, коли ви теоретично підковані та запаслися натхненням, можна розпочати вибір. У процесі відбору пам'ятайте три принципи: читабельність, розбірливість, мета.
Що стосується поєднань шрифтів, не робіть їх надто складними – обмежтеся трьома різними типами, не більше. Крім того, підбирайте контрастні шрифти. Це допоможе звернути увагу користувача: спочатку до заголовка, потім до основного тексту. Також створювати візуальний контраст можна за допомогою різних розмірів, кольорів та зображення.
Для веб-шрифтів можна використовувати Google Fonts, Typekit та Font Squirrel. На Google Fonts все безкоштовно, Typekit та Font Squirrel пропонують платні та безкоштовні варіанти.
Встановіть розмір
Тепер, коли ви визначилися із поєднанням, наступний крок – виставити розміри. Для цього є чудовий інструмент Modular Scale роботи Tim Brown, головного спеціаліста з друкарні компанії Adobe. Modular Scale - це система, що визначає співвідношення, які, як показує історія, найбільш приємні для ока, що вибудовує шкалу розмірів тексту на підставі цих співвідношень.
Припустимо, ви вибрали шкалу на основі золотого перерізу. Ось п'ять перших значень,які розрахує для вас система:
Golden Ratio (1:1.618) 1.000 x 1.618 = 1.618 1.618 x 1.618 = 2.618 2.618 x 1.618 = 4.236 4.236 x 1.6 = 11.089
Одна з проблем, з якою ви можете зіткнутися, - це те, що з якісь співвідношення занадто великі. Дивіться, що виходить, якщо продовжувати зі шкалою на базі золотого перерізу:
Golden Ratio (1:1.618) … 11.089 x 1.618 = 17.942 17.942 x 1.618 = 29.03 29.030 x 1.618 = 46.971 9 75.999 x 1.618 = 122.966
Як бачите, різниця між значеннями стає надто великою. Для більшості інтерфейсу потрібні менші інтервали. Але це не страшно: на Modular Scale представлено велику різноманітність шкал з геометрії, природи, музики.
Minor Second 15:16 Major Third 8:9 Minor Third 5:6 Major Third 4:5 …
Тому замість золотого перерізу ви можете використовувати інше співвідношення, яке дасть менші інтервали, наприклад Perfect Fourth.
Perfect Fourth (3:4) … 9.969 x 1.333 = 13.288 13.288 x 1.333 = 17.713 17.713 x 1.333 = 23.612 33.1. 75 x 1.333 = 41.956 41.956 x 1.333 = 55.927
Вибравши відповідну шкалу, можете насмикувати розмірів для різних типів шрифтів зі списку і округлити їх до цілих чисел.
Font Sizes Header 1: 55px Header 2: 42px Header 3: 31px Header 4: 24px Header 5: 14px Body: 17px Cap
Метод Modular Scale передбачає розрахунок розміру шрифтів з математичною точністю, проте це лише орієнтир. Використовуйте його, щоб отримати зразкові розміри, а потім підкоригуйте їх на око.
Створіть бібліотеку стилів для шрифтів
Залишився останнійкрок: створити бібліотеку стилів, щоб шрифти виглядали ідентично у всіх макетах.
У програмах типу Sketch можна створювати загальні стилі тексту, щоб швидко вставляти текст із вже заданими параметрами з таблиці стилів.
Саме на цьому етапі ви повинні остаточно визначитися з кольорами, зображеннями та розмірами. До речі про кольори: вибирайте їх з огляду на загальну палітру. Кольори тексту повинні гармонійно поєднуватися з нею.
Обов'язково увімкніть до бібліотеки стилів наступне: типи шрифтів, кольори, розміри та зразки. Таблиця стилів від Google's Material Design typography - добрий приклад того, як її складати. Також як посібники можна використовувати бібліотеки стилів від Mailchimp, Apple та Focus Labs.
Типографіка - це область експериментів, мистецтво та наука в одному флаконі. Я закликаю вас вийти із зони комфорту та активно досліджувати всі можливості.