Ядром контента и дизайна сайта является текст. Его содержание определяет уровень доверия пользователя к сайту. Оформление также играет важную роль: если текст сверстан неаккуратно, то читать его станет неудобно, и посетитель сайта быстро покинет страницу. Да и дизайн ресурса в целом потеряет привлекательность. Как правильно оформить текст на сайте?
Выравнивание
Первое, что важно в оформлении текста на сайте. Известно, что выравнивание бывает:
- по левому или правому краю,
- по центру;
- по ширине.
На сайтах контент обычно выравнивают по левому краю. Выбор его определяется удобством чтения с любого устройства.
Заголовки и краткие надписи (до 5 строк) также можно выравнивать и по центру. Главное помнить, что большие объемы текста так размещать не стоит: их будет непросто читать.
Краткие надписи можно выравнивать и по правому краю. Однако делайте это осторожно: текст становится сложнее для восприятия. Применяйте подобный тип выравнивания только в случае, если этого требует концепция дизайна.
Выравнивание по ширине в дизайне сайта не применяется, поскольку в тексте могут образовываться значительные щели из-за особенностей переноса слов в интернете.
Длина строки
Второй важный пункт в оформлении текста на сайте. Пользователи негативно относятся к страницам, где слишком узкие или слишком широкие тексты. Оптимальная длина строки для веб — 8-10 слов. Таким образом, мы даем пользователю и необходимое пространство «на полях», и сама информация становится удобнее для восприятия.
Перенос слов
Приобретает особое значение в связи с ограничением длины строки. В интернете отсутствует перенос по слогам (или представлен минимально). Это облегчает работу и дизайнера, и верстальщика, однако требует определенных правил:
- Предлоги и союзы — переносятся на новую строку.
- Аббревиатуры и такие сокращения, как «т. п.», «т. д.» и подобные — на новую строку полностью, без разрывов.
- Фамилия и инициалы — на новую строку вместе, не отделяясь друг от друга.
- Телефонный номер — на новую строку полностью, без разрыва.
- Тире — остается или на предыдущей строке, или переносится на новую строку со словом, которое ему предшествует.
Даже такая мелочь, как корректный перенос слов, усилит позитивное впечатление от сайта в целом.
Размер текстовых блоков
Здесь ключевую роль играет размер шрифта, или кегль. Он измеряется в пунктах, процентах и пикселях. В статье я использую пиксели.
Для каждого текстового блока — заголовка, подзаголовка, основного текста — используется свой размер шрифта. Кегль зависит от разрешения экрана устройства, на котором будет демонстрироваться текст, и должен соответствовать ему.
Какой бы ни был выбран размер текстового блока, стоит помнить, что шрифты не должны быть как слишком крупными, так и слишком мелкими. Главное — ориентироваться на удобство пользователя.
Межстрочное расстояние
От кегля шрифтов зависит и межстрочное расстояние, или интервал от одной строки до другой. Оптимальное межстрочное расстояние обычно складывается из размера шрифта и 2-4 пикселей (пунктов) сверху. Например, при тексте в 18 px его межстрочное расстояние составляет 20-22 px.
Однако сильных ограничений по межстрочному расстоянию нет. Дизайнер сам выбирает нужные интервалы, но с условием, что строки не будут располагаться слишком близко или слишком далеко друг от друга.
Абзацы
Если текст большой, в его оформлении участвуют абзацы. Существуют два типа абзацев:
- русский,
- английский.
Русский абзац выделяет «красная строка», или отступ слева. Английские абзацы представлены отдельными блоками текста, в формировании которых участвуют вертикальные отступы.
В оформлении текста на сайте используется английский абзац в силу его удобства для чтения.
Русский абзац, а также варианты смешивания красной строки и английского абзаца неприменимы в верстке текста для веб. Подобное оформление портит впечатление пользователей о сайте в целом. И просто выглядит неэстетично.
Пробелы
Кажется, что пробелы — незначительная часть оформления текста на сайте, однако и здесь есть особенности. Пробелы не применяются для тире между числами (2000–2018) и пунктами маршрута (Марсель–Мюнхен).
Также пробел не нужен дефису, знакам «градус» и «процент». А вот знаку валюты он необходим.
Специальные символы
Если для текста нужен знак копирайта или иные специальные символы, их не нужно заменять «подходящим» сочетанием знаков. Использовать стоит только конкретный символ.
Оформление текста — это целая наука, следуя которой можно усилить эффективность контента сайта. Чем аккуратнее будет выглядеть текст, тем больше доверия он вызовет у пользователей.