Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство). Все эти параметры свойственны и верстке бумажных изданий, однако в Сети есть своя специфика — вы не можете ни в чем быть уверены, необходимо гибко подбирать параметры для максимального количества посетителей.
Итак, сверстаем текст, который удобно читать.
Текст оформлен средствами каскадных таблиц стилей (CSS). В раздел <head> XHTML-документа помещен следующий код:
<style type="text/css">
p {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 150%;
color: #000;
}
p.serif {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
font: bold 1.2em Verdana, Tahoma, Arial, Helvetica, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
}
</style>Определимся с основным текстом, каждый абзац которого определяется в XHTML тегами <p></p>. Выбрана следующая последовательность шрифтов: Verdana, если этот шрифт отсутствует у посетителя, тогда Tahoma, далее Arial, Helvetica и, в крайнем случае, любой рубленый шрифт. Размер шрифта задан в относительных единицах (em) и составляет 80% от настроек браузера по умолчанию.
Межстрочный интервал — 150%. По умолчанию в браузерах используется высота строки 120%, однако, это не оптимальное для удобочитаемости значение. В конце концов, экономить бумагу нет необходимости, а размер экрана по вертикали ничем не ограничен и стоит задать больший интерлиньяж — 150% в самый раз.
Последним для тега <p> в нашем CSS-коде определен цвет шрифта — шрифт основного текста должен быть черным. Красный шрифт оставим для идеологических и дизайнерских изысков. Удобочитаемый текст должен быть черного цвета на белом или светлом фоне. Мы используем рубленые шрифты, т. к. они лучше смотрятся на мониторе. Однако для приверженцев шрифтов с засечками создан класс "serif". На картинке он снизу (<p class="serif">).
Первыми указаны рубленный Verdana и шрифт с засечками Georgia, т. к. эти шрифты специально оптимизированы для вывода на экран, а не для печати, как многие другие.
Заголовок верстаем жирным рубленым шрифтом размером 120% от заданного по умолчанию. Расстояние между буквами (разрядка) заголовка — 20% от размера шрифта. Все буквы заглавные. Это должно положительно сказаться на заметности заголовка, который — в силу своих обязанностей — должен привлекать внимание.
Подробнее теория оформления текстов для веб-сайтов изложена в следующих материалах:
- Введение в оформление текстов для веб.
- Доступность текста в сети — определяем размер шрифта для верстки.
- Оформление текстов для веб — вопросы юзабилити.
