Обозреватель сочетаний шрифтов

Что такое Обозреватель сочетаний шрифтов?

Обозреватель сочетаний шрифтов — это бесплатный браузерный инструмент для веб-дизайнеров, разработчиков и авторов контента, которым нужно аккуратное сочетание заголовка и основного текста без перебора библиотек шрифтов. Два независимых поисковых выбора позволяют фильтровать 48 отобранных Google Fonts по serif, sans, display или mono и выбирать шрифт для каждой роли, а элементы управления для каждой роли задают насыщенность, размер, межстрочный и межбуквенный интервал. Живой предпросмотр отрисовывает ваш заголовок и абзац настоящими шрифтами, а кнопка перемешивания предлагает случайные сочетания, когда нужно вдохновение. Когда результат нравится, скопируйте сгенерированный CSS в предпочитаемом формате — правило @import, HTML-тег link или npm-импорты в стиле Fontsource — и вставьте его в лендинг, тему блога, презентацию или дизайн-систему.

Как пользоваться Обозреватель сочетаний шрифтов

1. В выборе заголовка отфильтруйте по serif, sans, display или mono, введите текст для поиска и щёлкните шрифт, чтобы выбрать его.
2. Сделайте то же в выборе основного текста, чтобы подобрать дополняющий шрифт для абзаца.
3. Откройте настройки, чтобы задать насыщенность, размер, межстрочный и межбуквенный интервал каждой роли.
4. Введите собственный заголовок и предложение в поле образца или оставьте пустым для текста по умолчанию; нажмите «Перемешать» для случайных идей сочетаний.
5. Выберите формат вывода — @import, <link> или Fontsource — и скопируйте сгенерированный CSS в свою таблицу стилей или проект.

Примеры

Заголовок: Playfair Display 700 · Текст: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Формат: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Часто задаваемые вопросы

Как выбрать два шрифта?

У каждой роли свой выбор. Отфильтруйте каталог по serif, sans, display или mono, введите часть названия семейства для поиска и щёлкните результат, чтобы выбрать. Заголовок и текст выбираются независимо, а кнопка «Перемешать» подбирает случайную пару за вас.

Можно ли управлять насыщенностью, размером, межстрочным и межбуквенным интервалом?

Да. Откройте настройки, чтобы задать насыщенность, размер в пикселях, межстрочный интервал и межбуквенный интервал (в em) отдельно для заголовка и текста. Каждое изменение отражается и в живом предпросмотре, и в скопированном CSS.

Какие форматы вывода можно скопировать?

Три: правило CSS @import, HTML-тег <link> с подсказками preconnect и npm-импорты в стиле Fontsource (npm i @fontsource/… плюс строки импорта по насыщенности). Все три включают одинаковые правила font-family, насыщенности, размера, межстрочного и межбуквенного интервала для h1–h3 и body.

Откуда берутся шрифты и приватен ли мой текст?

Когда вы выбираете сочетание, браузер загружает только эти два семейства напрямую из публичного Google Fonts CSS API по адресу fonts.googleapis.com — это сторонний запрос из вашего браузера, а не через наши серверы. Ваш образец текста и настройки полностью остаются на вашем устройстве.

Какие шрифты включены?

Подобранный набор из 48 популярных Google Fonts среди serif, sans-serif, display и monospace — включая Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono и другие.