Типографіка та доступність, акт 1: як вибрати правильний шрифт

Надто малий текст, типографіку важко прочитати, відстань між символами замала (або завелика), контраст надто низький… Усі ці елементи важливі, коли йдеться про читабельність і доступність текстів. Але яку типографіку вибрати серед існуючої безлічі, щоб гарантувати оптимальну доступність для всіх?

Коли ми говоримо про доступність, ми думаємо, зокрема, про доступність для людей з обмеженою мобільністю, з вадами зору та/або слуху... і це був, зокрема, один із перших кутів атаки в розвитку доступності будівель. Але в епоху цифрових технологій доступність стала головною проблемою в цій галузі і стосується кожного, оскільки проблеми з доступністю можуть торкнутися кожного. Візьмемо, наприклад, коди Wi-Fi Livebox:

«Це велика літера чи нуль? Велика i, мала L чи 1?» → Ключі Wi-Fi стали майстрами в мистецтві змусити нас втрачати голову, коли справа доходить до їх копіювання.

У цьому контексті ми всі стикаємося з проблемою читабельності та доступності, і перебування в цій ситуації «з обмеженими можливостями» не обов’язково означає наявність конкретної інвалідності. Проблема доступності може поставити нас усіх у таку ситуацію, і Луї-П’єр Гросбуа дуже добре підсумовує це:

« Інвалід (недієздатна) особа стає дієздатною (дієздатною) у доступному середовищі. Дійсна людина в недоступному середовищі стає інвалідом. »

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

Яку типографіку вибрати?

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

спеціально для задоволення 100% користувачів Інтернету. Комусь із певним шрифтом буде зручніше, а іншим буде складніше.

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

Рішення може полягати в тому, щоб дозволити користувачам вибирати типографіку, яку вони віддають перевагу. На жаль, це рішення нежиттєздатне. Дослідники справді показали, що учасники не змогли дійсно визначити, що для них найкраще, оскільки учасники читали на 14% повільніше, використовуючи шрифт, який вони віддають перевагу. А ще одне дослідження Nielsen Norman Group також показує, що більшість користувачів не використовують персоналізацію, коли вона доступна, а просто зберігають перегляд за замовчуванням.

Але тоді, якщо немає особливої ​​типографіки, яку можна віддати перевагу, і ми не дозволяємо користувачам Інтернету персоналізувати свій дисплей самостійно, як вибрати правильний шрифт? Ось кілька порад, на які варто звернути увагу при виборі.

Поради та підказки щодо вибору правильної типографіки

Сімейство типографіки

5 основних друкарських сімейств: Serif, Sans-Serif, Display, Cursive і Monospace

Існує п'ять основних друкарських сімейств :

  •  Зарубка : шрифти із зарубками (розширеннями, які завершують символи). Приклад: Garamond, Times New Roman, Georgia…
  •  без зарубок : шрифти без засічок, більш оптимізовані на відміну від попереднього сімейства. Приклади: Arial, Calibri, Helvetica…
  •  дисплей : більш химерні шрифти, вони зазвичай мають скоріше декоративне призначення.
  •  Курсивна : шрифти, що імітують рукописний текст. Приклади: Comic Sans MS, Caveat…
  •  Монопростір : шрифти з фіксованою шириною для кожного символу (наприклад, i у немоноширинному шрифті буде тоншим, ніж m). Наприклад: Roboto Mono, Source Code Pro…

Dn Моноширинна типографіка (тут угорі), кожен символ відображається в області однакової ширини. Навпаки, у немоноширинному шрифті (тут Serif унизу) ширина адаптується до кожного символу.

Під час розробки вашого рішення вибір сімейства шрифтів залежатиме від того, для чого він буде використовуватися. Для доступності абзаців тексту та загалом для Інтернету все ж краще віддавати перевагу знайомому шрифту з легко ідентифікованими символами типу Sans Serif.

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

Різні стилі типографіки

Щоб оптимізувати доступність, читабельність і розуміння ваших текстів, одним із ключових моментів є визначення пріоритетності вмісту. Для цього виберіть шрифти з декількома стилями, які дозволять вам виділити вміст без використання 10 різних варіантів типографіки (виділення, другорядна інформація тощо). Як мінімум виберіть типографіку з такими 4 класичними стилями:

● Регулярний ● Gras

Курсив    жирний курсив

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

Типографіка Raleway об’єднує 9 різних стилів і стільки ж для версії курсивом

