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

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарий удален по просьбе пользователя

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

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

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

Блин. Ну ладно, тебе разрешаю, так и быть

Это тест на монитор и глаза?) Я таки прочитал салатовую муру))

Поздравляю! Дарю тебе царственное нихрена и вот этот кактус 🌵

Круто! Нужно больше статей про всякие UI-штуки. Всегда интересно читать подобное.

@Denis Shiryaev бля сделайте уже чтобы превьюхи не мылились у маленьких картинок!
Ну невозможно же смотреть!

простые истины, но подача классная!
продолжайте)

Мерси)
Обязательно продолжу

имеет место быть
имеет место.

Спасибо за статью. Вроде интуитивно такие вещи понимаются, а вот визуалка помогает подкрепить догадки.

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

Почти что сферический показатель в вакууме. Важен его угловой размер.

Спасибо от тех, кто не может купить Elements of Typographic Style.

Комментарий удален по просьбе пользователя

Надо быть лишь немногим умнее тебя, чтобы понять, что 16px на 4к смартфоне и на 29-дюймовом 2к выглядят по-разному

Ну, у мелкомягких на это немного другой взгляд, например:
Font sizes in UWP apps automatically scale on all devices. The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible as a 24 px font on 5" phone that's a few inches away.

Но да, это частный случай, конечно.

Эпл на хвалёной ретине даже не скрывает, что логическое разрешение - всего 1280 по ширине. Наверное, из-за такого прямого метода и работает. А на винде на 4к до сих пор мыло иногда лезет, потому что масштабирование глючит.

Комментарий удален по просьбе пользователя

Чувак, физические пиксели никто не использует. Все скейлится И масштабируется нормально.

Ну в целом, по этой причине стали использовать не px, а их относительную разновидность pt, которая должна учитывать плотность пикселей на квадратный дюйм.

Вообще же, в условиях выставления соразмерного масштабирования (200% на 4к и 150% на 2к) шрифт будет визуально одинаков как на 27-дюймовом фулхд, так и на 27-дюймовом 4к мониторе, на 4к экране смартфона тоже будет смотреться нормально.

На двух ФХД мониторах с плотностями пикселей 120ппи и 320ппи текст будет выглядить по-разному, потому что размеры пикселей разные.
Нормальный рендерер должен всё сводить к физическому размеру, условно говоря, 12 пикселей "по ГОСТу" перейдут в 1,2 мм.
На словах легко, если б у какой-нибудь Мозиллы не было каких-то своих понятий о масштабе: у неё 14 как системный 10.

Читайте также: