Типографика для веб-мастера

Объявления:

Как я и обещал в видеоуроке по верстке сайта #10, расскажу о принципах выбора шрифтов для веб-мастера и правилах их подключения в CSS.

Вы наверное знаете, уважаемый читатель, что есть шрифты с засечками и без засечек.

Примером шрифтов с засечками может служить всем известный Times New Roman или Georgia (которую вы сейчас и видите, читая эти строчки).

Шрифт без засечек – это, например, Arial.

Вся разница между ними, понятное дело, наличие этих самых засечек.

В общем, при подключении шрифта в CSS:

• Serif - это шрифт с засечками, значащийся в системе в качестве такового по умолчанию.
• Sans-serif - тоже самое, но без засечек.

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

Поэтому особо выпендриваться со шрифтами смысла нет.

Хотите получить официальный внешний вид текста – применяйте Arial. Чуть более демократично и красиво выглядит шрифт Verdana. Для подписей к полям форм и другим служебным информационным блокам подойдет более сжатый шрифт Tahoma. Все это шрифты без засечек семейства San-serif.

Применение гарнитуру семейства с засечками (Serif) оправдано в длинных текстах. Засечки направляют взгляд читателя вдоль строки, и текст, содержащий МНОГОБУКФ, проще воспринимается. Тут вам на помощь придет майкрософтовский шрифт Times New Roman. Для блогов лучше подойдет более демократичный и лучше проработанный шрифт Georgia. Однако, в нем есть одна особенность: цифры скачут 123456. Но многие, как и я, считают эту особенность приятной изюминкой.

Кроме двух описанных семейств есть еще одно – это моноширинные шрифты Monospaced. Данное семейство хорошо подходит, например, для вставки программного кода в статью.

Правило задания шрифта в CSS

Шрифты в CSS для выбранного блока (свойство font-family) можно задавать через запятую:

.moy_class{font-family:Arial, Helvetica, sans-serif;}

Эта конструкция говорит о том, что текст в блоке с классом moy_class необходимо выводить шрифтом Arial, если он на компьютере не обнаружен – тогда Helvetica, если и его нет – то любой шрифт, заданный в системе по умолчанию в качестве беззасечкового.

Необходимо использовать определенное правило задания гарнитур шрифта. Выглядит это правило следующим образом:

• font-family: (шрифт без засечек), Arial, Helvetica, sans-serif;
• font-family: (шрифт с засечками), “Times New Roman”, Times, serif;
• font-family: (моноширинный шрифт), “Courier New”, Courier, monospaced;

Некоторые тексты начинают совершенно по другому смотреться если изменить значения межстрочечного (свойство line-height) и межбуквенного (свойство letter-spacing) интервала.

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

Сто раз уже писал и здесь повторюсь. Нельзя располагать текст в резиновом (по ширине) блоке. Длинный текст, расползшийся на всю ширину страницы, очень сложно читать. Длина текстового блока не должна превышать 600 пикселов.

Для желающих более детально разобраться в данной теме – есть интересная статья по веб-типографике на Хабра-Хабр.

С уважением, Андрей Морковин.