Але будьте обережні: використовуючи відомий вислів «Найкраще — ворог хорошого», використання забагато різних стилів у вашому вмісті швидше ускладнить читабельність, ніж оптимізує його доступність. «Тонка» версія Raleway, наприклад, може бути не дуже доступною, оскільки вона (надто) тонка, щоб мати хороший контраст і хорошу читабельність.

багатомовний

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

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

Відмінності характерів

Віддавайте перевагу шрифту з усіма різними символами, особливо малим L, 1, великим i та дзеркальним буквам.

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

Щоб уникнути такої ситуації, ви повинні перевірити відмінності між малими літерами L, великими i та цифрою 1. У «екстремальних» випадках, наприклад у типографіці Gill Sans, 3 символи абсолютно однакові, що робить їх нерозрізними. . Інші шрифти, такі як Arial, містять розрізнення для цифри 1, але 2 літери залишаються незмінними. Ідеально вибрати шрифт, наприклад Fira Sans або Raleway, який використовує відмінності між 3 символами.

Також остерігайтеся дзеркальних літер dbp q. У деяких типографіях, таких як Helvetica, Arial або Gill Sans, ці літери є точно симетричними, що може легко призвести до інверсії. Віддавайте перевагу такому шрифту, як Raleway, який додає невелику відмінність між кожним символом, щоб полегшити їх ідентифікацію.

Використання та відображення шрифтів

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

Розмір і інтервал

Розмір тексту, очевидно, є важливою частиною доступності текстів. Надто дрібні тексти неминуче будуть важко читати. Репозиторії насправді не встановлюють мінімальний розмір за умови використання відносних розмірів (em, %…). Тим не менш, краще, щоб за замовчуванням були великі тексти. Зокрема, ми рекомендуємо тексти розміром від 14 до 20 пікселів на комп’ютері, від 13 до 19 пікселів на планшеті та від 12 до 16 пікселів на мобільному пристрої. Зауважте, що коли екрани стають все більшими й більшими, розміри символів для комп’ютерів мають тенденцію до збільшення. 14 px має тенденцію губитися, сьогодні більш звично знайти тексти від 16 до 20 px.

Окрім розміру тексту, також слід враховувати відстань між літерами, рядками та абзацами. Лінії, розташовані надто близько одна до одної або, навпаки, надто віддалені одна від одної, ускладнять оку перехід від однієї лінії до іншої. Символи або слова, розташовані занадто близько один до одного, ускладнять розрізнення між ними. І навпаки, якщо вони розташовані занадто далеко одна від одної, визначити зв’язки між літерами, які утворюють слово, буде важче. Ось рекомендації WCAG щодо інтервалів:

  • Між рядками: не менше 1,5 розміру тексту
  • Між абзацами: не менше подвійного розміру тексту
  • Між літерами: не менше 0,12 розміру тексту
  • Між словами: принаймні 0.16 розміру тексту

Вирівнювання

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

В епоху все більших екранів також уникайте тексту на всю ширину. Чим більший текст буде написаний, тим важче буде слідкувати за його лінією читання, особливо якщо текст написаний у звичайному розмірі від 14 до 20 пікселів. Загалом, для плавного читання найкраще мати розмір приблизно 100 символів на рядок.

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

Contraste

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

Ось рекомендації WCAG щодо цього пункту :

  • мінімальний контраст (Рівень WCAG AA: тексти повинні мати коефіцієнт контрастності принаймні 4.5 на 1. Виняток становлять великі тексти, для яких співвідношення повинно бути не менше 3 до 1.
  • Оптимальний контраст (Рівень AAA): тексти повинні мати коефіцієнт контрастності не менше 7 на 1. Виняток для великих текстів, для яких співвідношення має бути не менше 4.5 до 1. Плоскі: все одно будьте обережні з надмірними контрастами, які будуть контрпродуктивними, ускладнюючи читання та підкреслюючи втому очей. На папері текст, написаний чорним (#000) на білому (#fff), матиме оптимальне співвідношення (21:1). Однак цей сильний контраст може призвести до відчуття руху персонажів або ефекту ореолу, особливо для літніх людей, людей з дислексією або людей, чутливих до світла (синдром Ірлен). Щоб уникнути цієї проблеми, виберіть темно-сірий текст на білому фоні або чорний текст на світло-сірому фоні.

На читабельність сильно впливає контраст між текстом і кольором його фону. Для оптимальної доступності вибирайте коефіцієнт контрастності принаймні 7 до 1.

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

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

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

 

 


Жюстін ПІСМОНТ, дизайнер UX @UX-Republic


Наші наступні тренування