{"id":2412,"title":"\u0423\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0438\u0432\u0430 \u0438 \u043f\u0435\u043d\u0438\u044e \u043a\u0438\u0442\u043e\u0432","url":"\/redirect?component=advertising&id=2412&url=https:\/\/vc.ru\/special\/sound&placeBit=1&hash=1620c155cf544062859cfaabcc12f9dd73613708c43c381ba3dbf0828037edcd","isPaidAndBannersEnabled":false}
Офтоп
Ян Корвин

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

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

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

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

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

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

Да, здесь размер в 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 и подписывайтесь на мой блог. От донатов отказываться тоже не буду.

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

{ "author_name": "Ян Корвин", "author_type": "self", "tags": ["\u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430","\u0442\u0435\u043a\u0441\u0442","\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c","\u0434\u0438\u0437\u0430\u0439\u043d","ux","ui","fff","000"], "comments": 65, "likes": 129, "favorites": 255, "is_advertisement": false, "subsite_label": "flood", "id": 174869, "is_wide": true, "is_ugc": true, "date": "Tue, 21 Jul 2020 17:38:36 +0300", "is_special": false }
0
65 комментариев
Популярные
По порядку
Написать комментарий...

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

9

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

0

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

6

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

2

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

1

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

4

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

3

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

1
6

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

1

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

6

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

2

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

1

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

1

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

0

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

имеет место.

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

1
Районный Мика

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

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

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

0

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

2
Районный Мика

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

0

Ну, у мелкомягких на это немного другой взгляд, например:
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.

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

1
Районный Мика

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

1

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

0

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

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

0

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

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

Касательно вашего комментария ниже про масштабирование в винде. Это довольно интересная ситуация. Все их элементы, которые сделаны в период 8-10 винды прекрасно живут в условиях ретины и любого масштабирования. А интерфейсы же, пришедшие к нам еще со времен до этого (панель управления как яркий пример) — жесточайше мылятся при попытке их смасштабировать. ред.

0
Районный Мика

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

0

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

0

есть такая штука, как em и vh
Но ей не все пользуются
https://learn.javascript.ru/css-units ред.

2

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

0

ссылку прикрепил

1

Правильно. В идеале задаётся только одна величина - 16px font-size для body (и то кажнтся можно обойтись font-size 100% для html элемента). Все остальное указывается в em. ред.

0

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

1

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

0

Насколько я знаю, адаптация под разрешения и все вот это прочее - задача программистов.

3

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

0

Кто как считает, видимо ¯\_(ツ)_/¯ 
Моя знакомая верстальщица с кучей лет опыта и отличными навыками говорит, что дизайнер не обязан рисовать все варианты дизайна - это забота программиста сделать так, чтобы  дизайн в разных разрешениях и на разных устройствах адекватно отображался)
Понятно что есть нюансы, но в целом, имхо, звучит правильно. 

0

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

0

Не, именно с точки зрения адаптивности - что куда должно ужиматься и переезжать на других разрешениях)

0
Привлекательный браслет

Хотел бы добавить, что не стоит текст на белом фоне делать полностью черным (на dtf стоит почему-то полностью чёрный)

0

Так я вроде это упомянул)

2
Привлекательный браслет

Точно) Извини) Пролистнул случайно, видимо

0

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

–1

В статьях - белый. Contrast ratio ровно 21:1

2

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

0

Почему?

0
Привлекательный браслет

В статье описано, я не заметил

0

Я тоже)

0

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

0

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

2

Добавить объёмную тень под текст, и при этом желательно поставить болд

0

а зачем подписываться если текст выходит в оффтоп...

0

Это обман, чтобы набрать классы.
Ну и вообще:
а) Не всегда будет в Оффтоп
б) В блоге будут дополнительные посты, которые "стыдно" отдельно  постить в большие подсайты
в) А как я буду чесать своё ЧСВ?

1

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

0

Уже давно.

0

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

1

Я всегда ставлю все точки на i.

1

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

2

OLX дизайнер-садист или просто слепой.

0

Синий текст на тёмных кнопках это адово)

1

В OLX есть дизайнер-дурочек который решил, что так красиво. А еще он нарисовал фиолетовый текст на черной кнопке. #дизайнермудак

0

Даже и не припомню когда кто-то в вэбе делал выключку по ширине. А жаль.

0

А можно читабельный сделать читаемым?

0

Если это такой тонкий намёк на то, что слово "читабельный" - это какой-нибудь англицизм, засоряющий русский язык, то мимо. Это неологизм, да, но в русском языке он используется. Как раз-таки "читабельный" больше используется для обозначения того, что легко прочитать. А читаемый - это популярный.

0

И? Я знаю что одно из значений - "тот, который можно легко прочитать". Это вообще не значит, что слово читабельный не существует или употреблено неверно.

0

Мы имеем 2 слова: одно литературное, другое - разговорная калька с английского:
https://ru.m.wiktionary.org/wiki/%D1%87%D0%B8%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9

Когда стоит вопрос, какое лучше употребить в публицистическом тексте, мне кажется, выбор очевиден.

0
Читать все 65 комментариев
null