Здоровий глузд: дописи з тегом шрифт

Розмір шрифтів у навігації

Sat, 31 Aug 2024 09:48:36 +0200

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

Можливість прочитати текст з відстані залежить від двох факторів: гостроти зору людини, яка читає текст, та розміру літер. Ці значення обернено пропорційні: ідеальний зір це гострота = 1 (ну або ж 100%), дозволяє читати менший текст (або з більшої відстані). Чим менша гострота зору, тим більший текст потрібен. Але при цьому завжди є обмежена площа для інформації (у просторі або ж у матеріалах), тому це завжди буде компроміс між достатньою читабельністю тексту.

У цьому дописі спробував зібрати усі матеріали на цю тему, з якими стикався. Якщо у вас є доповнення, то пишуть мені на пошту.

Стандарт Transport for London

Перший документ, в якому зустрів опис розмірів тексту — гайдлайни транспорту Лондону (TFL; чомусь останнім часом працює тільки через vpn). Ця картинка присутня майже у кожному документі дизайну знаків. В цій картинці наведена таблиця типорозмірів, які використовуються всюди у транспорті й показана шкала розмір тексту та відстань з якої текст читатиметься.

По цих цифрах видно що на кожен 1 м відстані має бути 3,4 мм прописна літера (Cap height) та 2,5 мм рядкова літера (x height).

Size E: 12 м = 30 mm xh = 41 mm Ch

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

Стандарт DIN 1450

DIN 1450 — німецький стандарт. Рекомендації ґрунтуються на нормальній гостроті зору принаймні 70% (гострота зору ≥ 0,7). Доведено, що практично прийнятними є коефіцієнти від 1,4 (гострота зору ≥ 0,5) до максимального 1,75 (гострота зору ≥ 0,4). Використовуючи ці коефіцієнти, розмір шрифту можна помножити для текстів, спеціально розроблених для читачів з порушеннями зору.

Для відстані 1 м = 3,8 мм розмір x-height (або 22,8 pt; це саме про рядкову, а не загальний кегль).

Калькулятор по стандарту DIN 1450, який враховує також поправки на освітлення, вид текста, кут зчитування тощо. Також там наведена механіка обчислень і посилання на вижимки зі стандарту. Дуже корисний інструмент.

Які ще зустрічаються документи

Я намагаюсь збирати різні згадки по розмірах літер. Цифри всюди дуже схожі між собою і на наведені вище стандарти, тому можна на них орієнтуватись.

Презентація Urbanite

Дуже гарна презентація від Urbanite про процес навігації. Там згадуються такі цифри: 10 мм рядкова літера на 3 м відстанв, або 3,3 мм на 1 м.

Wolfstrome

Часто в Пінтересті можна зустріти таку картинку від студії Wolfstrome, але її ніде немає в нормальній якості. Цифри: 4.4 мм Cap height (заголовна) на 2 метри.

Стаття студії Farm

У цій статті згадуються такі цифри: 20 мм Cap height на 5 м, або 4 мм на 1 м. А ще наводиться розмір для зчитування з авто залежно від швидкості: 40 мм для 30 км/год.

Навігація в аеропорту Далласа

У гайдлайнах аеропорту Далласа вказаний розмір Cap height 1’’ дюйм на відстані 25‘ футів, або 25,4 мм на 7,62 м, або 3,33 мм на 1 м.

Гайдлайни навігації медзакладів Австралії

У документі зустрічаються ті ж 10 мм на 3 м, або 3,33 мм на 1 м.

А це ще документ з Британії.

Гайд транспортної та велонавігації Окленду

У документі є схожа картинка, як в TFL, але розмір у пунктах, тобто це кегль, а не розмір літери: 600 пт на 45 м, або 13,33 pt (4,7 мм кегль, а літера ті ж 3,33 мм) на 1 м.

The Legibility of Serif and Sans Serif Typefaces

Великий документ авторства John T. E. Richardson про дослідження читабельності шрифтів на папері та екрані.

Роботи дослідниці шрифтів Sofie Beirer

Різні роботи є на сайті, а згадаю я роботу Reading Letters. Designing for legibility. Там згадуються теж різні аспекти читабельності літер.

Автомобільна навігація

Під час досліджень автомобільної навігації знаходили такі цифри: 10 мм літери на 4,8 м відстані. Цифра дещо більша, оскільки умови зчитування на дорозі більш критичні (менший час, більша швидкість).

Експеримент А3 для київських адресних табличок

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

Саккади та як ми читаємо текст

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

Ще приклад саккад на сайті Leserlich.

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

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

Офтоп. До речі, тому всі рухомі рядки тексту на транспорті погано працюють, бо як раз не дають читати слова повністю. І поки довга назва покажеться, автобус вже поїде. Для уникання проблем є гарна практика — виводити лише кінцеву, бажано коротку і додавати піктограму (наприклад, М для позначення метро, чи потяг для вокзалу). Цього достатньо щоб зрозуміти напрям, а вже детальний маршрут має бути на зупинці і всередині рухомого складу.

