Как сделать текст более читабельным 🦕

Проблемы читабельности текста — это вопрос не только accessibility (доступности) сайтов и приложений для людей с нарушениями зрения. Это вопрос здравого смысла и комфортного чтения для любого человека. Давайте разберёмся, что можно сделать, чтобы сохранить юзерам глаза.

Как сделать текст более читабельным 🦕

Если нравятся подобные статьи и хочется больше — подписывайтесь 🦐

Вот о чём сегодня поговорим:

Размер текста

Не стоит делать текст слишком мелким. В вебе рекомендуется размер в 16px минимум для основного текста, особенно для «тяжёлых» сайтов, где его много. На DTF, например, размер текста превьюшек в ленте именно 16px. Основной текст в постах ещё больше — 18px.

Да, здесь размер в pt, а в тексте в px. Смиритесь с этим.
Да, здесь размер в pt, а в тексте в px. Смиритесь с этим.

Понятное дело, что 16px — не абсолютный минимум, текст меньшего размера тоже имеет место быть. Особенно для всякого рода второстепенных элементов. На DTF, например, подзаголовки в левом меню и теги в ленте размером «всего» 13px. Но когда дело касается, например, больших блоков текста — лучше не мельчить и в принципе стараться избегать размеров меньше 12px.

Длина строки

Как и везде, крайности в дизайне — плохо. Слишком длинные строки сложно читать физически — очень легко потерять следующую при переводе взгляда. Слишком короткие — усложняют чтение длинных текстов.

Как сделать текст более читабельным 🦕

Слишком длинные строки лучше не использовать в принципе, в то время как короткие можно использовать, когда текста мало. Оптимальным для веба считается длина порядка 65-80 символов (включая пробелы) или 600-700px. На DTF ширина статьи в десктопном виде равна 680px (~75 символов).

Интерлиньяж (межстрочный интервал)

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

Межстрочный интервал ветер северный
Межстрочный интервал ветер северный

Какого-то общего универсального правила по использованию межстрочного интервала нет, тут скорее целый набор небольших взаимосвязанных правил. В целом используются значения от 120% до 200% от размера шрифта. Для заголовков он обычно меньше, для основного текста — больше. В статье на DTF он выставлен на 1.6em, то есть 160% от размера шрифта, то есть 28.8px.

Выключка (выравнивание)

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

Как сделать текст более читабельным 🦕

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

Контраст

Контраст — не только одно из базовых требований доступности (accessibility), но и одна из самых значимых вещей, которые могут испортить пользовательский опыт. Если вы ещё не, сходу советую прочесть вот эту статью:

С контрастом, в принципе, всё просто. Если он будет слишком слабым, юзеру придётся напрягать глаза, чтобы прочитать текст.

Как сделать текст более читабельным 🦕

Например, в статье на DTF используется максимальный контраст между фоном (#fff) и текстом (#000) — 21. И хотя, на мой взгляд, текст немного резковат, и контраст можно было бы чуток снизить, это нормальный случай. А вот когда в тёмной теме приложения встречается обратное сочетание цветов — чёрный фон и белый текст, это работает в другую сторону. Читать такой текст невозможно — он слишком яркий и режет глаза.

Плохо сочетаемые цвета

В принципе, это продолжение предыдущего пункта. Даже если Contrast Checker говорит, что у вас всё в порядке, это ещё не значит, что текст можно легко прочитать. Нужно также внимание обращать на сочетаемость цветов. Некоторые не только отвратительно выглядят в сочетании друг с другом, но ещё и затрудняют чтение.

Адекватные гарнитуры (и их количество)

Да, конечно, существуют и просто «плохие» семейства шрифтов, но мы сейчас про них говорить не будем. Гарнитуры нужно использовать (как и всё остальное) с умом, адекватно ситуации.

Как сделать текст более читабельным 🦕

Если у вас нет какого-то особого авторского замысла, лучше использовать проверенные, «стандартные» гарнитуры вроде Arial, Roboto, Open Sans и тому подобные.

Помимо этого важно не разводить зоопарк — так ваш сайт или приложение просто будут выглядеть неряшливо. На картинке выше я использовал (в правом попапе) четыре разных гарнитуры, причём плохо подходящие ситуации — «декоративные» шрифты использованы как для основного текста, так и для кнопок. Мало того, что эта каша выглядит плохо, так ещё и читабельность стремится к нулю. В левом же примере можно наблюдать согласованность, благодаря которой попап выглядит аккуратно и читабельно.

На DTF везде (насколько я обращал внимание) используется Roboto, благодаря чему (помимо прочего, конечно) весь сайт выглядит как одно целое.

Да, это не все способы, и есть ещё вещи, на которые стоит обратить внимание, типа информационной архитектуры и расстановки акцентов (цветом, размером и т.д.), но я решил не перегружать эту статью 🦀

Если понравилось - не забывайте ставить icon--ui_arrow_up и подписывайтесь на мой блог. От донатов отказываться тоже не буду.

Если есть пожелания/предложения о чём написать или любой другой фидбек - прошу в комментарии!

11 показ
4.2K4.2K открытий
11 репост
65 комментариев

Отлично
Не сказать, что я чего-то не знал, но выглядит клево и написано информативно.

Ответить

Спасибо, я старался (:

Ответить

Комментарий недоступен

Ответить

Комментарий недоступен

Ответить

Увы, но да. Пример получился не самым хорошим) Но исправлять уже не стал ¯\_(ツ)_/¯ 

Ответить

Хороший пост)
Насчёт интерлиньяжа ещё есть хорошее правило "Внутренее меньше внешнего" (и наоборот). Означает, что расстояние между строк должно быть больше, чем между букв (межстрочный), но меньше, чем между абзацами и т.д. Вообще универсальное правило, очень помогает сделать ровно там, где на глаз никак не выходит)
По этому же принципу кстати расстояние между букв в крупных заголовках можно настраивать, чтобы текст не слипался.

Ответить

Ну воть... я хотель лобстером весь текст :с

Ответить