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

[adsense]
Существует мнение, что красивые и удобные сайты создаются с использованием красивой и удобной типографии. Есть даже статьи где утверждается что веб состоит на 95% из типографии. Не факт, что этого мнения стоит придерживаться, но оно существует. И это делает типографику очень важным элементом при создании сайта.

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

Сегодняшний туториал будет как раз на тему как создать красивую типографию для сайта используя самые простые приемы CSS3 (многие из которых доступны и в CSS2).

Подготовка макета.

До того как мы начнем работать со стилями, нам необходимо задать некий макет и наполнить его контентом. Все что требуется на данном этапе — это создать чистый HTML документ. Не будем тратить на него много времени и воспользуемся данным примером

Web Typography A Demo For Beautiful Typography on the Web

Тут мы имеем заголовок, часть которого взята в тег span. Далее следует мета информация об авторе, несколько абзацев текста и дата его создания. Если мы посмотрим на этот текст без стилизации то увидим примерное такое:

За исключением цветного фона — это то, что браузер выдаст при обработке текста без заданных стилей. Он выглядит не сильно отвратительно, но приложив немного усилий мы сможем сделать его гораздо приятнее и красивее.

Шаг 1. Заголовок.

Первое что мы сделаем — это поработаем над нашим заголовком. Изменим цвет, поиграем с шрифтом, размером шрифта и добавим тень. Код будет выглядеть так:

h1{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

В итоге мы получим вот такой жирный заголовок:

Давайте разберемся что мы прописали в стиле заголовка. Сначала мы увеличили размер шрифта до 2.5em и добавили приятный красный цвет, используя rgb значение. Далее мы сменил шрифт на Georgia, который является веб-безопасным шрифтом и выглядит вполне приятно. Так как шрифт Georgia кажется мне немного жестким, я совсем немного увеличил расстояние между символами, используя свойство letter-spacing. Далее мы добавили эффект вдавленного текста используя узкую тень белого цвета, которая больше похожа на подсветку. Использовали мы свойство text-shadow.

Шаг 2. Подзаголовок.

Заголовок сейчас выглядит намного лучше. Но мы так же хотим отделить подзаголовок от основного заголовка. Подзаголовок мы выделили в тег span, который позволит нам использовать другой стиль для подзаголовка:

h1 span{
  display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: 0.6em;
  font-weight: normal;
  letter-spacing: 0em;
  text-shadow: none;
}

Мы создали с помощью этого кода логическое разбиение заголовка и подзаголовка применив в описании стиля отображение block. Так же мы визуально отделили заголовки использую меньший размер шрифта, убрав жирность шрифта и сменив сам шрифт с Georgia на sans serif Verdana. Обратите внимание, что мы не тронули свойство color, так как свойства CSS для заголовка наследуются свойствами подзаголовка.

Итог выглядит довольно приятно, так как мы старались сохранить похожесть стилей заголовка и подзаголовка, но при этом и визуально разграничить их.

Мы так же избавились от эффекта тени (text-shadow) и не использовали преобразование текста с помощью эффекта letter-spacing.

Шаг 3. Блок Мета.

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

.meta{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-bottom: 1px solid rgba(69,54,37,0.2);
  padding-bottom: 0.5em;
}

Я опять использовал шрифт Georgia, но при этом сделал его наклонным, увеличил расстояние между символами (letter-spacing) и применил RGBA метод для задания цвета. RGBA схема позволяет кроме цвета задать и четвертый параметр — прозрачность — для этого мы используем значение между 0.0 и 1.0. Это свойство так до конца и не поддерживается в старых версиях IE, но позволяет с легкостью получить нужные оттенки цветов.

Шаг 4. Доработка блока Мета.

Далее мы добавим маленький эффект к блоку мета. Вы могли заметить, что я выделил слово «статья» и имя автора в теги span. Сделал я это для того, чтобы применить к ним немного другой набор свойств:

.meta span{
  text-transform: capitalize;
  font-style: normal;
  color: rgba(69,54,37,0.8);
}

Я сделал все буквы текста заглавными. Хотя вариант со всеми прописными буквами тоже смотрелся бы неплохо. Я так же отказался от наклонного текста и увеличил прозрачность для того чтобы усилить визуальную разницу этих слов с остальным текстом.

Шаг 5. Двух колоночный текст.

Исторически создание колонок с помощью CSS сводилось к магическим действиям с float и использованием нескольких контейнеров для текста. Это конечно было лучше использования таблиц, но не было идеальным решением. А вот с появлением новых элементов типографики в CSS3 создание колонок стало гораздо проще. Мы будем использовать часть новых свойств для создания двух колоночного текста далее:

.body p{
  font-family: Verdana;
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
  line-height: 1.5em;
  color: rgb(69,54,37);
}

К сожалению мы вынуждены увеличить код и использовать конструкции -moz- и -webkit- для того чтобы быть максимально уверенными что наш код будет обработан в максимальном числе браузеров. Напомню, что такие конструкции мы используем для браузеров Mozilla Firefox и webkit браузеров — Safari и Google Chrome.
С использованием свойства column-count вы можете установить нужное вам количество колонок, а с помощью свойства column-gap задать расстояние между колонками.
Я применил эти свойства к тегу p. Но вы можете применять их к тегам div, тем самым выводя все дочерние элементы в том виде, который вам требуется.
Я применил тот же шрифт Verdana, что и для заголовка, чтобы создать видимость общей стилизации всего контента.

Шаг 6. Используем псевдо-классы и селекторы.

Сейчас я бы хотел немного дополнить стиль для нашего текста. Я хочу использовать селекторы и выделить первый абзац так, чтобы он разительно отличался от остального текста. Для этого мы изменим код вот так:

.body p:first-child{
  font-size: 1.25em;
  font-family: Georgia;
  font-style: italic;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  letter-spacing: 0.1em;
}
.body p:first-child:first-line{
  font-weight: bold;
}

Хотелось бы немного пояснить код. Сначала я использую псевдо-класс first-child чтобы определить первый параграф в нашем тексте (body). Этот маленький селектор позволяющий нам выделить начало текста и придать ему выразительности.
Я так же решил сделать акцент на первый параграф, добавив ему жирность. Я так же растянул его на ширину двух колонок и изменил шрифт на наклонный Georgia тем самым еще больше усилив акцент на первом абзаце.
Вы также заметили последние две строчки кода, назначение которых, объединив два псевдо-класса first-child и first-child:first-line, дать нам доступ к первой строке первого абзаца. Ее мы сделали жирной (bold).

Шаг 7. Работа с блоком Дата.

Мы почти закончили с нашей типографикой. Последним штрихом будет работа над блоком с датой создания поста.

date{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.75em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-top: 1px solid rgba(69,54,37,0.2);
  display: block;
  padding-top: 0.5em;
  margin-top: 2em;
}

Свойства для блока даты очень похожи на свойства для блока мета. Единственное отличие в том, что я уменьшил размер шрифта для того чтобы соблюсти визуальное разделение текста и поменял свойство border с bottom на top.
Так как блок с датой у нас изначально изображен в одну линию, я применил свойство display с параметром block. И в самом конце я применил свойство margin-top чтобы отделить блок с датой от всего остального текста.

Итоги работы с типографикой.

Подведем итоги: мы создали вполне привлекательную типографику для сайта с использованием чистого HTML и CSS. Мы не использовали ни одного изображения. В завершении этой статьи я бы хотел выделить несколько основных моментов в типографике:

• 1. Несмотря на использование всего двух шрифтов мне удалось создать широкий диапазон стилей, используя свойства CSS и CSS3. Теперь мы можем использовать всего несколько шрифтов, что позволяет сохранить единство дизайна.
• 2. Свойства letter-spacing и line-spacing это те свойства, которыми многие пренебрегают при создании типографики. Однако это именно те свойства CSS, которые позволяют внеся минимальные изменения в код создать при этом уникальный дизайн.
• 3. Искусство типографии это не только варьирование цветов, размеров, шрифтов. Это даже не трекинг с кернингом 😉 Все это всего лишь понятия, которые используются в типографике. Один из способов реальной типографики это визуальная иерархия, которая отражает важность каждого отдельно взятого элемента.
• 4. Наконец, основное правило — каждый элемент важен. Хорошая типографика никогда не принимает стандартов. Наоборот — типографика требует тщательного рассмотрения каждого элемента независимо от того, каким незначительным он может казаться. В конечном итоге элемент может наследовать стандартные свойства, но это должно быть осознанным выбором стиля этого элемента.

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

Посмотреть демо

На этом сказ о том, что такое типографика с использованием CSS3 я заканчиваю. Читайте остальные статьи из цикла CSS3 для начинающих, используйте CSS3 в своих дизайнах.

На данный момент мне часто требуются услуги переводчика, т.к. я занимаюсь не только проектами под рунет. Вот к примеру перевод с монгольского очень трудно найти и заказать, а компания «Мастер перевода» предлагает данную услугу, да еще и по демократичной цене.