Правильное оформление текста на сайте - залог того, что посетители будут читать и воспринимать вашу информацию. Об этом говорит статистика: по данным исследований Nielsen Norman Group, 79% пользователей просто сканируют текст, и лишь 16% читают каждое слово. Более того, длинные тексты без форматирования и разбивки отпугивают читателей. Так, массивы текста более 600 слов дочитывают лишь 32% людей.
Поэтому так важно разбивать текст на абзацы, выделять ключевые мысли, использовать списки и структурировать информацию заголовками. Визуально привлекательный текст, разбитый на блоки - это must have для любого сайта. О том, как этого добиться с помощью базовых приемов веб-типографики, и пойдет речь в этой статье.
Выбор межстрочного интервала
Межстрочный интервал или line-height - это расстояние между строками текста. Он влияет на удобство чтения и визуальное восприятие текста. Слишком маленький интервал затрудняет чтение, а слишком большой - делает текст разреженным и неопрятным. Оптимальное значение межстрочного интервала зависит от нескольких факторов:
- Размера шрифта (чем больше кегль, тем больше может быть интервал)
- Длины строки (чем шире текстовый блок, тем больше должен быть интервал)
- Начертания шрифта (у шрифтов с более высоким контрастом интервал может быть меньше)
Универсальной формулы для расчета идеального межстрочного интервала не существует. Оптимальные значения лучше определять эмпирическим путем для каждого конкретного случая. Как правило, удобный для чтения интервал варьируется от 1.2 до 1.6 размера шрифта. Например, для текста в 16px хорошо подойдет line-height в интервале 19-24px.
Длина строки и размер шрифта
Длина строки текста, или ширина текстового блока, тоже влияет на комфорт чтения. Слишком узкие или широкие блоки замедляют скорость чтения и затрудняют восприятие. Принято считать, что оптимальная длина строки составляет 45-75 символов или 8-12 слов.
С длиной строки напрямую связан размер шрифта. Чем шире текстовый блок, тем крупнее должен быть шрифт для сохранения удобочитаемости. И наоборот, мелкий шрифт не стоит размещать широкими блоками. Вот примерные рекомендации по соотношению размера шрифта и ширины блока:
- 14px - до 440px
- 16px - до 600px
- 18px - до 760px
- 20px+ - более 760px
Чем длиннее строка или столбец текста, тем больше может быть межстрочный интервал. Работает и обратное: чем короче длина строки/столбца, тем меньше межстрочный интервал.
Чем длиннее строка, тем больше может быть межстрочный интервал:
Как сделать текст интересным
Даже идеально подобранный межстрочный интервал и размер шрифта не гарантируют, что текст будет интересно читать. Особенно если он представляет собой сплошной массив. Чтобы текст на сайте не выглядел скучно и monotonno, необходимо структурировать и визуально разнообразить его:
- Разбить на абзацы с отступами между ними
- Выделять важные мысли маркерами или другим цветом
- Добавить подзаголовки (не более 3 уровней вложенности)
- Оформить списки в виде нумерации или буллитов
- Чередовать абзацы текста с картинками, фотографиями, скриншотами
- Выделить цитаты отдельными блоками со своим стилем
- Продумать места для врезок, сносок и дополнительной информации
Хорошо структурированный и оформленный текст вызывает желание читать и создает ощущение легкости, даже если он длинный.
Оформление цитат, сносок и колонок
Цитаты и примечания не стоит размещать сплошным текстом внутри абзаца. Это затрудняет чтение. Лучше выделить их визуально в отдельный блок. Оформление таких элементов зависит от общего дизайна сайта, но есть некоторые общепринятые рекомендации:
- Цитату можно выделить кавычками, цветом, фоном или иконкой. Желательно также указать автора.
- Для маленьких сносок можно использовать символ звездочки или надстрочные числовые индексы. Текст сноски размещается в конце страницы под горизонтальной линией.
- Врезки и дополнительную информацию лучше оформлять в виде боковых колонок справа. Размещение колонок слева воспринимается хуже и может сбить с ритма чтения.
Цитаты, сноски и врезки разбавляют монотонность текста, привлекают внимание к определенной информации. Их стоит использовать по мере надобности и значимости, не перегружая статью лишними элементами.
Выбор межстрочного интервала является субъективным
Межстрочный интервал влияет на то, насколько быстро и удобно читается текст. Обычно диапазон удобных значений составляет от 1,3 до 1,7 размера шрифта.
Выбор межстрочного интервала зависит от нескольких факторов. Одна из них - субъективное ощущение комфорта при чтении. Строгих правил в этом аспекте нет, сравните тексты с разным межстрочным интервалом, прочитайте и попытайтесь понять, какое значение позволяет вам делать это наиболее комфортно.
Значение межстрочного интервала слишком мало:
Допустимый межстрочный интервал:
Выбор межстрочного интервала зависит от параметров шрифта
Чем выше x-высота шрифта, тем больший межстрочный интервал может потребоваться. Например, Source Sans Pro имеет небольшую высоту x, в то время как Montserrat имеет большую высоту x.
Разные шрифты имеют разные характеристики высоты:
Текст, набранный этими двумя шрифтами с одинаковым размером и интервалом между строками, будет выглядеть и читаться по-разному. Для Монтсеррата, возможно, потребуется увеличить интервал между строками.
Для Source Sans Pro интервал между строками 1,5 выглядит идеально:
Монтсеррат увеличил высоту x,и расстояние между линиями может быть предпочтительнее 1,6:
Выберите межстрочный интервал для мелкого текста
Правила остаются прежними для небольшого текста. Выбор межстрочного интервала по-прежнему зависит от субъективных ощущений, параметров шрифта и длины строки.
Для небольшого текста не требуется специальный интервал между строкам:
Чем короче строка, тем меньше может быть межстрочный интервал:
Длина строки и размер шрифта
Чем больше размер шрифта, тем длиннее может быть длина строки. Небольшой текст менее удобен для чтения, если он расположен в широкой колонке. И наоборот, большой текст читаем, даже если строка достаточно длинная.
Чем длиннее строка, тем больше шрифт может быть:
Скучный текст
Правильно подобранные шрифты, вертикальный ритм, межстрочный интервал и другие тонкости настройки не гарантируют, что люди будут читать текст. Даже если текст красиво написан и чрезвычайно ценен, его презентация может помешать им читать.
Хорошая стратегия заключается в том, чтобы поместить выноски и примечания в нужную колонку. Разделите текст заголовками, сделайте декоративные элементы. Такие тексты интересно читать, рассматривать в деталях, останавливаться на выделенных акцентах и примечаниях.
Скучный текст:
Текст может быть интересным:
Примечание или позиция выноски в тексте
Выноска или примечание выглядят странно, если они расположены слева от основного текста. Он выглядит знакомым и сбалансированным с правой стороны.
Это выглядит странно:
Выглядит знакомо:
Первый столбец должен быть больше второго
Если последний столбец текста больше первого, это всегда вызывает вопросы и выглядит странно. Это работает только для текстовых столбцов, для других модулей, карточек или изображений это не имеет значения.
Это выглядит странно:
Выглядит идеально:
Примеры удачного форматирования текста
Теперь приведем несколько примеров сайтов с хорошим форматированием и подачей текстового контента:
- http://www.aetuts.com/ - крупный шрифт, четкие подзаголовки, достаточные отступы, выделение цитат, наличие врезок и сносок.
- https://designshack.net/ - текст разбит на 2 колонки, подзаголовки, пронумерованные списки, примеры кода оформлены отдельными блоками.
- https://www.sliderrevolution.com/ - качественные скриншоты, чередующиеся с текстовыми блоками, важные мысли выделены жирным и другим цветом.
- https://www.webdesignerdepot.com/ - крупные отступы, маркированные списки, выделение акцентов в отдельные абзацы.
- https://medium.com/ - минималистичный дизайн, достаточный межстрочный интервал, отступы до и после абзацев, выделение цитат.
Изучите эти примеры и возьмите на заметку удачные решения по подаче текстового контента. Главное - не забывать о балансе, чувстве меры и гармоничном сочетании всех элементов на странице.
Напишите пожалуйста в комментариях:
- А какие вы используете значения CSS (стилей) на своих сайтах?
голосов
Следующие страницы вас также могут заинтересовать:
- Робототехника
- Настройка Cloudflare для защиты и оптимизации сайта
- SEO умного фильтра Bitrix
- Калькулятор конверсии онлайн | Расчет конверсии сайта
- Сравнение Интентного кластеризатора и Key Collector
Обновлено: 23.03.2024