18 січня 2025 р.

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

Порівняння великої літери А шрифтом з зарубками та без зарубок

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

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

Звичайно, у нас немає наміру вмістити всі відомості в один допис, бо тема справді безмежна. Сьогодні ми поговоримо лише про декілька ознак, які точно необхідно знати. Передусім, про ознаку, яка ділить шрифти на дві великі групи: Serif та Sans Serif – шрифти з зарубками (можна також зустріти термін «засічками») та без. Взагалі класифікацій шрифтів існує багато. Всі, напевно, знають про рукописні шрифти, декоративні шрифти, тощо. Але читаючи про вибір шрифту для основного тексту, саме класифікація за наявністю зарубок або засічок – перша, яка зустрічається на нашому шляху.

Маємо таке визначення, що ж таке шрифтові зарубки:

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

Але в більшості випадків рекомендації зі створення доступних документів як в друкованому, так і в електронному вигляді не радять нам користуватися шрифтами із зарубками. Поради одностайні у тому, що шрифти мають легко читатись і для цього рекомендують саме шрифти Sans Serif, адже шрифти з зарубками, такі як Times New Roman, містять поєднання тонких та товстих штрихів, які користувачеві прочитати важче.

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

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

Які приклади шрифтів із зарубками можна згадати? По-перше, це всім відомий Times New Roman – шрифт, який створили типограф Стенлі Морісон і художник Віктор Лердент 1932 року. Або також досить відомий шрифт Georgia, створений 1993 року Меттью Картером для Microsoft Corporation. До шрифтів без зарубок відносяться такі відомі шрифти як Arial, Helvetica, Verdana, Ubuntu.

Звичайно ми назвали лише невелику кількість шрифтів і про кожен можна розповідати окремо. Але наведемо лише декілька цікавих фактів:

· Дослідники з Лабораторії зорової ергономіки США назвали комп'ютерний шрифт Verdana найбезпечнішим для зору.

· Helvetica – шрифт, що було розроблено 1957 року швейцарським шрифтовиком Максом Мідінгером – є одним з найбільш вживаних шрифтів цього сімейства. Є версії для наступних алфавітів: латиниця, кирилиця, єврейська, грецька, японська, корейська, хінді, урду, кхмерська та в'єтнамська. Розроблялися китайські форми, щоб доповнити Helvetica.

· Ubuntu — шрифт без зарубок, що був розроблений лондонською шрифтовою компанією Dalton Maag. Фінансування здійснювала Canonical Ltd від імені Руху за вільне програмне забезпечення для операційної системи Ubuntu.

· Приблизне тлумачення слова убунту – людяність по відношенню до інших. Інший можливий варіант перекладу – віра у вселенські узи спільності, що зв'язують все людство.

А наостанок хотілося б згадати про ще одну дуже важливу для розуміння тексту ознаку. А саме: міжрядковий інтервал. Тим більше, що якщо вибір шрифтів чітко не регламентується, то міжрядковому інтервалу, відстані між абзацами, літерами та словами присвячено цілий параграф у Настановах з доступності вебвмісту (WCAG), а саме: §1.4.12 Міжрядковий інтервал.

Для цих властивостей тексту радять дотримуватись таких параметрів (Рівень AA):

- висота рядка (міжрядковий інтервал) принаймні в 1,5 рази перевищує розмір шрифту;

- відстань між абзацами не менше ніж у 2 рази перевищує розмір шрифту;

- інтервал між літерами (відстеження) принаймні в 0,12 рази перевищує розмір шрифту;

- інтервал між словами принаймні в 0,16 рази перевищує розмір шрифту.

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

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

Список рекомендованих джерел:

1. Настанови з доступності вебвмісту (WCAG) 2.1 [Електронний ресурс] / [вебсайт]. – Електрон. дані. – Режим доступу: https://www.w3.org/Translations/WCAG21-ua/#images-of-text-no-exception. – Назва з екрана. – Дата звернення: 16.01.2024.

2. Гайд безбар’єрних подій [Електронний ресурс] / [вебсайт]. – Електрон. дані. – Режим доступу: https://bbu.org.ua/gaid-bezbar-iernih-podii/. – Назва з екрана. – Дата публікації: 29.03.2024. – Дата звернення: 16.01.2024.

3. Іванова О., Лебідь М. Доступне інформування про соціальні, реабілітаційні та адміністративні послуги [Електронний ресурс] / Електрон. дані. – Режим доступу: https://cutt.ly/mF1KihI. – Назва з екрана. – Дата звернення: 16.01.2024.

4. Шрифти в інтерфейсах – Читабельність шрифтів – Текст у стандартах WCAG 2.1 – Лекція 5 | Projector [Відео] / [вебсайт]. – Електрон. дані. – Режим доступу: https://www.youtube.com/watch?v=SWVdq3wTevo. – Назва з екрана. – Дата публікації: 18.02.2020. – Дата звернення: 16.01.2024.

5. Класифікація шрифтів [Електронний ресурс] / [вебсайт]. – Електрон. дані. – Режим доступу: https://cases.media/en/article/anatomiya-shriftu-ch-2-klasifikaciya-shriftiv. – Назва з екрана. – Дата публікації: 18.02.2020. – Дата звернення: 16.01.2024.