CodeKitHubЧто это за инструмент?
Сочетание шрифтов — это выбор двух (иногда трёх) гарнитур для совместного использования на странице, обычно одной для заголовков и одной для основного текста, чтобы создать визуальную иерархию без ощущения разнобоя или монотонности.
Каждая пара ниже показывает живой пример: шрифт заголовка сверху, шрифт текста снизу, с использованием реальных файлов Google Fonts — то, что вы видите, будет и на вашем сайте.
К каждой паре прилагается готовый тег подключения `<link>` из Google Fonts и соответствующий фрагмент CSS с объявлениями `font-family` для заголовков и текста — просто скопируйте оба.
Зачем его использовать?
- 28 сочетаний, отобранных вручную, а не автоматически сгенерированный список — каждая пара выбрана потому, что два шрифта действительно дополняют друг друга.
- Живой предпросмотр: каждая пара отрисовывается реальными шрифтами, загруженными из Google Fonts, а не статичным изображением или предположением по названию шрифта.
- Фильтр по настроению — Современный, Элегантный, Смелый, Минимализм, Классический — чтобы быстро найти подходящий стиль для проекта.
- Копирование в один клик и тега подключения `<link>`, и CSS-правил `font-family`.
- Бесплатно, работает в браузере, не требует аккаунта или входа.
Как использовать
- При желании нажмите фильтр по настроению (Современный, Элегантный, Смелый, Минимализм, Классический), чтобы сузить список, или оставьте «Все», чтобы просмотреть всё.
- Просмотрите карточки с живым предпросмотром — верхняя строка показывает шрифт заголовка, нижняя — шрифт текста.
- Откройте понравившуюся пару и нажмите, чтобы развернуть раздел с кодом подключения.
- Скопируйте тег `<link>` в `<head>` вашего HTML, а фрагмент CSS — в таблицу стилей, чтобы применить шрифты к заголовкам и основному тексту.
Пример
Ввод
Элегантный блогРезультат
Playfair Display (заголовки) + Source Sans Pro (текст)Фильтр «Элегантный» выводит контрастные заголовки с засечками в паре с чистым, легко читаемым текстом без засечек — распространённое сочетание для редакционных макетов и блогов.
Принципы удачного сочетания шрифтов
- Контраст важнее сходства: два шрифта, выглядящих почти одинаково (например, две похожие геометрические гротескные гарнитуры), обычно воспринимаются как ошибка, а не как осознанный выбор. Сочетайте шрифт с засечками и без засечек, или жирную акцидентную гарнитуру с более лёгкой текстовой, чтобы разница читалась как намеренная.
- Совмещайте высоту строчных букв и пропорции: шрифты, у которых строчные буквы имеют схожую визуальную высоту, обычно смотрятся органично на одной странице, даже если стили различаются — несовпадающая высота строчных — одна из самых частых причин, по которым пара «не смотрится».
- Ограничьтесь двумя гарнитурами (иногда тремя): одна для заголовков, одна для текста и максимум третья для акцентов вроде кнопок или подписей. Больше — и страница начинает выглядеть непродуманной.
- Учитывайте настроение, а не только форму: округлый дружелюбный гротеск в паре с формальным шрифтом с засечками посылает противоречивые сигналы, даже если формы букв технически сочетаются — выбирайте шрифты, согласующиеся по тону не меньше, чем по структуре.
- Проверяйте на реальных размерах: пара, отлично смотрящаяся в крупном превью, может потерять контраст при размере основного текста, а акцидентный шрифт может стать нечитаемым в маленьком размере — всегда проверяйте оба крайних случая.
Выбор пары под конкретную задачу
Лендингам и маркетинговым сайтам обычно подходят фильтры «Смелый» или «Современный» — мощный, контрастный заголовочный шрифт привлекает внимание в верхней части страницы, а чистый нейтральный шрифт текста облегчает быстрое сканирование длинных текстов.
Блоги и редакционный контент чаще всего лучше смотрятся с парами «Элегантный» или «Классический» — изящный заголовок с засечками сигнализирует о продуманном, отредактированном тоне повествования, а комфортный текст с засечками или без них сохраняет читабельность длинных статей при длительном чтении.
Интернет-магазины и товарные сайты обычно предпочитают пары «Минимализм» — сдержанные, нейтральные шрифты удерживают внимание на фотографиях товаров и ценах, а не на самой типографике, что важно, когда на странице отображаются десятки карточек товаров.
Портфолио и творческие сайты дают наибольший простор для экспериментов — пары «Смелый» или «Элегантный» с ярко выраженным характером часто работают хорошо, поскольку аудитория отчасти приходит именно оценить визуальный вкус.
Заметки о производительности и лицензировании
Тег подключения `<link>` загружает шрифты с CDN Google, который работает быстро и уже закэширован на многих сайтах, которые ваши посетители, скорее всего, уже посещали — но он всё же добавляет внешний запрос. Для сайтов, где важна каждая миллисекунда, загрузка файлов шрифтов и самостоятельный хостинг (с вручную заданным `font-display: swap`) устраняет эту внешнюю зависимость ценой дополнительной настройки.
Все шрифты Google Fonts являются open source и бесплатны для коммерческого использования без обязательного указания авторства, хотя упоминание дизайнера шрифта — приятный жест там, где это легко сделать.
Часто задаваемые вопросы
Что делает два шрифта «хорошо сочетающимися»?
Удачные пары уравновешивают контраст и гармонию. Контраст — например, сочетание шрифта с засечками и без засечек, или жирного акцидентного шрифта с простым текстовым — создаёт визуальную иерархию, благодаря которой заголовки и текст явно различаются. Гармония — схожая высота строчных букв, сопоставимая толщина штрихов и общее ощущение формальности или лёгкости — не даёт двум шрифтам конфликтовать друг с другом. Представленные здесь пары подобраны с учётом обоих факторов.
Должны ли заголовки и текст всегда использовать разные шрифты?
Нет, использование одной гарнитуры для обоих случаев (как пара «Rubik + Rubik» в этом инструменте) тоже работает хорошо, если у шрифта достаточно вариантов начертания, чтобы отличить заголовок от текста. Это допустимый, минималистичный выбор, а не ошибка.
Как на самом деле применить выбранную пару к моему сайту?
Скопируйте тег подключения `<link>` в `<head>` вашей страницы, чтобы загрузить шрифты с CDN Google, а затем скопируйте фрагмент CSS в таблицу стилей — он задаёт `font-family` для заголовков (h1, h2, h3) и основного текста (body, p). При необходимости скорректируйте CSS-селекторы под вашу разметку.
Замедлит ли загрузка Google Fonts мой сайт?
Каждый дополнительный файл шрифта добавляет сетевой запрос и некоторый риск блокировки рендеринга. Ограничьтесь одним начертанием для заголовка и одним-двумя для текста, используйте `display=swap` (уже включён в код подключения), чтобы текст отображался запасным шрифтом, пока веб-шрифт загружается, а для продакшен-сайтов, где важна максимальная скорость загрузки, рассмотрите самостоятельный хостинг файлов шрифтов.
Можно ли использовать эти шрифты бесплатно в коммерческих целях?
Да. Все шрифты в Google Fonts, включая все представленные здесь пары, распространяются по лицензии SIL Open Font License или Apache License — обе разрешают бесплатное коммерческое использование, изменение и распространение без роялти.