Шрифты и доступность: dyslexia-friendly, контраст, размер

Доступная типографика — это не «сделать шрифт крупнее». Это набор правил, которые затрагивают выбор шрифта, размер кегля, межстрочный интервал, контраст с фоном и выравнивание. Эти правила помогают не только людям с дислексией или нарушениями зрения, но и всем остальным пользователям: текст становится читаемее на любом экране и при любом освещении. В этой статье — практический гайд по доступной типографике, с примерами из каталога FontHub.

Web Content Accessibility Guidelines (WCAG) — международный стандарт доступности веб-контента, разрабатываемый W3C. Актуальная версия — WCAG 2.2 (2023). WCAG определяет три уровня соответствия: A (минимальный), AA (средний, рекомендуемый для большинства сайтов), AAA (максимальный, для специализированных сервисов). По типографике WCAG даёт конкретные числовые требования, которые можно проверить.

Главные требования WCAG по типографике: контраст текста с фоном — минимум 4.5:1 для обычного текста (уровень AA), 7:1 для уровня AAA; для крупного текста (18 px+ или 14 px+ bold) — 3:1 (AA), 4.5:1 (AAA). Размер текста — WCAG не задаёт минимальный кегль, но рекомендует возможность увеличения до 200% без потери функциональности. Изменение текста не должно приводить к обрезанию или наложению элементов.

Дислексия — нарушение способности читать, которым страдает около 10% населения. Специфические «dyslexia-friendly» шрифты пытаются помочь, изменяя форму букв так, чтобы их было сложнее перепутать. Самые известные — OpenDyslexic (бесплатный, с акцентом на «утяжеление» нижней части букв, чтобы они «не переворачивались»), Dyslexie (коммерческий, разработанный Кристианом Боером), Lexie Readable (бесплатный, акцент на уникальных формах каждой буквы).

Эффективность этих шрифтов — предмет споров. Одни исследования показывают улучшение скорости чтения у людей с дислексией, другие — не находят значимой разницы. Многие специалисты по доступности считают, что выбор «специального» шрифта — менее важно, чем общие правила типографики: размер, межстрочный, контраст. Хорошая практика — не «навязывать» dyslexia-friendly шрифт всем пользователям, а дать возможность переключиться на него в настройках сайта.

Из общедоступных шрифтов лучше всего для людей с дислексией подходят sans-serif с активной x-height и хорошо различимыми формами букв. Inter, Roboto, Manrope — хорошие варианты из каталога FontHub. У них все буквы уникальны по форме, нет «похожих» пар (как у некоторых serif с засечками), и они хорошо читаются при разном размере. Для длинного контента лучше не использовать шрифты с высокой декоративностью (Playfair Display, Space Grotesk) — они могут затруднять чтение.

Минимальный кегль для основного текста — 16 px. Это рекомендация WCAG и общая практика веб-дизайна. Меньший кегль допустим только для подписей, меток и второстепенной информации. Для людей с нарушениями зрения рекомендуется 18–20 px как базовый размер, с возможностью увеличения через настройки браузера. Никогда не используйте кегль меньше 12 px — он нечитаем для большинства пользователей.

Межстрочный интервал (line-height) — не менее важен, чем кегль. Для основного текста рекомендованный line-height — 1.5–1.7 (в CSS это 150–170% от кегля). Меньший межстрочный — для заголовков (1.1–1.3), больший — для длинного контента (1.6–1.8). Межстрочный интервал влияет на читаемость не меньше, чем сам шрифт: слишком «плотный» текст утомляет, слишком «воздушный» — разрушает ритм чтения.

Длина строки — третий параметр, влияющий на доступность. Оптимальная длина — 50–75 символов на строку. Слишком короткие строки (меньше 40 символов) заставляют глаз часто перемещаться, слишком длинные (больше 80) — затрудняют возврат к началу следующей строки. Используйте max-width: 65ch для основного текста, чтобы автоматически получать оптимальную длину строки.

Контраст текста с фоном — ключевой параметр доступности. WCAG задаёт минимальные значения: 4.5:1 для обычного текста (AA), 7:1 для AAA. Проверить контраст можно инструментами вроде WebAIM Contrast Checker или DevTools в Chrome. Для текста на белом фоне (#FFFFFF) минимальный цвет текста для AA — #767676 (для AAA — #595959). Светло-серый текст на белом часто не проходит WCAG — будьте осторожны с «приглушёнными» цветами.

Цвет — не единственный носитель информации. Если вы выделяете ссылку только цветом (например, синим в чёрном тексте), люди с дальтонизмом не увидят её. Решение — добавьте подчёркивание или другой визуальный маркер. WCAG требует, чтобы любая информация, передаваемая цветом, дублировалась другим способом: формой, размером, текстом, иконкой. Это особенно важно для форм, ошибок и предупреждений.

Выравнивание: по левому краю, не по ширине. Выравнивание по ширине создаёт неравномерные пробелы между словами, что затрудняет чтение. Для людей с дислексией это особенно критично — неравномерные пробелы могут восприниматься как «разрывы» в тексте.

Жирность: не используйте чисто курсив для длинного текста. Курсив сложнее читать, чем прямой шрифт. Для акцентов используйте жирность (font-weight: 700), а не курсив. Если курсив нужен (например, для цитат) — делайте его коротким, не более одного абзаца.

Подчёркивание ссылок: всегда показывайте ссылки подчёркиванием, не только цветом. Это помогает людям с дальтонизмом и нарушениями зрения идентифицировать ссылки. Подчёркивание можно убирать только при hover, но в покое оно должно быть.

Ещё об одном инструменте: тестируйте доступность типографики с помощью автоматизированных инструментов. Lighthouse в Chrome DevTools даёт базовую оценку контраста и размера шрифта. axe DevTools — расширенный аудит доступности, включая типографику. WAVE от WebAIM — бесплатный онлайн-инструмент, который показывает проблемы с контрастом и читаемостью на конкретной странице. Эти инструменты не заменяют ручное тестирование с реальными пользователями, но дают быструю обратную связь на этапе разработки. Рекомендация: прогоняйте аудит доступности на каждой итерации дизайна, а не только в конце. Исправление проблем с контрастом или размером шрифта на ранней стадии стоит 5 минут, на поздней — 5 часов (когда типографика уже зашита в дизайн-систему). В каталоге FontHub мы помечаем шрифты, у которых есть особенности с доступностью: например, Playfair Display имеет высокий контраст штрихов, что может быть проблемой для людей с нарушениями зрения при мелком размере. Inter, Roboto, Manrope — помечены как «доступные для UI» из-за активной x-height и нейтральной пластики. Используйте эту маркировку при выборе шрифта для проектов с высокими требованиями к доступности.

«Доступность — это не особые случаи. Это базовый уровень качества.» — Эрик Эггерт

Доступная типографика — это не «дополнительная фича для инвалидов». Это набор правил, которые делают текст читаемее для всех. Кегль 16+, line-height 1.5+, контраст 4.5:1+, выравнивание по левому краю — это не «специальные требования», это базовый уровень качественной веб-типографики. В каталоге FontHub для доступных проектов лучше всего подходят Inter, Roboto, Manrope — нейтральные гротески с активной x-height и хорошо различимыми формами букв. Подключайте их через наш CDN с автоматическим subsetting и font-display: swap — и ваш текст будет читаемым для всех пользователей, без исключений.