Шрифты и работа с ними — Основы верстки контента

Семейство шрифтов
- Установка новых шрифтов
Стиль шрифта
Строчные символы
Межстрочный интервал
Обобщенное правило
- Использование одного правила или нескольких

Страшным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но а как же поиграть со шрифтами? CSS предоставляет много правил для стилизации шрифтов. С некоторыми из таких свойств вы уже знакомы — это свойство font-weight и font-size.

Помимо насыщенности, CSS позволяет управлять следующими настройками:

Семейство шрифтов;
Стиль шрифта;
Стиль строчных символов;
Размер шрифта;
Межстрочный интервал.

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

Семейство шрифтов

CSS позволяет указывать шрифты, которые будут использованы на сайте. Для этого используется свойство font-family. Оно принимает список шрифтов, которые могут быть загружены на сайте. Это может быть одно семейство шрифтов или сразу несколько. Если указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать. Остальные шрифты будут игнорироваться. Например:

.font {
  font-family: Georgia, "Times New Roman";
}

Если у пользователя в системе есть шрифт Georgia, то будет применен он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:

У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.

А какой шрифт именно выберет браузер? Тут все зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:

Антиква или шрифты с засечками. Такие шрифты чаще всего используются в книгах и новостных сайтах. В CSS обозначается serif.
Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается sans-serif.
Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается monospace.

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

.font {
  font-family: Georgia, "Times New Roman", serif;
}

Всегда указывайте семейство шрифтов по умолчанию. Это считается хорошей практикой, так как не все шрифты могут присутствовать в системе пользователя.

Установка новых шрифтов

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

.woff/.woff2 — шрифт формата Web Open Font Format. Распространенный формат, который поддерживается большинством современных браузеров.
.ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
.eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.

Для установки шрифта используется конструкция @font-face. Она позволяет подключить шрифт в различных расширениях, определить имя и путь к файлу. На примере шрифта Roboto воспользуемся такой конструкцией.

Пусть наш проект имеет директорию fonts/, внутри которой находятся файлы шрифтов.

project/
├── css/
│   └── style.css
├── fonts/
│   │── Roboto-Regular.ttf
│   │── Roboto-Bold.ttf
│   └── Roboto-Light.ttf

Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face:

font-family — Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.
src — Путь к файлу со шрифтом.

После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.

@font-face {
  font-family: "Roboto Regular";
  src: url("../fonts/Roboto-Regular.ttf");
}

body {
  font-family: "Roboto Regular", sans-serif;
}

Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретет следующий вид:

@font-face {
  font-family: "Roboto Regular";
  src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Roboto Bold";
  src: url("../fonts/Roboto-Bold.ttf");
}

@font-face {
  font-family: "Roboto Light";
  src: url("../fonts/Roboto-Light.ttf");
}

body {
  font-family: "Roboto Regular", sans-serif;
}

h1 {
  font-family: "Roboto Bold", sans-serif;
}

h2 {
  font-family: "Roboto Light", sans-serif;
}

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

@font-face позволяет указывать насыщенность шрифта с помощью font-weight. Это позволит подключить все начертания с использованием всего одного имени. В остальном запись не будет отличаться от того, что было в прошлом примере.

@font-face {
  font-weight: 400; /* Соответствует значению normal */
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
  font-weight: 700; /* Соответствует значению bold */
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.ttf");
}

@font-face {
  font-weight: 300;
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.ttf");
}

body {
  font-family: "Roboto", sans-serif;
}

h1 {
  font-weight: bold;
}

h2 {
  font-weight: 300;
}

Пара слов об особенностях использования свойства font-family внутри конструкции @font-face. Указывая имя шрифта, не нужно дополнительно указывать семейство шрифтов. Это делается при указании шрифта у элемента. То есть, вот такая запись является некорректной:

@font-face {
  /*
    Приведет к ошибке
    и шрифт не будет подключен
  */
  font-family: Roboto, sans-serif;
}