Сам експеримент

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

Спочатку думали просто випадкові вимволи набирати, а потім ще й прибрали виносні і трохи скоротили кількість символів, щоб трохи швидше тестувати

Тож ми ставили зразки різних кольорів на велику відстань і пропонували підходити по кроках, доки людина не починала читати всі літери на табличці. Фіксували відстань замірювали гостроту зору кожного, і потім проаналізували все.

Рома та Рита тестують різні варіанти

Зараз вже результат не знайду, але ми дійшли висновку читабельності літер десь 3,5 мм на 1 м. Тому вирішили що можемо спокійно користуватись таблицею TFL для схожих шрифтів.

Ще один з тестів, який могли бачити — тестування тексту в метро. Хоч воно більше стосувалося вибору кольору тла для знаків з підсвіткою в умовах недостатнього освітлення метро.

Що в Україні

Окрім ДСТУ по дорожніх знаках (але це окрема тема), єдиний документ, який хоч якось торкається теми читабельності тексту — ДБН В.2.2-40:2018 «Інклюзивність будівель і споруд. Основні положення», в конкретно додаток В. В ньому наведено наступну таблицю розмірів:

Але ця таблиця і додаток в цілому викликає лише питання. На чому основані такі величезні розміри літер, які в 5-10 разів більші за закордонні? Чому діапазон з різницею в два рази і на які саме цифри орієнтуватись для 30 метрів: на 52 см чи на 104? Додатково сумніви в реальності описаного викликають назви шрифтів, які, по-перше, написані з помилками, по-друге, вказані такі, які не варто використовувати для навігації взагалі. Тобто за цим документом немає ніякого обґрунтування.

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

₴

Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️, задонатити чи підписатись:

на Базу
напряму на картку Монобанку або через сайт.

Новий шрифт для інтерфейсів — Road UI

Thu, 16 May 2024 15:45:35 +0200

Зроблений Андрієм Константиновим (Minttype) на основі дорожнього шрифту Road UA. А надихнули та ініціювали проєкт Олександр Вілінський (студія Superclear) та Стаc Говорухін, які в робочих проєктах вже використовували дорожній шрифт.

Завантажити шрифт: agentyzmin.github.io/Road-UI-Font

Основне:  

форми літер краще адаптовані під екран і трохи тонші;  
зроблені пропорційні стрілки та моноширинні цифри; 
з’явилось нахилене накреслення.

Накреслення, цифри, стрілки

Приклади:

Проєкт на Гітхабі. Ліцензія CC BY—ND 4.0, можна використовувати в комерційних проєктах.

Окрема подяка за можливість реалізації студії Super Clear — Design studio for early stage startups.

Шрифт Proba Nav2

Sat, 23 Mar 2024 18:01:44 +0200

Навігаційний шрифт Proba Nav2 тепер доступний публічно для некомерційного використання. Його зробив Андрій Константинов (студія Mint Type) на основі свого шрифту Proba Pro, що став стандартом державних вебсайтів.

Також це неофіційний шрифт київської навігації: від схем та плакатів у метро до адресних покажчиків, розкладів та навігаційних стел, та і в цілому проєктів А3. Містить транспортні піктограми, лігатури, табличні цифри та інші opentype-фічі.

Ліцензія така сама як у RoadUA — CC BY—NC—ND 4.0, а шрифт розміщено на Github.

Завантажити: probanav.a3.kyiv.ua

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

p.s. Сторінка дещо криво зверстана, але якось дороблю потім, хай шрифт буде доступним вже зараз.

Навігаційні шрифти

Mon, 22 Feb 2021 12:44:21 +0200

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

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

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

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

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

У таких шрифтах важливі два параметри: legibility та readability.

Legibility (розрізнення) — легкість розпізнавання окремих знаків. У подібних літер має бути максимально різна форма, щоб не виникало плутанини при читанні. Потрібне розпізнавання літер I, i, 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 їх немає і їх доводилось малювати додатково. А іноді бувають окремі шрифти з піктограмами, як то Wayfinding Sans Symbols.

Wayfinding Sans Symbols

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

Піктограми у шрифті Бюросайн

Цікаве на тему

Sofie Beier робить цікаві дослідження про шрифти, наприклад:

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

(Російське) Відео Олександри Королькової про те, як працює шрифт. Вона там як раз розповідає про характеристики шрифтів для навігації (з 12:16).

 Додатково наочні відео про гарну кирилицю в шрифтах:

Якщо знаєте український контент на цю тему, поділіться, будь ласка.

P. S. Список шрифтів

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

Закордонні:

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 (🟢 free).
Inter з увімкненою опентайп-фічею ss02 (stylistic set), від RSMS (🟢 free).

Українcькі:

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

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

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

Підбірки:

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

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