Чтобы rem, как и пиксели, было проще использовать, вы можете установить размер шрифта элемента <html> в 62,5 %, который будет пересчитан в 10 px, если только пользователь не настроил размер шрифта по умолчанию.
Теперь, когда вы задаете длину в rem, вы можете просто умножить на 10, чтобы получить величину в пикселях. Так как 10 пикселей может быть слишком мало для основного текста, вы можете настроить какой хотите размер rem в элементе <body>. Потом эту величину унаследуют все элементы. Например, если вы хотите, чтобы размер текста «тела» был 15 пикселей, можете сделать следующее:
html { font-size: 62.5 %; }
body { font-size: 1.5rem; /* 15px */ }
Один единственный недостаток величин rem – их поддерживают все основные браузеры, кроме Internet Explorer (IE) 8 и его ранних версий. Как альтернативу используйте каскадность стилей и установите размер в пикселях до настройки его в rem. Это может значительно увеличить вашу таблицу стилей. Поэтому вы можете использовать раздельную таблицу стилей с условными комментариями к IE 9 и его ранним версиям, если только вам не нужна поддержка iOS 3.2, Safari 4 и старых версий Opera.
Задание ритма в rem
Теперь, когда в нашем распоряжении величина, которую, как и пиксели, легко использовать и которая гибкая, как em, создать вертикальный ритм будет намного проще. О каком вертикальном ритме идет речь? Основная идея в том, что когда вы проматываете страницу вниз, текст и элементы страницы следуют заданному ритму.
Если мы проведем вниз страницы воображаемые строки с фиксированными интервалами, каждая линия текста и каждый отступ или другой элемент страницы будет занимать одну линию или кратную ей величину линий.
Они соблюдают ритм страницы, словно басист из блюз-группы. Это уплотняет дизайн и обеспечивает правильное выравнивание элементов страницы, даже вдоль колонок. Выдерживание ритма поможет добиться визуальной последовательности в макете страницы.
Для начала мы должны настроить ритм страницы. Например, на следующей странице мы установили его в 2.3 rem или 23 пикселя. Он задается в элементе body с использованием свойства line-height. Мы также установили размер шрифта (font-size) в 1.5 rem, для того, чтобы все основные элементы типографики, кроме заголовков унаследовали его.
Удобно иметь под рукой визуальные направляющие, чтобы видеть, где вы слегка перескочили. Для этого мы создали изображение в формате SVG для показа линий с 23-пиксельными интервалами. Также мы использовали базовый сброс стилей для удаления отступов и полей, чтобы они не нарушали наш ритм:
html {
font-size: 62.5 %;
background: url(line.svg) no-repeat;}
/* reset */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6,pre, p, th, td,
article, section, figure, img {
margin: 0;
padding: 0;
}
body {
font-size: 1.5rem;
line-height: 2.3rem;
}
Если бы в нашем тексте были только текстовые параграфы, наша работа была бы почти закончена, даже если параграфы будут сжаты друг с другом без границ.
Заставляем заголовки соответствовать ритму
Настройка параграфов была несложной, так как каждая строка текста имеет междустрочный интервал (line height) меньше, чем 23-пиксельный вертикальный ритм страницы. Но что нам делать с такими элементами, как заголовки, которым нужен размер шрифта больше, чем высота нашей строки или дополнительные отступы сверху и снизу? Мудрость здесь в том, чтобы создать комбинацию из верхнего и нижнего отступов, при этом нужно, чтобы междустрочный интервал был кратен нашему ритму:
h2 {
font-size: 2.6rem; КОД (CODE)
line-height: 4.6rem; /* две базовых величины */
margin: 2.3rem 0 0 0; /* величина ритма сверху и снизу */
}
h3 {
font-size: 2.1rem;
line-height: 2.3rem; /* базовыйритм */
margin: 2rem 0.3rem 0; /* 2 сверху + 0.3 снизу == базовый ритм
}
Неважно, сколько строк заняли наши заголовки, они всегда будут занимать точные величины, кратные ритму. Так ритм будет идти вниз по странице. Потом мы сможем применить эту технику для всех элементов страницы, таких как изображения и фрагменты кода.
Имейте в виду, что рамки тоже занимают пространство, так что вам придется рассчитать их так же, уменьшая отступы. С другой стороны, тени не занимают пространство, поэтому вы можете делать с ними все, что хотите.
Если бы мы использовали величины em в этом примере, нам нужно было бы пересчитать высоту строки и отступы (margin), с учетом размера текста. С rem мы почти полностью можем игнорировать размер шрифта, только надо удостовериться, что высота строки достаточна, чтобы включить текст без нахлеста[42].
GEORGIA у меня на уме
Мы любим Helvetica и Georgia, но не пора ли этим почтенным шрифтам взять отпуск? Весь мир типографики открывается нам, а веб-шрифты ждут, когда мы испробуем всю прелесть их экзотики.
Форматы шрифта имеют целую политическую историю, но мы не станем грузить вас этим здесь. Проблема в том, что вам нужно использовать массу форматов, если ищете надежное кросс-браузерное решение. К нашей великой радости, целая армия решений сама бросилась нам на помощь, поэтому можете не забивать себе этим сильно голову, если только этого вы и не хотели.
Добавить свой собственный @font-face
Ваш первый вариант – это использовать шрифт, установленный вами и подгружать его с собственного сервера. Но хотим заострить ваше внимание на том, что прежде, чем делать это, проверьте, лицензионный шрифт или нет, и есть ли у вас надлежащие права. Не всякий бесплатный и коммерческий шрифт разрешается использовать как веб-шрифт; а даже если это происходит, вам, скорее всего, велят купить дополнительную лицензию для этих целей.
Как только вы выберете шрифт, нужно будет подготовить его в правильном формате и загрузить его через правило @font-face. Мы открыли лучший способ – использовать бесподобный сервис Font Squirrel[43]. Он позволяет загружать шрифт, потом «выдает» его в нужных вам форматах, с правилом @font-face внутри. Все, что о вас требуется, это перенести шрифты на ваш сервер, скопировать код в вашу таблицу стилей, а потом обращаться к шрифту, когда захотите.
Для примера в этом разделе мы взяли шрифт Museo Sans 500 для текста в body и Museo 700 для заголовков. Их предоставил Jos Buivenga абсолютно бесплатно[44]. Давайте посмотрим на код CSS, созданный сервисом Font Squirrel для шрифта Museo 700:
@font-face {
font-family: ‘Museo-700’;
src: url(‘1F9920_0_0.eot’);
src: url(‘1F9920_0_0.eot?#iefix’) format(‘embedded-opentype’),
url(‘1F9920_0_0.woff’) format(‘woff’),
url(‘1F9920_0_0.ttf’) format(‘truetype’);
}
Свойство font-family дает имя шрифта, на которое вам нужно будет сослаться в остальной таблице стилей, а свойство src ссылается на сам шрифт. Браузер будет проверять каждый URL по очереди, пока не найдет поддерживаемый формат. Изначально свойство src должно поддерживать старые версии IE, в которых наблюдается баг при использовании стандартного правила. Если вы вставляете его в свою таблицу стилей, вы можете ссылаться на шрифт обычным способом:
h2 {
font-family: “Museo-700”, serif;
}
Все должно быть в порядке, но вам нужно быть в курсе дополнительных деталей. Шрифт имеет плотность 700, что уже говорит о его жирном начертании. Запомните, по умолчанию браузеры будут считать, что шрифты, которые вы определяете в @font-face, это шрифты без выделения, курсива и без всяких остальных шрифтовых прибамбасов. Если вам нужен элемент со свойством font-weight: bold, он будет искусственно сделан полужирным начертанием. Так как шрифт Museo используется для заголовков, он уже выделен полужирным начертанием. Если вы наслоите на него искусственное полужирное начертание, то получится грязное месиво. Чтобы этого не случилось, мы должны сообщить в правило @font-face, что шрифт уже полужирный, с помощью дескриптора font-weight:
@font-face {
font-family: ‘Museo-700’;
…
font-weight: bold;
}
Теперь современные браузеры будут знать, что это – полужирный шрифт и больше не станут пытаться сделать его полужирным сами. Добавляя правила @font-face с тем же свойством font-family, но с разными величинами для font-weight, font-style и font-stretch, вы можете объединять многочисленные шрифтовые файлы в одно имя шрифта. Тогда браузеры будут использовать правильный шрифт, когда нужно переключиться с полужирного начертания на курсивное.
Используем шрифтовые онлайн-сервисы
Вы можете пользоваться одним из доступных онлайн шрифтовых сервисов, вместо того, чтобы поддерживать свой собственный. Наиболее популярны Google Web Fonts для бесплатных шрифтов и TypeKit – для тех, что предоставляются по подписке. Часто такие подписные сервисы – единственный законный путь получения доступа к известным коммерческим шрифтам.