Главная страница статей --> Программирование, заработок, оболочки

Оформление текста с помощью CSS

Источник: linuxcenter.ru

Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство). Все эти параметры свойственны и верстке бумажных изданий, однако в Сети есть своя специфика — вы не можете ни в чем быть уверены, необходимо гибко подбирать параметры для максимального количества посетителей.

Итак, сверстаем текст, который удобно читать.

Оформление

Текст оформлен средствами каскадных таблиц стилей (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% от размера шрифта. Все буквы заглавные. Это должно положительно сказаться на заметности заголовка, который — в силу своих обязанностей — должен привлекать внимание.

Подробнее теория оформления текстов для веб-сайтов изложена в следующих материалах:

  1. Введение в оформление текстов для веб.
  2. Доступность текста в сети — определяем размер шрифта для верстки.
  3. Оформление текстов для веб — вопросы юзабилити.



Похожие статьи:
- Удивительное рядом: установка Mac OS X на PC в эмуляторе PearPC
- Практика развития ресурса от лидеров поискового продвижения
- Звуковые редакторы
- Практический опыт продвижения интернет-магазина
- Perl и сокеты. Часть 2
- “Безопасные” сайты
- Версия сайта для печати средствами CSS
- Береги честь смолоду: прячем e-mail адреса от спама
- Выпадающее меню на CSS и JavaScript
- Валидность HTML
- Игры в ассоциации
- Обзор программ для записи и копирования компакт-дисков
- TrafficCompressor — чудеса бывают?


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
Контакты
Редакция:
[0.001]