4. Типографика

CSS: Типографика – Придаем тексту выразительность!

Иллюстрация к уроку

В этом уроке мы изучим, как с помощью CSS сделать текст на вашей веб-странице красивым и читаемым. Мы рассмотрим основные свойства, которые отвечают за внешний вид текста.

Что такое типографика в CSS?

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

Основные свойства типографики

Вот несколько основных свойств, которые мы рассмотрим:

font-family: Определяет шрифт текста.
font-size: Определяет размер текста.
font-weight: Определяет толщину шрифта (например, жирный или обычный).
font-style: Определяет стиль шрифта (например, курсив).
line-height: Определяет межстрочный интервал.
text-align: Определяет выравнивание текста.
color: Определяет цвет текста.

Примеры кода

<!DOCTYPE html>
<html>
<head>
<title>Типографика в CSS</title>
<style>
body {
  font-family: Arial, sans-serif; /* Шрифт по умолчанию для всего сайта */
  color: #333; /* Цвет текста по умолчанию */
}

h1 {
  font-family: "Times New Roman", serif; /* Другой шрифт для заголовков */
  font-size: 3em; /* Размер заголовка */
  font-weight: bold; /* Жирный текст */
  text-align: center; /* Выравнивание по центру */
}

p {
  font-size: 1.2em; /* Размер абзаца */
  line-height: 1.5; /* Межстрочный интервал */
}

.italic-text {
  font-style: italic; /* Курсив */
}
</style>
</head>
<body>

<h1>Добро пожаловать!</h1>
<p>Это пример типографики в CSS. Мы используем различные свойства для стилизации текста. Этот <span class="italic-text">текст выделен курсивом</span>.</p>

</body>
</html>

Пояснения:

Внутри тега <style> мы определяем CSS-правила.
Мы задаем шрифт по умолчанию для всего сайта в body.
Для заголовка h1 мы используем другой шрифт, больший размер, делаем его жирным и выравниваем по центру.
Для абзацев p мы задаем размер и межстрочный интервал.
Класс .italic-text позволяет сделать текст курсивом.

Жизненный пример

Практически все сайты и веб-приложения используют типографику. Вот несколько примеров:

Bootstrap: Этот популярный CSS-фреймворк имеет встроенные стили для типографики, которые можно легко использовать. Он определяет шрифты по умолчанию, размеры заголовков, стили для абзацев и т.д.
Medium: Платформа для ведения блогов Medium славится своей чистой и минималистичной типографикой. Они уделяют большое внимание выбору шрифтов, межстрочному интервалу и размеру текста, чтобы обеспечить максимальную читаемость.
Любой новостной сайт: Новостные сайты используют типографику для выделения заголовков, подзаголовков и основного текста. Они также используют разные шрифты и размеры для разных разделов статьи.

Ключевые моменты

font-family позволяет выбирать шрифт из доступных на компьютере пользователя или загруженных с сервера.
font-size определяет размер текста. Используйте em или rem для относительных размеров, чтобы текст масштабировался на разных устройствах.
line-height улучшает читаемость текста, добавляя пространство между строками.
Типографика – важный элемент дизайна веб-страницы, влияющий на восприятие контента.
Используйте инструменты разработчика в браузере, чтобы экспериментировать с различными свойствами типографики и видеть изменения в реальном времени.

Практика

Попробуйте примеры в интерактивном редакторе: