Рекомендации по оформлению текста на веб-странице
+7

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

Правильное значение высоты строки

Я не буду советовать вам применять определенный размер шрифта, однако хочу порекомендовать придерживаться следующего правила касательно соблюдения оптимального соотношения между размером шрифта (font-size) и высотой строки (line-height).
Оптимальным значением здесь будет отношение 1:1,5, т.е. значение высоты строки в 1,5 раза больше значения размера шрифта.
Например, если размер шрифта 12 пикселей, то вычисленное значение высоты строки будет 12х1,5= 18 пикселей.

Рекомендованная высота строки

Используйте не более трех шрифтов на странице

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

Используйте моноширинный шрифт для вставок исходного кода

В продолжение разговора о выборе типов и размеров шрифтов, хочу напомнить еще одно правило.
Для вставок в основной текст блоков с исходным кодом следует использовать шрифт из семейтва моноширинных. К таким шрифтам относятся Courier New, Lucida Console, Monaco и др. Это повысит читаемость вашего исходного кода, и страницы в целом.

Моноширинные шрифты для вставок исходного кода

Используйте плагины или скрипты для подсветки кода

Хорошим тоном будет применение подсветки кода к блокам, содержащим исходный код.

Подсветка кода

Используйте контрастный цвет для шрифтов по отношению к цвету фона

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

Контраст при выборе цвета шрифта

Используйте заголовки h1-h6

Крайне желательно использовать в своей работе заголовки h1-h6. И не стоит ограничиваться только лишь основным заголовком страницы. Используйте заголовки для разделения контента на логические части.
Только придерживайтесь следующих правил:

  • заголовок h1 должен присутствовать на странице в единственном экземпляре (обычно, для оформления названия статьи, страницы),
  • подзаголовки оформляйте тегами h2 и выше,
  • правильно оформляйте стилями загловки h1-h6, они должны отличаться друго от друга.

Не отстраняйте заголовок от статьи

Неправильные отступы, назначенные для заголовков, могут ввести в заблуждение читателя.
Рекомендуется устанавливать нижний отступ для заголовков больше чем верхний, чтобы заголовок «прилипал» к статье.
Устанавливайте значения для margin-botton больше чем для margin-top

Отступы для заголовков

Правильно офромляйте ссылки на веб-страницах

Для чего на веб-сайтах размещаются ссылки? Для того, чтобы по ним переходили. Так помогите же пользователям найти эти самые ссылки среди всего остального содержимого веб-страницы. Читатель должен точно определять ссылку по ее оформлению.
Так сложилось, что для ссылок свойственно применение подчеркивание.
И ничего больше не подчеркивайте кроме ссылок!
Также желательно показать читателю, что он уже посетил, а где не еще не был — определяйте стили для псевдокласса :visited.

Оформление ссылок

Создавайте различные оформленные блоки (для предупреждений, цитат, и т.п.)

Вы можете использовать стили CSS для выделения среди остального содержимого опеределенных блоков текста, например, примечаний

Специальные блоки

Выравнивание текста — по левому краю

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

Полужирное начертание — для заголовков

Применяйте полужирное начертание для шрифта (font-weightbold), в основном, только для заголовков.
И только иногда, если это очень необходимо — в основном тексте.

Курсивное начертание — привлекаем внимание

А вот курсивным начертанием можно выделять что-либо уже непосредственно в самом тексте, тем самым привлекая дополнительное внимание читателя.

Используйте списки

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

Оптимальная длина строки текста — 9-10 слов

Опитимальная длина строки на веб-странице, как определилил многие дизайнеры, считается 9-10 слов.
Такая длина строки является наиболее удобной для чтения.
Если не верите, можете сами поэкспериментировать.

Указание шрифтов-заменителей

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

h1 {font-family: "Open Sans", Arial, serif;}

Используйте неразрывный пробел &nbsр

В некоторых случаях, единственным правильным выходом является использование неразрывного пробела &nbsр.

Все вышеперечисленные рекомендации безусловно должны помочь вам в веб-разработке сайтов.

+7
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: Веб-дизайн. Прямая ссылка на запись.

Комментарии к записи Рекомендации по оформлению текста на веб-странице: 1

  1. Сергей сказал(а):

    Интересно. Я даже не подозревал, что всего лишь выбор размера и стиля текста, отступов, расположение, размер заголовков и величина абзацев так сильно влияет на облик страницы. Надо взять на вооружение!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *