Как задать разные шрифты для заголовков и текста в CSS
Чтобы задать разные шрифты для заголовков и основного текста в CSS, назначьте одну гарнитуру элементам h1–h6, а другую — body или текстовым блокам. Обычно заголовкам подходит выразительный шрифт, а абзацам — нейтральный и хорошо читаемый. Ниже показано, как настроить это через font-family, @font-face, веса, fallback-шрифты и каскад.
Базовый способ: назначить гарнитуры через селекторы
Самый простой вариант — задать шрифт для всего документа через body, а затем переопределить его для заголовков. Свойство font-family принимает список гарнитур: браузер использует первую доступную, а если она не установлена или не загрузилась, переходит к следующей. Последним обычно указывают обобщённое семейство sans-serif, serif или monospace.
Пример CSS: body { font-family: Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, serif; }. В этом случае основной текст будет отображаться шрифтом Arial, а заголовки — Georgia. Такой подход не требует подключения файлов шрифтов и позволяет быстро проверить типографическую иерархию страницы.
Как выбрать шрифт для заголовков и основного текста
Разные гарнитуры нужны не ради декоративного эффекта, а для разделения ролей в макете. Заголовок должен быстро привлекать внимание и обозначать структуру материала. Основной текст обязан оставаться спокойным, различимым и удобным для чтения в длинных абзацах. Поэтому выразительный шрифт чаще используют в заголовках, а нейтральный — в тексте, списках и подписях.
- Сочетайте гарнитуры с разным назначением, но близким визуальным характером.
- Проверяйте кириллицу, если сайт рассчитан на русскоязычную аудиторию.
- Ограничивайте систему двумя, реже тремя шрифтовыми семействами.
- Сравнивайте заголовки и абзацы в реальном размере, а не только в макете.
- Учитывайте насыщенность, ширину знаков, высоту строки и длину строк.
- Проверяйте, как шрифты выглядят на мобильном экране.
Хорошая пара не обязательно строится на резком контрасте. Например, заголовки с засечками и основной текст без засечек создают заметное разделение, а две нейтральные гротескные гарнитуры дают более сдержанный результат. Важно, чтобы заголовок отличался не только шрифтом, но и размером, весом, интерлиньяжем или цветом.
Пошаговая настройка типографики в CSS
Шаг 1. Задайте базовый шрифт документа
Начните с body или корневого контейнера страницы. Базовая гарнитура должна применяться к абзацам, спискам, кнопкам, полям формы и другим элементам интерфейса, если для них не предусмотрено отдельное правило. Пример: body { font-family: Inter, Arial, sans-serif; color: #222; line-height: 1.6; }. Последовательность fallback-шрифтов снижает риск того, что текст останется без подходящей замены.
Шаг 2. Назначьте отдельный шрифт заголовкам
Объедините заголовки в одну группу, если они используют одну гарнитуру. Пример: h1, h2, h3, h4, h5, h6 { font-family: Manrope, Arial, sans-serif; font-weight: 700; line-height: 1.15; }. Такой селектор сохраняет единый стиль и не заставляет повторять одинаковые свойства для каждого уровня заголовка.
Шаг 3. Настройте размеры и расстояния
Одна только замена гарнитуры не формирует полноценную иерархию. Для h1 задайте самый крупный размер, для h2 и h3 — последовательно меньшие значения. Используйте margin для вертикальных отступов и line-height для высоты строки. Если у заголовка крупный размер, слишком маленький line-height может привести к наложению строк и ухудшить читаемость.
Пример: h1 { font-size: 2.5rem; margin: 0 0 1rem; } h2 { font-size: 1.8rem; margin: 2rem 0 0.75rem; } h3 { font-size: 1.35rem; margin: 1.5rem 0 0.5rem; } p { margin: 0 0 1rem; }. Эти значения являются отправной точкой: окончательные размеры зависят от ширины колонки, длины заголовков и общего масштаба интерфейса.
Шаг 4. Проверьте наследование и исключения
Свойство font-family наследуется, поэтому дочерние элементы обычно получают шрифт родителя. Однако браузерные стили, более специфичные селекторы или правила компонентов могут изменить результат. Если заголовок находится внутри блока .card, проверьте, не переопределяет ли .card h2 общую настройку. В инструментах разработчика браузера можно увидеть активное правило и перечёркнутые свойства.
Как подключить собственные шрифты через @font-face
Если нужная гарнитура не установлена на компьютере пользователя, подключите её файлы через правило @font-face. В нём указывают имя семейства, путь к файлу и, при необходимости, начертание. После этого имя, заданное в font-family, можно использовать в обычных селекторах для заголовков и текста.
Пример: @font-face { font-family: ArticleText; src: url('/fonts/article-text.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: ArticleHead; src: url('/fonts/article-head.woff2') format('woff2'); font-weight: 700; font-style: normal; } body { font-family: ArticleText, Arial, sans-serif; } h1, h2, h3 { font-family: ArticleHead, Arial, sans-serif; }. Файл woff2 обычно используют как современный веб-формат, но конкретный набор форматов зависит от проекта и поддержки браузеров.
Если в семействе есть обычное, полужирное и курсивное начертания, описывайте их отдельными правилами @font-face с соответствующими значениями font-weight и font-style. Тогда браузер сможет выбрать правильный файл, а не имитировать жирность или наклон. Для локального шрифта также важно проверить наличие лицензии на веб-использование.
Практический пример для статьи или блога
Представим страницу статьи: заголовок должен выглядеть выразительно, а длинный текст — спокойно читаться. Для этого можно использовать шрифт с более сильным характером в h1–h3 и нейтральную гарнитуру в body. Дополнительный контраст создадут умеренная ширина текстовой колонки, достаточная высота строки и заметный отступ между заголовком и абзацем.
Пример: body { font-family: 'Source Sans 3', Arial, sans-serif; font-size: 1rem; line-height: 1.65; } .article-title, .article h2, .article h3 { font-family: 'PT Serif', Georgia, serif; font-weight: 700; line-height: 1.2; } .article-title { font-size: clamp(2rem, 5vw, 3.5rem); } .article p, .article li { max-width: 70ch; }. Здесь класс .article-title позволяет отдельно оформить главный заголовок, а функция clamp помогает адаптировать его размер к ширине экрана.
Когда использовать переменные CSS для шрифтов
Переменные CSS упрощают поддержку типографической системы. Вместо повторения названий гарнитур можно объявить их в :root и использовать в компонентах. Пример: :root { --font-body: Arial, sans-serif; --font-heading: Georgia, serif; } body { font-family: var(--font-body); } h1, h2, h3 { font-family: var(--font-heading); }. Если дизайн изменится, достаточно заменить значение переменной в одном месте.
Такой подход особенно полезен для дизайн-системы, где есть отдельные роли: шрифт интерфейса, шрифт заголовков, шрифт кода и шрифт декоративных акцентов. При этом переменная не отменяет fallback: в её значении по-прежнему стоит указывать запасные семейства после основной гарнитуры.
Частые ошибки при сочетании шрифтов
- Задавать декоративный шрифт для длинных абзацев, хотя его знаки плохо различимы в небольшом размере.
- Подключать гарнитуру без кириллических символов и получать неподходящую замену для русского текста.
- Использовать слишком много разных семейств, из-за чего страница теряет визуальное единство.
- Указывать font-weight, которого нет в подключённом файле, рассчитывая на настоящее начертание.
- Забывать о fallback-шрифтах, когда внешний файл может не загрузиться.
- Переопределять заголовки чрезмерно специфичными селекторами и усложнять поддержку CSS.
- Проверять дизайн только на широком экране и не тестировать переносы на мобильных устройствах.
Отдельная ошибка — выбирать шрифты только по внешнему виду отдельных букв. Оценивать нужно весь текстовый блок: длину строки, интервалы, форму знаков, цифры, кавычки, тире и поддержку нужных языков. Гарнитура может эффектно выглядеть в коротком заголовке, но оказаться неудобной для навигации, карточек или многостраничной статьи.
Чеклист перед публикацией страницы
- Проверьте, что body или основной контейнер получают шрифт для обычного текста.
- Убедитесь, что h1–h6 используют отдельную гарнитуру только там, где это предусмотрено дизайном.
- Добавьте запасные шрифты и обобщённое семейство в каждый важный font-family.
- Проверьте наличие кириллицы, нужных весов и начертаний в файлах шрифта.
- Сравните заголовки и абзацы на десктопе, планшете и мобильном экране.
- Проверьте переносы, контраст, line-height и расстояния между текстовыми блоками.
- Откройте инструменты разработчика и убедитесь, что нужные CSS-правила действительно применяются.
FAQ: настройка разных шрифтов в CSS
Можно ли задать шрифт только для h1?
Да. Используйте селектор h1 и укажите нужное значение font-family: h1 { font-family: Georgia, serif; }. Остальные заголовки и основной текст сохранят свои правила. Такой вариант подходит, если главный заголовок является визуальным акцентом, а h2 и h3 должны выглядеть сдержаннее.
Как задать разные шрифты для заголовков и абзацев?
Назначьте шрифт абзацам через body или p, а заголовкам — через h1, h2, h3 и другие уровни. Например: body { font-family: Arial, sans-serif; } h1, h2, h3 { font-family: Georgia, serif; }. Если стили компонентов сложные, применяйте классы вроде .article-body и .article-heading.
Почему подключённый шрифт не отображается?
Причиной может быть неправильный путь к файлу, ошибка в имени семейства, неподдерживаемый формат, отсутствие нужного начертания или проблема с загрузкой ресурса. Проверьте вкладку Network и активные CSS-правила в инструментах разработчика. Также убедитесь, что в файле действительно есть кириллица, если страница содержит русский текст.
Нужно ли подключать один шрифт для всего сайта?
Нет, но ограниченная система обычно проще в использовании и поддержке. Часто достаточно одной гарнитуры для основного текста и второй для заголовков. Дополнительное семейство можно оставить для кода, служебных данных или особых декоративных элементов, если его роль понятна и оно не нарушает иерархию.
Как изменить шрифт заголовка внутри отдельного блока?
Используйте класс контейнера или компонента. Например: .hero h1 { font-family: 'Trebuchet MS', Arial, sans-serif; }. Такой селектор изменит только h1 внутри блока .hero. Если правило не срабатывает, проверьте порядок CSS-файлов и специфичность других селекторов, которые могут переопределять настройку.
Можно ли использовать системные шрифты без загрузки файлов?
Да. Системные гарнитуры не требуют дополнительного запроса к серверу, но их внешний вид может отличаться на разных устройствах. Указывайте цепочку запасных вариантов и обязательно проверяйте русские символы. Для точного фирменного оформления лучше использовать лицензированный веб-шрифт с нужными начертаниями.
Вывод
Разные шрифты для заголовков и основного текста задаются обычным каскадом CSS: базовую гарнитуру назначают body или текстовому контейнеру, а заголовки переопределяют через h1–h6 или классы компонентов. Для качественного результата учитывайте кириллицу, fallback-шрифты, веса, размеры, интервалы и поведение макета на мобильных устройствах.