Веб типографика и читабельность для мобильных устройств

Позаботится о читателях

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

Веб типографика текста, вместе с интересным контентом могут улучшить читабельность и удержать пользователей на современном сайте. Более того, эти улучшения могут произвести хорошее впечатление на посетителей и сделать так, что они будут возвращаться на ваш сайт снова и снова. В свою очередь и поисковые системы положительно отреагируют на такую активность и обязательно повысят ваш сайт в общем рейтинге. Не правда ли, отличный стимул принять меры?

Читайте: все подробности про оптимизацию сайта seo-текстами ➠

Нельзя не согласится с тем что чтение — это труд. Как сказал один автор: “…когда я приучал себя читать, и должен был взять книгу, я был в положении человека, которому нужно было приблизиться к клетке со львом…”. Если к труду чтения мы добавим мелкий шрифт или тучи текста, не разбитого абзацами и заголовками, то вероятность прочтения наших текстов приближается к нулю.

Возможно вам понравится: Пример тз для копирайтера ➠

Область чтения на мобильном экране

Часто оптимизация сайта под мобильные устройства заканчивается после того как мы добились правильности отображения и хорошей скорости загрузки сайта. Эти достижения действительно хороший результат, но это ещё не всё. То, что область чтения не должна выходить за область экрана, знают все, но то, что она не должна иметь больших отступов от края экрана, не многие. Большие отступы чрезмерно сужают предложение в абзаце и это препятствует удобочитаемости.

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

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

Межстрочный интервал облегчает чтение. Если вы работаете в Word, обратите внимание на межстрочный интервал который стоит в Word по умолчанию. Это не случайный параметр. Люди из Майкрософт знают толк в чтении с экрана, они хотят, чтобы пользователь выбирал их продукт и ничего не настраивал. Если вы пройдетесь по популярным новостным сайтам, то заметите заметную схожесть межстрочного интервала для мобильных устройств. В большинстве, это интервал из программы Word. Предложения с таким интервалом легко читаются.

Оптимальный межстрочный интервал для мобильных устройств составляет 29 пикселей (параметр css: line-height). Попробуйте использовать на своих сайтах этот параметр. Если вы пренебрежете добавлением правильного размера, ваши хорошо построенные предложения могут стать одним большим блоком букв. Это очень не удобно и сделает вашу страницу очень непривлекательной для посетителя.

Наряду с межстрочным интервалом вы также должны убедиться, что в тексте достаточно места для остановки. Большие пробелы между абзацами помогают читабельности текста. Если вы используете больший размер шрифта, и забудете добавить пробелы для заголовков и абзацев, ваш текст будет по-прежнему плохо читаемым. Пробелы особенно важны на мобильном устройстве.

Читайте: все подробности про оптимизацию сайта seo-текстами ➠

Веб типографика шрифта: размер и цвет

Убедитесь, что вы используете как минимум 16 пикселей, как основной размера шрифта для своих текстов. 16 пикселей размер который не плохо читается как на больших экранах рабочего стола, так и на мобильных экранах. Предпочитаемый размер шрифта для веб-сайта в настоящее время немного больше, чем десять лет назад. Тогда шрифт размером 10 пикселей позволял вам добавлять больше текста на страницу и делал вашу страницу более похожей на книгу.

Какой цвет шрифта использовать во многом зависит от типа вашего сайта и того, какой дизайн использует ваш сайт. В общем, считается, что использование черного шрифта на белом фоне по-прежнему считается лучшим. Общая мысль состоит в том, чтобы очертания были четкие, а буквы легче различать и идентифицировать.

Если вы сомневаетесь в правильности выбора цвета фона и шрифта, можно проверить этот параметр. Существует целый ряд инструментов, каждый со своим контролем контрастности. Очень простой и удобный — это Colorable. Colorable позволяет вам вводить передний план (цвет текста) и фон (цвет фона). Он сразу сообщит вам, если контраст правильный или неправильный, и какой результат получает комбинация цветов. Colorable основан на рекомендациях по доступности WCAG.

Вывод

Убедившись, что ваш текст написан красиво и не слишком сложно, не останавливайтесь на этом. Чтобы правильно прочитать текст, веб типографика вашего текста тоже должна быть в порядке. Обязательно используйте оптимальный размер шрифта, подумайте о контрасте используемых цветов и добавьте пробелы. Внимания на этих аспектах читаемости, позволит вам произвести положительное впечатление на посетителей вашего сайта, которые захотят вернуться.