Олександр Колодко, артдиректор Агентів Змін, розповідає про особливості шрифтів, які варто обирати для навігації в «швидких» та «повільних» умовах. А ще пропонує свою добірку вдалих шрифтів та ділиться джерелами, що допоможуть підходити то вибору шрифтів ґрунтовніше, із врахуванням читабельності та сприйняття.

Фото: сайт Агентів Змін 

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

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

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

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

З чого складається шрифт

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

У таких шрифтах важливі два параметри: legibility (розрізнення) та readability (легкочитність).

Legibility — легкість розпізнавання окремих знаків. У подібних між собою літер має бути максимально різна форма, щоб не виникало плутанини під час читання. Важливе розпізнавання літер «I», «i», «l» (мала латинська «L») та цифри 1, «О» та цифри 0, літери «З» та цифри 3, «Ч» та цифри 4, цифр 1 та 7 тощо.

Порівняння Helvetica та Proba Nav2. Для розрізнення літер «і» та «l» додається хвостик та збільшується висота, для цифри 1 додається площадка та довший «ніс», цифрі 3 — гострий кут у верхній частині.

Readability (легкочитність) — легкість читання та сприйняття тексту. Висока легкочитність — це менше зусиль та вища швидкість читання. Це важливо для тих, хто може не розуміти прочитане (наприклад, локальні топоніми, не знайомі туристу).

На легкочитність шрифту впливають:

• жирність літер;
• внутрішній просвіт літери;
• відстань між літерами;
• пропорції та розміри літер;
• малюнок літер;
• стиль;
• інтерліньяж;
• колір та контраст у літерах;
• довжина рядка та речення;
• ширина полів;
• вирівнювання тексту.

Порівняння малюнку Helvetica та RoadUA. Видно, що Helvetica – не найкращий шрифт для навігації, оскільки у малих розмірах літери «с», «о», «е» можуть бути дуже схожими.

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

Характерні риси навігаційних шрифтів

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

Великий x-height. Висота рядкової у порівнянні з висотою великої літери. Дозволяє робити менший інтерліньяж між рядками, що дозволяє розмістити більше тексту на обмеженій площі.

Стиснуті пропорції літер. Заощаджують місце та дозволяють зробити більший розмір шрифту на обмеженій ширині носіїв. Геометричні гротески, на кшталт Futura, займатимуть більше місця, оскільки будуються на рівних геометричних фігурах (кругла «О» буде ширшою).

Відкриті форми літер (open aperture). Допомагають у малих розмірах краще зчитувати форму літер та не плутати літери між собою (збільшують легкочитність).

Більша відстань між літерами (трекінг). Трекінг можна налаштувати у параметрах тексту, але в базовому варіанті він теж може бути збільшеним.

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

Різні накреслення з оптичною компенсацією FS Millbank

Навігаційні піктограми. Плюсом буде наявність у шрифті стрілок та піктограм транспорту. Дивно, але не в усіх шрифтах є стрілки, наприклад, у шрифті Raleway їх немає, і їх доводилось малювати додатково.

Піктограми у шрифті Бюросайн. Доступні як символи і як додаткові опентайп фічі та лігатури, що дозволяє використати їх під час автоматизації верстки.

Sofie Beier робить цікаві дослідження про шрифти, наприклад: «Зчитуваність тексту на відстані (ПДФ)», «Розпізнавання різних малюнків цифр».

Порівняння відстаней, з яких зчитуються різні шрифти

Добірка навігаційних шрифтів 

Нижче даю перелік деяких навігаційних шрифтів, які розробляли саме під навігацію. Наприклад, на сайті Rentafont є ціла добірка таких шрифтів. Також хороший ресурс Signs (вивіски та частково навігація) на Fonts in use.

Закордонні:

• Frutiger від Linotype, хоча він вже морально застарів.
• Wayfinding Sans та стаття про особливість його розробки від FDI.
• Clearview  — новий шрифт дорожніх знаків США від групи дизайнерів.
• FS Millbank від FontSmith.
• Neue Haas Unica від Monotype.
• Museo Sans від Exljbris.
• New Hero від Newlyn.
• Signal від Production Type.
• Source Sans від Adobe (вільний доступ).
• Inter з увімкненою опентайп-фічею ss02 (stylistic set), від RSMS (вільний доступ).

Українські:

• Proba Nav2 шрифт київського метро на навігації від Андрія Константинова.
• Road UA новий шрифт дорожньої навігації від Андрія Константинова (вільний доступ).
• Osnova Pro та ZionTrain від Андрія Шевченка.

Ще кириличні шрифти (вирішувати чи використовувати російські шрифти лишається на совісті дизайнера):

• Navigo від Type.Today.
• Бюросайн від Бюро Горбунова.
• ALS Директ та  ALS Дипача від Студії Лєбєдева.
• Aeroport від brownfox

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