Цінність багатошрифтового дизайну

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

"Дуже подобається сайт, тому що він не боїться порушувати одне з перших правил шрифту - не використовувати занадто багато різних гарнітур. Використовується чотири шрифти, два з сімейства sans-serif і два з serif - Galaxie Copernicus, Interstate, Harriet і Nimbus Sans. Основний момент такого дизайну - послідовність, і сайт Бетані Хек послідовно використовує кожен з шрифтів для своєї мети.

- Джеремія Шоаф, Typewolf

Розцінюю це, як виклик. Спасибі, Джеремія!

Хочу посперечатися і розповісти про цінність еклектичних систем, і про те, як створити структуру проекту, щоб ефективно використовувати спільно кілька шрифтів.

Так чому ж у нас є правила щодо кількості використовуваних гарнітур?

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

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

У правила трьох є логіка. Ви вибираєте робочу гарнітуру, виділену гарнітуру - для індивідуальності, і третю - для особливих випадків. Гарнітури схожі на сім'ї - якщо у вас більше трьох діточок, то хаос вам гарантований. Кожна гарнітура, яку додають у дизайн, збільшує відповідальність. У неї є свої потреби, бажання і вимоги - і чим більше ви додаєте, тим більше у вас турбот на шляху до ефективної візуальної комунікації.

Тепер я хочу обговорити цитати на зразок цієї:

Немає ніякого сенсу використовувати більше трьох шрифтів, в будь-якому дизайні (не тільки для вебу) - і все, не більше, вибачте.

Не плутайте переваги з правилами

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

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

Побудова еклектичної системи: робимо пари

Будуючи систему гарнітур необхідно почати з хороших пар шрифтів. Іноді для цього потрібні лише стосунки двох різних літер. Цей приклад фірмового стилю для виставки від Джессіки Свендсен [Jessica Svendsen] і Джулії Нович [Julia Novitch] використовує відмінну пару з Bureau Grotesque і Letter Gothic. Це настільки контрастна пара, що є ризик її дисонування, але суть її успіху в схожих характеристиках букв - таких, як «r» в Letter Gothic і «a» в Bureau Grotesque. Вони обидві виглядають ліниво, як рука, що звішується з ліжка суботнім ранком. Схожість у структурі букв - все, що потрібно, щоб ця комбінація була успішною.

Почавши з таких сильних комбінацій, ви можете більш ефективно будувати системи і додавати гарнітури, що обіграють їх початкові відносини. Якби ми будували більш глибоку систему шрифтів, виходячи з цієї початкової пари, геометричний брусковий шрифт Serifa добре б підійшов в якості відправної точки. Він додасть контрасту ширини і стилю із засічками, при цьому привносячи відчуття стабільності і чогось знайомого завдяки своїм геометричним корінням. Абсолютно безпечний шрифт, який із задоволенням візьме на себе роль більш суворого партнера, порівняно з більш легкою початковою парою шрифтів. А ще я додам в цю суміш Sweet Sans, оскільки він НАЙКРАЩИЙ. Потрібно буде враховувати деякі правила, наприклад, тільки «прописні букви» і «завжди збільшена відстань за шириною», щоб система мала сенс. Прописні літери забезпечать нам візуальне об'єднання з геометричним брусковим, а великі відстані зв'яжуть шрифт з Letter Gothic.

Як видно з прикладу, ми ґрунтуємося на взаємозв'язку між Letter Gothic і Bureau Grotesque. Letter Gothic ліворуч плавно перетікає у заголовок праворуч. Serifa приковують розділи бічного меню, а Sweet Sans впорснуть для створення грайливих деталей. Усі чотири гарнітури чудово уживаються один з одним і створюють унікальний вигляд і відчуття.

Однак можна порушити всі правила і змусити ці шрифти виглядати тривожними і неузгодженими. Увага...

О боже, я все зіпсувала! Перетворюємо Bureau Grotesque в прописні букви, і основа відносин між гарнітурами втрачається, і вся система розпадається. Точно так само, перемикаючи інші шрифти між режимами «всі прописні», і нормальним, ми втрачаємо логіку і відносини між шрифтами, завдяки яким працює система. Якщо ви помітили велику кількість використовуваних в дизайні гарнітур, це, можливо, сталося через їх незграбне використання, не наступного ніяким правилам.

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

Не бійтеся подібних чорт

Точно так само, як потрібно брати до уваги відмінності в шрифтах, потрібно грамотно використовувати схожі гарнітури.

Одне з найбільш часто повторюваних правил з приводу створення пар гарнітур - уникайте пар із занадто схожих гарнітур, шукайте добре видимі відмінності у формах букв. Невелика відмінність у шрифтах може бути сприйнята аудиторією як помилка. Літери «a» і «g» відразу ж видадуть використання різних шрифтів.

Уривок вище зі статті Adobe використовує Helvetica і Univers, і це приклад поганого підбору пари, оскільки ці шрифти занадто схожі. На перший погляд вони дуже схожі, але давайте проаналізуємо гарнітури і зрозуміємо їх відмінності.

Зверху у нас Helvetica, а знизу - Univers. Helvetica характерна близьким розташуванням букв, через що рядки займають менше місця, хоча самі букви чіткі і широкі. Univers порівняно простий, у нього немає прикрас на кшталт завитка на хвості «y», і незважаючи на більш вузький малюнок букв, рядки займають більше місця через більш щедру міжбуквену відстань. Особливо це помітно між «B» і «r».

Визначивши ці відмінності, чи можемо ми знайти приклад, що виправдовує використання обох шрифтів?

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

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

Увага, приклад з життя!

Вирушаючи на розвідку бренду Hive Works, я намагалася досягти того настрою, який посилався б на історію дизайну IBM, викликало б відчуття наукової лабораторії, і мало інтернаціональну естетику, щоб надати структуру різношерстим стилям.

Я почала з Interstate і використовувала його тільки в прописному вигляді. Потім додала Tiempos Text для теплоти, тому що переживала через холодність джерел мого натхнення. Мені хотілося додати ще хоча б одну гарнітуру без засічок, щось, що було б більш дружнім і придатним для використання в прописному і рядковому вигляді. У ролі двох останніх варіантів виступили Calibre і Founders Grotesk, обидва від Klim Type Foundry.

На перший погляд вони досить схожі. Founders - це гротескний шрифт, з великою кількістю дружніх рис. Він вище і ширше Calibre. Додаткова ширина призводить до того, що висота рядкових літер здається меншою, хоті обидва вони практично ідентичні. Calibre вже, і на нього більший вплив зробили геометричні гарнітури типу Futura, а відношення висоти рядкових до висоти прописних букв робить його більш зручним і підходящим для невеликих текстів.

Спробувавши обидва шрифти в контексті, я побачила, що зв'язки Founders з інтернаціональним стилем затискали весь інший естетичний вплив на сторінці, а доданий контраст між висотою рядкових і прописних букв заважав шрифту працювати в парі з Tiempos Text в тексті. Calibre був більш геометричний, при цьому зберігав потрібні мені гротескні якості, і привніс те технічне відчуття, яке мені було потрібно, без зайвої холодності. Він добре ужився з міжнародним впливом, не будучи ним задавленим, а всі елементи зійшлися разом і утворили єдину естетику. Отже, замітано, так? Calibre працює краще за всіх, тому мені просто треба продовжувати використовувати його. Так? Ну...

Calibre добре поводився всюди всередині книги, але йому не вистачало тієї напористості, яку я хотіла досягти в заголовках сторінок. Це красива гарнітура, яка прекрасно працює, але навіщо мені зупинятися на прекрасному, якщо я можу досягти неймовірного? На великому масштабі пишні форми букв Founders чудово виглядають (ох вже ця «g» в нижньому регістрі!) і міжнародний вплив всередині книги не такий сильний, так що він не буде домінувати над естетикою. Додаткова ширина Founders приємно контрастує з акуратним і вузьким ввідним текстом в Calibre, тому він не тільки краще підходив для заголовків, але і допомагав показати, наскільки Calibre був при такому методі використання офігенно прекрасний. І ось, будь ласка, вам новий шар в моєму друкарському рішенні.

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

Створюємо інформаційну ієрархію

Один з кращих аргументів «за» додавання додаткових гарнітур - аудиторії буде простіше зрозуміти, на якого роду інформацію вони дивляться, ще до того, як вони почнуть читати. Зазвичай ваш текст - це купа параграфів, заголовків і підзаголовків. Не особливо захоплюючий предмет. І що, ви просто знизите плечима і вкрасите це сміття? Ні - тому що ви дизайнер, і суть вашої роботи не в цьому. Візуальний дизайн - це не тільки те, як виглядає контент. Це наука про те, як змусити контент доносити інформацію найбільш ефективним способом.

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

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

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

Найбільш екстремальний приклад, що я бачила, - "Друкарня для юристів" "за авторством Метью Баттеріка. Баттерік використовує не менше восьми шрифтів, і мені здається, що у нього це вийшло чудово. Багато дизайнерів сперечаються, що така палітра занадто еклектична, і що бажаного можна було б досягти і меншою кількістю шрифтів, або одним суперсімейством шрифтів. Ну взагалі-то будь-який дизайн можна зробити з меншою кількістю шрифтів. Будь-яка піца буде їстівною без добавок, але іноді мені потрібна піца-супрім! Знову ж таки, ваша бабуся, швидше за все, не знає, що таке суперсімейство шрифтів, тому що у неї є справжні проблеми - наприклад, дізнатися, коли буде наступна «Контрольна закупівля».

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

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

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

Шрифти як помічники інтерфейсу користувача

Який текст тут активний, а який - ні? Навіть додавання кольору не забезпечує необхідну ясність у цьому питанні, оскільки частина зеленого - всього лише прикраса.

Хороший дизайн інтерфейсів славиться чітким визначенням функцій всіх інтерактивних, інформативних і допоміжних елементів на екрані, що підсилюють розпізнавання цінності об'єкта укупі з його зручністю. Справа не тільки в тому, що говорить слово, але і в тому, що воно робить. Шрифти - миттєво розпізнавані допоміжні елементи, і ми повинні цим користуватися.

На моїй основній роботі директора творчої служби в Microsoft Power BI нас змушують використовувати один шрифт, і жахливий. Segoe. Та в нього навіть назва жахлива.

Проблема Segoe, крім того, що він нікудишній, в тому, що занадто складно просити один шрифт передати всі нюанси, що існують в складній програмі. Якщо ви поглянете на будь-яку програму в наборі Microsoft Office, ви помітите, яке навантаження накладають обмеження кількості гарнітур на інтерфейс. На сторінці є десятки елементів, всі записані одним шрифтом, і в більшості своїй - однієї товщини і кольору. Але не у всіх цих елементів одна функціональність. Частина тексту описує категорії та інформацію, інша - інтерактивна. Більше того, більша частина тексту робить вигляд, що вона інтерактивна, хоча насправді, немає (наприклад, «Get External Data» в лівому верхньому куті не інтерактивна). У результаті око устає від потоку подібних елементів, і користувач не впевнений, що зробить елемент тексту, поки не запозичує з ним. Ми змушуємо користувачів помилятися і відчувати, що вони зазнали невдачі.

Зазвичай, якщо необхідно показати різницю між функціями елементів інтерфейсу, прийнято використовувати рамки, обмежувачі, кольори, стрілки, іконки та інші прибамбаси. На ідею використовувати додаткові гарнітури для цієї мети будуть дивитися з несхваленням. АЛЕ НЕ В МОЄМУ ДОМІ!

- Привіт, я Segoe, і я гірше за всіх

- Привіт, я DIN, і я не такий сраненький

Для боротьби з цим в Power BI ми почали включати в дизайн другий шрифт. DIN - класична німецька гарнітура, прямокутна, трохи щільнувата, і з красивими циферками. Вона добре поєднується з Segoe завдяки іншому стилю, який при цьому не надто відволікає. Однак придумати, який ще шрифт додати - це тільки частина рішення. Нам ще треба визначити правила його використання. Як нам переконатися, що ми використовуємо DIN не тільки для стилістичного розмаїття, а саме як інструмент для допомоги користувачам?

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

Тепер немає питань з приводу того, що краще відрізняє інтерактив від інформації

У нас тепер є правило, що добре працює в світлих і темних інтерфейсах

Викуси, Segoe!

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

Приклад з життя: Eephus League

Паралельно зі всім цим аналізом і роздумами про переваги багатошрифтового дизайну мені здавалося, що мені потрібна хороша можливість поставити гроші на те, у що я вірю. Для цього у мене була відмінна можливість: веб-сайт Eephus League. Це невеликий бізнес, який я почала в 2010 році, що продає предмети, пов'язані з баскетболом. Не буду докучати вам з описом, оскільки ви дизайнери, і чомусь зневажаєте спорт майже так само, як любите одношвидкісні велосипеди і каву.

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

Якщо ви думали, що ви уникнете перегляду картинок в цій секції... Ну... Вибачте.

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

Було лише одне виключення з цього друкарського раю: сайт. Я зробила сайт влітку 2010 року, будучи бідним студентам, з обмеженою кількістю веб-шрифтів, тому він дуже сильно потребував оновлення. До цього я гралася з різними ідеями щодо сторінок, але застрягала на етапі дизайну. Він був жорстким, і у мене не виходило знайти кращий набір шрифтів, використаних мною раніше, для сайту.

Ні, недостатньо добре

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

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

Brothers. Ми всього його знаємо. Він так виділяється, що його дуже складно вбудувати в проект, не ламаючи всю естетику, але оскільки у мене в розпорядженні було так багато шрифтів, я могла використовувати його в якості заголовків тут і тільки тут. У мене не було ризику розмістити його в занадто великій кількості місць, і при цьому він все одно приносив мені користь, розмістившись в моєму дизайні. Це ключовий аргумент на користь еклектичних систем. Він дає вам свободу використовувати шрифти, щоб вони були акторами, які виконують епізодичні ролі, що додають родзинки у ваш дизайн, не затьмарюючи всі інші його частини.