Как сделать текст более читаемым
Делаем текст веб-сайта читабельным
Удобочитаемость (или «читабельность») — свойство текстового материала, характеризующее легкость восприятия его человеком. Одним из его составляющих является выбор шрифта, его цвет, фон текста и другие полиграфические особенности.
Удивительно, но именно об этой характеристике шрифта часто забывают. Дизайнеры либо пытаются уместить огромное количество информации на крошечном кусочке пространства, либо делают ставку на визуальную часть. Однако правило одинаково для всех: если ваш шрифт нечитабелен, ваш дизайн не работает в полную силу.
Вы можете спросить, а если шрифт непосредственно является элементом дизайна? Что ж, такой вариант имеет право на существование только в одном случае: если вы совмещаете красивый, но нечитабельный шрифт с другим — обычным, легким для восприятия читателем.
Читабельность в общих чертах
Итак, каков же признак читабельности шрифта? На самом деле, читабельность шрифта определяется набором таких характеристик, как длина строки, межстрочный интервал, начертание шрифта, отступы и выравнивание, цвет и контрастность.
Каждая из этих характеристик влияет на легкость (или сложность?) восприятия текста с экрана монитора. И учитывать их под силу любого дизайнера. Обратите внимание, что мы говорим о читабельности именно основного текста сайта, ведь именно в нем содержится важная для посетителя информация.
Читабельность на разных экранах
Итак, как же нам создать самый читабельный шрифт? Если говорить об основном тексте страницы, то существует несколько правил, касающихся количества символов в строке в зависимости от устройства, на которых этот текст читается.
С чего же начать? Оптимальная длина строк поможет вам определить размер текста, а именно ширину текстовой рамки — обычно ее можно задать для размеров экрана настольного ПК, планшета или мобильного устройства — и подобрать такой шрифт, чтобы текст укладывался в идеальное количество символов.
Совместив оптимальную длину строки с идеальным междустрочным интервалом, который может высчитывается как процент от объема текста или равняться ширине самой широкой букве данного шрифта.
Отличный инструмент для такой математики: Golden Ratio Typography Calculator
Еще несколько советов
Читабельность текста зависит не только от выбора шрифта. Заголовки, маркированные списки, дополнительные интервалы между абзацами, адекватный цвет — все это в сумме также увеличивает читабельность и улучшает юзабилити сайта.
Подумайте, как вы можете добавить следующие элементы в свой дизайн для создания функционального веб-сайта. И не забудьте выделить каждый из них особенным шрифтом, размером и цветом, сочетающимся с основным текстовым материалом сайта:
10 примеров читабельных шрифтов
Конечно, было бы грубейшей ошибкой не подкрепить все вышесказанное примерами. Поэтому ниже приводится список из десяти наиболее читабельных (и довольно популярных) шрифтов для вашего веб-сайта.
Читабельность текста: что это и как повысить этот показатель?
Дата публикации: 2016-10-25
От автора: всех приветствую. В прошлых двух частях статьи про поведенческие факторы очень много говорилось о читабельности. Очень много. А сегодня мы поговорим на эту тему еще конкретнее. Читабельность текста на сайте зависит от многих факторов, начиная от дизайна сайта и шрифтов, заканчивая оформлением каждой отдельной статьи. И раз это так важно, разберем все подробнее.
Дизайн/шрифты
Если говорить о читабельности и том, как на это влияет дизайн, то сразу почему-то хочется сказать про шрифты. Но оставим их пока в покое.
В первую очередь следует оценить сам внешний вид сайта. На каком фоне располагается текст? Есть ли рядом яркие блоки, которые отвлекают от чтения? Много ли на сайте рекламы, которая тоже отвлекает?
Когда-то были несчастливые времени, когда у меня не стоял блокировщик рекламы. Из-за этого иногда мне просто не хотелось просматривать страницу, потому что там была реклама ужасного содержания.
В общем, с этим все понятно. Теперь переходим к шрифтам. Очень важно, как смотрится текст на фоне. Именно тот текст, который предстоит читать. Наиболее частый вариант — черный текст на белом фоне. Это неплохо, но в целом более оптимальным считается не полный контраст. То есть не абсолютно черный на абсолютно белом. Поэтому цвет текста можно сделать чуть светлее черного.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Конечно, профессионально проконсультировать по этим вопросам вас может веб-дизайнер. Хотя иногда я видел такие макеты, что я сам бы сделал лучше, наверное. Вы должны понимать, что мелкий серый шрифт на черном фоне — это вариант, который совсем не годится.
Простой способ проверить сочетание цвета текста и фона — самому прочитать пару записей на своем сайте, а также дать это сделать друзьям. Если вы чувствуете какой-то дискомфорт, определенно что-то нужно менять.
Кстати, мы немного затронули размер шрифта. Как вы думаете, каким он должен быть? Во многих макетах я вижу, что у основного шрифта размер 10-14 пикселей. Но мое мнение (и не только мое), что минимум должно быть 16 пикселей. Буквы должны быть очень четко видны, человек со здоровым зрением не должен дополнительно напрягать глаза, чтобы что-то разглядеть.
С размером понятно, я думаю. Осталось обсудить сам шрифт, каким он должен быть. Для чтение оптимальными являются стандартные шрифты без засечек: Arial, Times New Roman, Tahoma, Verdana. Мое мнение в этом вопросе таково, что лучше не мудрить и поставить в качестве основного шрифт из числа стандартных.
Это очень полезно еще и по той причине, что наши глаза уже попросту привыкли к стандартным шрифтам — они окружают нас везде. Соответственно, когда вдруг для текста, который нужно читать, используется другой шрифт, это вызывает небольшой отторжение.
Итог по дизайну и шрифтам
Я не говорю, что сообщил вам какую-то сверх полезную информацию — вы и сами могли догадываться о тех вещах, о которых я написал. Но повторение — мать учения. Подведем итог:
Дизайн сайта в целом может влиять на читабельность. Например, яркие блоки рядом с текстом или реклама могут отвлекать
Цвет текста должен сочетаться с фоном. Лучше не брать полностью контрастные друг другу цвета, это может резать глаза
Размер шрифта должен быть побольше. Не 10-12 пикселей, а 16. А в идеале в начале каждой записи нужно сделать кнопки, кликая по которым читатель сам бы смог установить размер шрифта, удобный для него.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Для чтение лучше всего подойдет один из стандартных шрифтов без засечек
Оформление статьи
Второй и не менее важный аспект. Вы можете иметь на сайте отличный дизайн и замечательный крупный шрифт. Но если вы выложите полотно текста, мало у кого будет желание читать это до конца. В связи с этим, крайне важно использовать в записи другие html-элементы. Вот какие:
Жирный, курсивный, подчеркнутый, зачеркнутый, выделенный текст. Но не переборщить с этим тоже. Выделив нужные слова, читабельность заметно улучшается.
Подзаголовки. Наверное, самый важный элемент, который позволяет разбить статью на подразделы. Важно, чтобы подзаголовок не был слишком длинным (не более 60 символов).
Абзацы. Ну это понятно, не будете же вы писать весь текст в одном абзаце, верно? Хотя пару раз мне встречался такой текст. Это полный ужас. Но просто использовать абзацы мало. Нужно еще и контролировать кол-во содержимого внутри. Желательно не допускать, чтобы в абзаце было более 5-7 строк текста. Иначе его уже трудно воспринимать.
Списки. Где нужно — маркированные, в другом месте — нумерованные. Списки отлично улучшают внешний вид записи, привлекают внимание. Конечно, тут кое-что зависит и от дизайнера (какое он разработал оформление) потому что лично мне сильно не нравится дизайн, который есть для списков в html по умолчанию. И то он лучше, чем вообще не использовать списки.
Цитаты. Они оформляются отлично от обычного абзаца, поэтому позволяют тоже разбавить текст. Если есть возможность, стоит их использовать. Хотя бы иногда. Заодно это позволяет сделать сам текст интереснее.
Картинки. А куда же без них. Лучше использовать хоть какую-то картинку, чем вообще никакую. Основная цель изображений — разбить текст, сделать его чтение более простым, а также позволить мозгу лучше запомнить информацию. Потому что когда вы читаете про тигра, и в то же время видите его на картинке — это позволяет лучше запомнить, о чем вы вообще читали.
Собственные элементы (блоки). На многих сайтах я видел подобные блоки. Например, когда автор хочет дать какой-то совет, предупредить о чем-то, предостеречь и т.д. он заключает нужный текст в теги div с определенным стилевым классом, который и отвечает за оформление. Если дизайнер прорисовал дизайн этих блоков хорошо, то смотрится это красиво.
В принципе, из основных элементов это все. Тут бы можно было бы еще упомянуть таблицы, но часто ли вы в свои статьи вставляете таблицу? Думаю, не часто. Но там, где они есть, определенно читабельность не ухудшается.
Хорошо, а как проверить читабельность? К счастью, вы человек, поэтому можете и сами ее оценить. Если хотите, можете привлечь к оценке друзей или других вебмастеров. Этого будет достаточно.
Дополнительные советы и фишки
Как еще улучшить читабельность? Может помочь внедрение некоторых дополнительных стилей. Например, первую букву текста можно оформить не так, как все остальные. Это можно сделать в css с помощью псевдоэлемента :first-letter. Такой эффект часто встречается в книгах.
Также можно самый первый абзац начать с красной строки (свойство text-indent). Нужно обращать внимание и на такой показатель, как междустрочный интервал. Его нужно отрегулировать так, чтобы было максимально комфортно читать. Это уже более глубокая тема, которая заслуживает исследования с вашей стороны (вбейте в поисковик “вертикальный ритм текста”). Это если хотите копнуть глубже.
Пожалуй, это все, что я посчитал нужным сказать о читабельности. Можно еще добавить, что для больших статей неплохо было бы добавлять блок с кратким содержанием статьи, который содержал бы списком ссылки на все разделы записи.
Ну а основы приведения своих текстов в читабельный вид мы с вами разобрали. Используйте их, и тогда читать тексты в этом мире будет немного приятнее.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Читабельность текста на сайте: 8 рекомендаций по улучшению
Читабельность (readability) — простота восприятия слов, предложений, структур текста на странице. Данная метрика исходит из того, что сложные слова, предложения, большие абзацы либо сплошной текст воспринимаются сложнее, чем простые структуры.
Основные рекомендации сводятся к максимальному упрощению текста:
1 абзац = 1 идея
Читабельность зависит также от других параметров текста.
Как улучшить читабельность: 8 рекомендаций
Поговорим о том, как сделать контент на странице удобным для чтения. Часто бывает так, что несмотря на ценность и полезность информации посетитель не испытывает желания пробираться сквозь дебри текста.
При чтении текста на бумажных носителях пользователь использует технику пословного прочтения. На сайтах и в приложениях пользователи сканируют текст. По данным исследования NNGroup, пользователи просматривают от 20 до 28% слов на странице сайта.
Чтобы повысить количество усвоенного текста, его необходимо оптимизировать.
1. Правильный шрифт
Шрифт — один из ключевых факторов удобства чтения текста. Выбирайте стандартные шрифты. Отложите в сторону все креативные решения.
Заголовки должны быть легко различимы. Не используйте в заголовках все заглавные. Разница в размере букв улучшает читабельность текста. Учитывая, что заголовки короткие, здесь возможны варианты креативных шрифтов.
Для основного текста используйте стандартные sans-serif шрифты: Arial, Helvetica, Trebuchet, Lucida Sans, Verdana.
2. Размер шрифта
Основная задача дизайнера — создать оптимальную картинку для всех типов экранов, с которых пользователь может читать текст. Поэтому фиксированный для десктопа размер шрифта в пикселях может выглядеть несколько большим на мобильных и планшетных экранах. Отметим, что удобный размер шрифта зависит также от возраста, зрения и личных предпочтений пользователя.
Некоторые UX оптимизаторы утверждают, что оптимальный размер шрифта — 16px. Тогда как другие утверждают, что правильнее определять размер шрифта в процентном соотношении. Тогда шрифт адаптируется к персональным настройкам браузера и разным разрешениям экранов. Учтите, что пользователи держат гаджеты дальше от глаз, чем книги.
Лучший размер шрифта для страницы тот, при котором с мобильного устройства пользователю не придется увеличивать масштаб страницы для комфортного чтения.
3. Контрастность
Контрастность между фоном и текстом — другой немаловажный фактор, влияющий на удобство чтения текста. Правило простое:
чем больший контраст между текстом и фоном, тем легче чтение
Низкая контрастность повышает нагрузку на глаза, а так, восприятие информации ухудшается.
Также нагрузка на зрение и сознание повышается за счет динамических, «шумных» фонов — картинка вместо фона. Если изображение в фоне все же необходимо, то текст на странице должен размещаться только в однотонных площадях с высокой контрастностью по отношению к тексту.
Никита Обухов в своей статье о 10 правилах сторителлинга указывает:
Когда тексту отведено большое пространство, он раскрывается и становится читаемее.
Не переборщите с дизайном и цветом — обилие стилей перетягивает внимание и мешает усвоению информации. Развивайте в себе аскета.
4. Краткость
Пользователь попадает на сайт с целью найти ответ на вопрос, он не намерен изучать большие объемы текста. Оптимальная длина строки для комфортного чтения — 50-60 символов. Более длинные строки воспринимаются сложнее. К тому же, желание читать такой текст снижается. Длинные строки рассеивают внимание, глаза начинают хаотичные движения по строкам текста.
5. Отступы
Чтение с экрана более утомительно, чем с листа. В среднем пользователю требуется на 25% больше времени, чтобы осилить тот же объем текста с экрана.
75% пользователей сканируют текст на сайте. Разбивка на короткие абзацы (до 5 строк), короткие емкие предложения упрощают восприятие всего массива текста и повышают комфорт чтения.
При чтении с экрана пользователь ищет ключевые слова в тексте. И хотя сео-оптимизаторы давно уже отходят от выделения жирным, курсивом, подчеркиванием ключевых слов на странице, все же важные моменты должны быть визуально подчеркнуты. Это привлечет внимание и даст сигнал пользователю о том, что в этом абзаце содержится релевантная информация по теме.
6. Начинайте с главного
Основная проблема любого текста на 90% сайтов — длинное, нерелевантное и бесполезное введение о том, как «корабли бороздят космические просторы». Когда пишете для веба, помните:
Удаляйте вступления, знакомящие или вводящие читателя в проблематику, это бесполезно. Пользователь уже знаком с проблемой «по самое не хочу» и ищет решение.
7. У пользователей нет времени расшифровывать термины и жаргон
Эта рекомендация непосредственно связана с предыдущей. У пользователей нет времени расшифровывать сложные термины. Если без термина не обойтись, давайте сразу расшифровку. Для написания текста подберите ряд синонимов для сложных терминов и жаргонизмов.
Термины в тексте никак не подтверждают вашу компетентность в теме. На самом деле все с точностью до наоборот. Чем проще и доступнее вы можете объяснить сложную тему, тем выше воспринимается ваша компетентность в теме.
8. Визуальная разбивка
Помимо разбивки на абзацы тексту требуются другие элементы форматирования, которые дадут тексту «больше воздуха» и упростят чтение и сканирование.
Выводы
Асессоры GetGoodRank проверяют качество форматирования текста: размер шрифтов заголовков и текста, фон и цвет, разбивку на абзацы, использование дополнительного контента.
Подписчики GetGoodRank каждую неделю получают порцию полезных советов по оптимизации UX и контента в рассылках. Не забудь подписаться!
Как сделать тексты на сайте удобными для чтения?
Когда вы размещаете новый текст на своем сайте, вы хорошо знаете, что в нем написано: вы либо писали его сами, либо проверили текст несколько раз, принимая работу копирайтера. Поэтому вам читать этот текст легко. Но посетителям сайта приходится сложнее, ведь они видят текст впервые. Давайте попробуем разобраться, как оформление текста может помочь посетителям быстрее добраться до его смысла.
Какой текст удобно читать?
Чтобы понять, как сделать текст удобным для чтения, давайте вспомним, как же мы читаем. При чтении наши глаза не переходят последовательно с буквы на букву, а делают небольшие скачки по строке, захватывая по 2-4 слова за 1 раз. В случае повседневных текстов (новости, газеты, письма на электронной почте, сообщения в соцсетях или Скайпе) взгляд перескакивает и на соседние абзацы.
Почему так происходит? При чтении очередного текста наш мозг пытается получить из него как можно больше полезной информации за как можно меньший промежуток времени:
Примерно так будет выглядеть траектория движения взгляда при чтении страницы:
Здесь красным отмечен путь первого (оценочного) взгляда.
Желтым выделены куски текста, в которых пользователь нашел свои зацепки.
Здесь первый взгляд ни за что не зацепился, поэтому траектория заканчивается на крестике «Закрыть вкладку».
Таким образом, все правила по оформлению текста вытекают из трех основных принципов:
Теперь перейдем к конкретным советам.
Советы по оформлению текста:
1. Общая читабельность текста
2. Ссылки и кнопки в тексте
3. Структура текста
Основную структуру текста задает копирайтер: он объединяет текст в блоки, прописывает заголовки, выносит информацию в списки или таблицы.
Текст оформлен по правилам
Тот же текст, но правила не соблюдены
Остается лишь не потерять эту структуру при размещении текста на сайте.
Посмотрите на два примера верстки одного и того же текста:
Текст слабо структурирован (взгляду практически не за что зацепиться)
Текст с четкой структурой
(заголовок → список товаров →
список преимуществ → призыв к действию)
Во втором тексте найти цены на товары, ссылку на полный каталог и контактный телефон гораздо проще, чем в первом тексте.
В своих текстах мы используем 9-10 основных блоков, из которых собирается текст. Рассмотрим чуть подробнее некоторые из них.
3.1. Основной заголовок
Основной заголовок – это самый крупный текст на странице, выравниваем его по центру, отбиваем отступами от основного текста.
Перед основным заголовком можно разместить пару наводящих вопросов, которые покажут пользователю, что он попал туда, куда нужно.
3.2. Каталог товаров или список услуг
В каталоге товаров нужно использовать картинки. Название товара и его цену желательно сделать немного различающимися (например, название – жирным, а цену – нет, либо наоборот). После списка товаров ставим ссылку на полный каталог.
Если названия товаров длинное, то можно расположить их по два на строчку (и использовать картинки поменьше):
Если фотографий нет, то можно отобразить список услуг и цен таблицей. Здесь важно отделить строки неброскими линиями, чтобы было легче понять, какая цена к чему относится:
3.3. Список преимуществ
Для списка преимуществ хорошо использовать иконки, чтобы как-то его разнообразить (бесплатные иконки можно поискать, например, здесь).
Либо можно выделить фоном заголовки преимуществ:
Если не получается подобрать иконки, можно обойтись без них, но выделить пункты маркерами все же стоит:
3.4. Призыв к действию
Обязательно отделяем его от остального текста отступами и выделяем размером. Желательно номер телефона размещать на отдельной строчке, так он лучше воспринимается.
Не обязательно размещать призыв к действию именно справа, можно поставить его по центру. Также можем выделить его фоном:
3.5. Акции
Одна-две коротких фразы, предваряемых словом «Акция» или «Внимание». Выделяем эту информацию (цветом, размером, рамкой или фоном), например:
Хорошо привлекают внимание картинки:
3.6. Шаги/схема работы
Список действий, которые выполняют клиент и компания для получения результата. Следует пронумеровать действия, например, так:
Если всего 2-3 шага, можно разместить их в одну строку и разделить стрелками:
Либо такой вариант (для небольшого числа шагов с короткими текстами):
Это наглядно покажет клиенту, что схема действий проста и понятна.
3.7. Оплата и доставка
Это важная информация, которую пользователь будет целенаправленно искать на странице. Можно добавить иконки (не слишком яркие), чтобы облегчить пользователю поиск. Сами способы оплаты и доставки вставляем как список (с маркерами) – по маркерам легко происходит распознавание «много/мало».
Заключение
При размещении текстов на своем сайте помните, что читать их будут обычные люди, а не роботы. Оформите текст аккуратно, выделите важные пункты, разбейте информацию на короткие блоки. И тогда ваши тексты будут читать, а общее впечатление от сайта улучшится.
Возникают затруднения при размещении текстов? Напишите нам – поможем.