Як обирати шрифти: веб-дизайн

Telegraf.Design запускає серію матеріалів про вибір шрифтів для дизайну. В них експерти рекомендуватимуть, яких правил дотримуватися у роботі зі шрифтами та ділитимуться досвідом роботи з типографією. В першому матеріалі Ілля Кульбачний розповідає про вибір шрифту для вебдизайну.

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

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

У своїй роботі я опираюся на декілька критеріїв у виборі шрифту

1. Чи є брендбук?

На етапі брифінгу я запитую в замовника, чи є взагалі якісь гайдлайни або брендбук? Частіше за все, нічого немає. А якщо і є, швидше за все, потрібно використовувати той шрифт або шрифтову пару, яку радять графічні дизайнери, котрі створювали стиль. Звісно, можна сказати «та ті дизайнери зробили якусь дурню, а я зараз усе це швиденько перероблю і буде супер-пупер!». Так часто думають початківці.

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

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

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

Читайте також: Найстрашніша помилка дизайнера – незадоволений клієнт

2.Який у тебе характер?

Коли з айдентики взагалі нічого немає, а часу й бюджету на її повноцінну розробку бракує, ми створюємо її під час розробки мудборду. І тут ми запитуємо в клієнта: який характер має передавати бренд через сайт? Тут уже говоримо прикметниками: сильний, міцний, агресивний чи лагідний, тендітний, легкий. Якщо словами важко передати стиль, можна скористатися сервісами для мудбордингу. Наприклад, savee.it.

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

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

3.У якому контексті буде використовуватися шрифт?

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

Саме тут і варто враховувати розмір кеглю на різних розширеннях екрану: телефон чи широкий монітор. Треба зважати й на місце застосування шрифту: заголовки чи body-текст, а також контрастність – легко зчитувати шрифт чи ні.

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

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

Комбінуйте гротески та антикви. Гротески (sans serif – без зарубок) гарно поєднуються з антиквенними шрифтами (serіf – з зарубками). Це створює гармонію та добрий контраст у тексті. Зазвичай, антикви використовують для набірного тексту, а гротески – для заголовків. Або навпаки. Ще краще поєднувати два різні сімейства шрифтів одного роду. Так, наприклад, антиква DM Serif Display добре працює з DM Sans – його беззарубковим родичем.

А PT Sans гарно поєднується з PT Serif – його антиквенним побратимом.

Не комбінуйте шрифти із різним настроєм. Варто розуміти, що у кожного шрифту є свій стиль і характер. І якщо його поєднати з іншим за духом шрифтом, будуть сварки, конфлікти і відчуття, що щось тут не так. Наприклад, краще не поєднувати модний Druk Wide з елегантною Georgia, або акцидентну Emblema One з нейтральним Palanquin.