Гибкие шрифты

Чтобы ответить на этот вопрос, давайте сыграем в одну ролевую игру. Нет‑нет, можете убрать реквизит, я говорю о чем‑то более практичном, не имеющем отношения к игрищам «толкиенистов».

Представьте на мгновение, что вы – разработчик пользовательских интерфейсов. (Если вы и так разрабатываете пользовательские интерфейсы, то представьте себя еще и в пиратской шляпе.) Дизайнер из вашей команды попросил вас преобразовать простой макет в разметку и CSS. Вы бросаете быстрый взгляд на макет, который он вам прислал (рис. 2.4).

^{Рис. 2.4. Эскиз для нашего упражнения. По‑хорошему, повторить его – минутное дело}

Содержимое достаточно скромное, но даже небольшие проекты требуют пристального внимания к мелочам. Итак, вы углубляетесь в изучение дизайна. Оценив типы контента в макете, вы пишете следующий HTML‑код:

<h1>Achieve sentience with Skynet! <a href="#">Read More &raquo;</a></h1>

Заголовок с включенной в него ссылкой – прекрасная основа для семантической разметки, не правда ли? После обнуления стилей вы получаете в браузере следующий результат (рис. 2.5). По чуть‑чуть продвигаемся вперед. Теперь мы можем начать добавлять свой стиль оформления. Давайте впишем в элемент body некоторые базовые правила:

body {

background‑color: #DCDBD9;

color: #2C2C2C;

font: normal 100% Cambria, Georgia, serif;

}

^{Рис. 2.5. Разметка без стилей. Именно так создается мечта (и веб‑сайт)}

Ничего особенного: светло‑серый фон (#DCDBD9) для всего документа и черный текст (#2C2C2C). И конечно, характеристики шрифта – жирность (по умолчанию обычная, normal) и семейство шрифтов с засечками (Cambria, Georgia, serif).

Вы, вероятно, заметили, что кегль (размер шрифта) был установлен 100%. Поступив таким образом, мы привели базовый кегль к величине, принятой в браузере по‑умолчанию, который в большинстве случаев составляет 16 пикселей. Теперь мы всегда сможем изменить кегль по отношению к этой относительной базовой величине с помощью единиц измерения em. Но прежде чем мы это сделаем, давайте посмотрим, что у нас уже получилось (рис. 2.6).

^{Рис. 2.6. Применив одно простое правило CSS, мы можем придать эскизу несколько другой вид}

Удивлены, почему h1 не выглядит как нормальный заголовок? Мы используем обнуление стилей, нивелирующее стили браузера по умолчанию для элементов HTML, чтобы обеспечить их соответствие в различных браузерах. Лично мне больше всего нравится способ обнуления от Эрика Мейера (http://bkaprt.com/rwd/9/), но вы можете выбрать какой‑нибудь другой, благо выбор сейчас достаточно большой.

В любом случае наш h1 выглядит таким маленьким именно по этой причине: он наследует стиль font size 100%, который мы задали родительскому элементу body, а установленный в браузере по умолчанию кегль – 16 пикселей.

Теперь, если пиксели нас устраивают, мы можем перевести значения из оригинал‑макета непосредственно в CSS:

h1 {

font‑size: 24px;

font‑style: italic;

font‑weight: normal;

}

h1 a {

color: #747474;

font: bold 11px Calibri, Optima, Arial, sans‑serif;

letter‑spacing: 0.15em;

text‑transform: uppercase;

text‑decoration: none;

}

Нет ничего плохого или неправильного в определении размера текста с помощью пикселей. Но в целях нашего эксперимента давайте начнем думать пропорционально и переведем значения кегля (font‑size) из пикселей в относительные единицы, а вместо пикселей и будем использовать знакомые нам em.