Особое внимание обратите на то, что в примере не использовались кавычки. Это не является ошибкой. Использовать их или нет — выбор разработчика, но если в названии шрифта есть пробельные символы, то используйте кавычки. Для названия из одного слова можно опустить кавычки. Важно помнить, что если вы подключили шрифт с кавычками, то с ними нужно и указывать шрифт в селекторах. Если кавычек не было, то и при указании шрифта они не нужны

@font-face {
  /* В названии нет кавычек */
  font-family: Roboto;
  src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
  /* В названии кавычки */
  font-family: "Hexlet Regular";
  src: url("../fonts/hexlet.ttf");
}

body {
  font-family: Roboto, sans-serif;
}

.logo {
  font-family: "Hexlet Regular", monospace;
}

Стиль шрифта

Помимо обычного начертания, CSS позволяет задать и другой вариант отображения шрифта — курсивный. Для этого используется свойство font-style, которое может принимать одно из трех значений:

normal — стандартное значение. Соответствует нормальному отображению шрифта. Именно такой стиль вы читаете прямо сейчас.
italic — курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.
oblique — тоже курсивное начертание. Зачастую оно не отличается от значения italic.

Но почему существует два похожих значения для курсива? На самом деле они не очень похожи. Курсив задаваемый значением italic, является самостоятельным шрифтом, для которого есть отдельный файл в системе или на сервере. Он относится больше к рукописному тексту, тогда как oblique искусственно наклоняет символы текущего шрифта.

.italic {
  font-style: italic;
}

Строчные символы

С помощью CSS можно задать такой вид строчных символов как «Капитель».

Капите́ль — это начертание строчных букв как заглавных, но их размер совпадает (или приближен) к размеру строчных. Такой прием используется в дизайне в виде стилистического оформления. Посмотрите на этот параграф:

Текст с использованием капители

По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.

Капитель устанавливается с помощью свойства font-variant. У него возможны два значения:

normal — стандартная стилистика строчных символов.
small-caps — капитель.

p {
  font-variant: small-caps;
}

Межстрочный интервал

Межстрочный интервал (интерлиньяж) — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создается расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.

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

p {
  font-size: 16px;
  line-height: 1.5;
}

Может показаться, что значения 1.5em и 1.5 будут работать одинаково. Это правда, но только для одного элемента. Сравним вот такие блоки:

<div class="news">
  <h2>Важная новость</h2>
  <p>Текст важной новости</p>
</div>

.news {
  font-size: 16px;
  line-height: 1.5;
}

.news h2 {
  font-size: 18px;
}

При использовании значения 1.5 межстрочный интервал будет высчитан отдельно для блока news и для каждого элемента внутри, в зависимости от его размера шрифта:

У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
Заголовок второго уровня получит интервал 18 * 1.5 = 27px

Заменим line-height: 1.5 на line-height: 1.5em:

.news {
  font-size: 16px;
  line-height: 1.5em;
}

.news h2 {
  font-size: 18px;
}

При указании единицы измерения свойство line-height будет посчитано один раз и это значение применится ко всем элементам внутри:

У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
Заголовок второго уровня тоже получит интервал в 24px, так как оно будет наследовано от блока news

Обобщенное правило

Теперь, для работы со шрифтами, вы знаете все основные правила. Это:

font-style
font-variant
font-weight
font-size
line-height
font-family

Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font. Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size и font-family. Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font:

p {
  font: italic small-caps bold 16px/24px Roboto, sans-serif;
}

Важно обратить внимание на запись 16px/24px. Внутри правила font так обозначаются свойства font-size и line-height.

Использование одного правила или нескольких

Этот раздел относится не только к правилу font, но и ко всем обобщенным правилам, которые вы изучите в процессе прохождения курсов. С одной стороны, использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:

Запоминание правильного порядка значений. Используя обобщенные свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщенном свойстве. С опытом вы сможете переключиться на одно правило.
Обобщенное свойство font перебивает отдельные font-size, line-height и так далее. Если в коде вы указали font-variant: small-caps;, а потом для этого же элемента применили font: 16px/24px sans-serif;, то капитель будет сброшена в значение по умолчанию.

Используйте обобщенные свойства только один раз при задании стандартных стилей. Например, свойство font отлично подойдет для селектора body, а модификации текста будут производиться одиночными свойствами.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов