Красивый шрифт — это половина дела. Вторая половина — как этот текст настроен: насколько он крупный, жирный ли заголовок, по центру ли он выровнен, не слипаются ли строки. Грамотная настройка текста делает страницу читаемой и приятной, а её отсутствие превращает даже хороший контент в трудноусвояемую «стену текста».

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

Что уже умеем / что добавим

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

Что вы узнаете в рамках статьи

• Как менять размер текста свойством font-size.
• Как управлять жирностью через font-weight.
• Как делать текст курсивным через font-style.
• Как выравнивать текст свойством text-align.
• Как настраивать межстрочный интервал через line-height.

Ключевые термины

• font-size — размер шрифта.
• font-weight — насыщенность (жирность) шрифта.
• font-style — начертание: обычное или курсив.
• text-align — горизонтальное выравнивание текста.
• line-height — высота строки (межстрочный интервал).

Размер шрифта

Размер текста задаёт свойство font-size. Чаще всего его указывают в пикселях:

p {
  font-size: 18px;
}

h1 {
  font-size: 48px;
}

Абзацы станут читаемого размера 18 пикселей, а главный заголовок — крупным, 48 пикселей. Размер напрямую влияет на иерархию: крупное воспринимается как важное. Для основного текста на сайтах обычно берут 16–18 пикселей — это комфортно для чтения.

Начертание: жирность и курсив

За насыщенность отвечает свойство font-weight. Его частые значения — normal (обычный) и bold (жирный), а также числа от 100 до 900:

.title {
  font-weight: bold;
}

.muted {
  font-weight: 300;
}

Первый элемент станет жирным, второй — наоборот тонким (если шрифт поддерживает такое начертание). За курсив отвечает отдельное свойство font-style со значением italic:

.quote {
  font-style: italic;
}

Текст с классом quote станет наклонным — курсив уместен для цитат и акцентов. Не путайте два свойства: font-weight — про толщину, font-style — про наклон.

Выравнивание текста

Горизонтальное выравнивание задаёт свойство text-align. Основные значения: left (по левому краю, по умолчанию), center (по центру), right (по правому краю), justify (по ширине):

h1 {
  text-align: center;
}

Заголовок выровняется по центру блока, в котором находится. Важно понимать: text-align применяется к элементу-контейнеру и выравнивает его содержимое. Поэтому центрировать текст надо на самом абзаце или заголовке (или на их общем родителе), а не на отдельном слове.

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

Расстояние между строками задаёт свойство line-height. Когда строк несколько, слишком плотный текст читать тяжело — немного «воздуха» решает проблему:

p {
  line-height: 1.6;
}

Значение 1.6 означает «в 1,6 раза больше размера шрифта». Это одно из самых удобных значений для основного текста: строки не слипаются и не расходятся слишком далеко. Числовое значение без единиц (как 1.6) предпочтительнее — оно корректно масштабируется вместе с размером шрифта.

Применяем в проекте

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

h1 {
  font-size: 48px;
  text-align: center;
}

h2 {
  font-size: 32px;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.lead {
  font-size: 20px;
  text-align: center;
}

Чтобы вводное описание стало крупнее и по центру, добавим ему класс lead в HTML:

<p class="lead">Практический курс по HTML и CSS для начинающих. От первой страницы до готового лендинга.</p>

Обновите страницу: заголовок крупный и по центру, описание чуть больше обычного текста и тоже центрировано, а абзацы стали читаться легче за счёт интервала. Лендинг выглядит аккуратно и профессионально.

Частые ошибки

• Путаница font-weight и font-style.
  Жирность — это font-weight: bold, курсив — font-style: italic.
• text-align на отдельном слове.
  Свойство выравнивает содержимое контейнера, применяйте его к абзацу или родителю.
• line-height в пикселях без нужды.
  Безразмерное значение (1.6) масштабируется лучше фиксированного.
• Слишком мелкий основной текст.
  Для чтения комфортны 16–18 пикселей, не делайте текст меньше без причины.

Итоги

Прекрасно — вы освоили типографику! Теперь вы управляете размером и жирностью шрифта, делаете текст курсивным, выравниваете его и настраиваете межстрочный интервал. Это тонкая, но решающая работа: именно она отличает аккуратный сайт от небрежного. Ваш лендинг теперь читается легко и выглядит по-настоящему опрятно.

Поздравляем — вы завершили второй раздел курса! Вы прошли уже больше половины пути. Дальше нас ждёт самое интересное для вёрстки — блочная модель и то, как элементы занимают место на странице.