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

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

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

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

Читайте про: Мобильное seo продвижение  ➠

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

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

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

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

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

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

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

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

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

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

Возможно вам понравится: Узнайте как писать seo статьи и сео тексты

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

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

Google рекомендует: Размер шрифта менее 16 пикселей слишком мал, чтобы быть разборчивым и вынуждает, посетителей мобильных устройств «прибегать к увеличению размера шрифта», чтобы удобно читать. Стремитесь иметь 75% текста страницы с размером в 16px. Читайте: Основы отзывчивого веб-дизайна

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

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

Вывод

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

80%
Рейтинг

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

  • Актуальность
1 Комментарий
  1. […] Читайте о важности типографики и читабельности ➠ […]

Оставьте ответ

Добавить свой вопрос!

Вы получите уведомление по Email, когда вам ответят/обновят!

+ = Ответьте вы человек или спам-робот?