# Лаборатория Подбора Веб-Шрифтов

Предпросмотр пары Google Fonts (заголовок + текст) с настройкой веса и межстрочного, плюс готовый CSS-сниппет с @import и переменными. Кураторский список из 22 шрифтов и 7 проверенных пресетов.

> Каноническая страница: https://elysiatools.com/ru/tools/webfont-pairing-lab

- **Категория:** Design

- **Ключевые слова:** подбор шрифтов, google fonts, типографика, веб-шрифты, шрифт заголовка текст, css import, @import, комбинация шрифтов, гарнитура, webfont

## Обзор

Предпросмотр пары **заголовок + текст** из Google Fonts бок о бок, настройка веса и межстрочного, и копирование готового CSS-сниппета.

**Как использовать**
1. Выберите **шрифт заголовка** и **шрифт текста** из кураторского реестра из 22 гарнитур.
2. Задайте **вес заголовка** и **вес текста**; каждый шрифт прикрепляется к ближайшему доступному весу.
3. Настройте **размер текста** (px) и **межстрочный**; предпросмотр обновляется.
4. При желании задайте свои тексты **примера заголовка** и **примера текста**.
5. Скопируйте CSS — содержит один `@import`, загружающий только два выбранных веса, плюс CSS-переменные и правила для `h1, h2, h3` и `body, p`.

**Кураторские пары** — боковая панель предлагает 7 проверенных сочетаний (редакционное, SaaS, новости, техно, ручная работа, афиша, дев-тул).

## Входные данные

- **Шрифт заголовка** (select): The display / heading typeface.
- **Вес заголовка** (number): Snaps to the nearest available weight for the chosen font.
- **Шрифт текста** (select): The body / paragraph typeface.
- **Вес текста** (number): Snaps to the nearest available weight for the chosen font.
- **Размер текста (px)** (number): Body paragraph font-size in pixels.
- **Межстрочный интервал** (number): Unitless line-height for body text. 1.4–1.7 is the readable range.
- **Пример текста заголовка** (text): Optional custom heading text. Defaults to a neutral sample.
- **Пример текста** (textarea): Optional custom body paragraph(s). Defaults to a neutral sample.

## Когда использовать

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

## Как это работает

- Выберите шрифты для заголовка и основного текста из кураторского списка, содержащего 22 популярные гарнитуры.
- Настройте параметры отображения: вес символов, размер шрифта в пикселях и межстрочный интервал.
- Введите собственный текст для заголовка и абзаца, чтобы оценить внешний вид на реальном контенте.
- Скопируйте сгенерированный CSS-код, содержащий оптимизированный @import и CSS-переменные для вашего проекта.

## Сценарии использования

- Создание типографики для лендинга или промо-страницы с использованием контрастной пары шрифтов.
- Оптимизация скорости загрузки сайта за счет импорта только нужных начертаний шрифтов Google Fonts.
- Быстрое прототипирование интерфейсов SaaS-сервисов с подбором современных гротесков и антикв.

## Частые вопросы

### Какие шрифты доступны в инструменте?

Доступен кураторский список из 22 популярных шрифтов Google Fonts, включая Inter, Montserrat, Playfair Display, JetBrains Mono и другие.

### Как генерируется CSS-код?

Инструмент создает директиву @import для подключения выбранных шрифтов с конкретными весами, а также объявляет CSS-переменные для заголовков и текста.

### Можно ли использовать свои примеры текста для проверки?

Да, вы можете ввести произвольный текст в поля «Пример текста заголовка» и «Пример текста» для точной оценки визуального стиля.

### Что происходит, если выбранный вес недоступен для шрифта?

Выбранный вес автоматически округляется до ближайшего поддерживаемого начертания в семействе Google Fonts.

### Содержит ли CSS-код лишние стили?

Нет, генерируется только один @import с выбранными весами и базовые правила для тегов h1-h3, body и p.

## Связанные инструменты

- [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную.
- [Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/ru/tools/font-file-inspector): Загрузите шрифт TTF, OTF, WOFF или WOFF2 (WOFF2 автоматически распаковывается) и изучите все метаданные: семейство/подсемейство/дизайнер/копирайт/версия, число глифов, unitsPerEm, насыщенность и ширину, угол наклона, флаги стиля и bounding box; тепловую карту покрытия по блокам Юникода; SVG-предпросмотр глифов (свой текст, автосбор для иконочных шрифтов); лигатуры liga и возможности OpenType; оси fvar и именованные экземпляры вариативных шрифтов.
- [Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings](https://elysiatools.com/ru/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Загрузите вариативный шрифт (TTF/OTF/WOFF/WOFF2), чтобы изучить оси fvar и именованные экземпляры, посмотреть интерполяцию прямо в браузере и получить готовый CSS font-variation-settings, эквивалентные высокоуровневые свойства и блок @font-face.
- [Калькулятор clamp для fluid typography CSS](https://elysiatools.com/ru/tools/css-fluid-typography-clamp-calc): Введите границы viewport и шрифта, чтобы получить clamp(), готовый CSS и данные превью
- [Тестер regex C# (.NET)](https://elysiatools.com/ru/tools/csharp-regex-tester): Проверяйте регулярные выражения .NET/C# онлайн: именованные группы ((?…)), флаги IgnoreCase/Multiline/Singleline, подсветка, таблица групп и готовый код C#.
- [Конструктор записей зоны DNS](https://elysiatools.com/ru/tools/dns-zone-file-record-builder): Создаёт записи SOA / NS / A / AAAA / CNAME / MX / TXT (SPF/DKIM/DMARC) / SRV / CAA / TLSA / NAPTR / DS в формате файла зоны RFC 1035, с читаемой сводкой. Поддерживает TTL и несколько записей.
- [Расширенная панель статистики текста](https://elysiatools.com/ru/tools/enhanced-text-statistics-dashboard): Единая панель: подсчёт слов/символов/предложений, TTR (лексическое разнообразие), лексическая плотность, оценка слогов и отдельное время чтения (238 сл/мин) и речи (150 сл/мин).
- [Стеганография изображений: встраивание и обнаружение](https://elysiatools.com/ru/tools/image-steganography-embed-detect): Прячет текст в младшие биты PNG, извлекает обратно и выполняет стегоанализ по методу хи-квадрат Вестфельда–Пфицмана со скользящей кривой p и превью битового плана LSB.

## Примеры

- [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата
- [Примеры Обработки Изображений Web Rust](https://elysiatools.com/ru/samples/web-image-processing-rust): Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов
- [Примеры Обработки Изображений Web TypeScript](https://elysiatools.com/ru/samples/web-image-processing-typescript): Примеры обработки изображений Web TypeScript включая чтение/сохранение, масштабирование и конвертацию форматов
- [Примеры Файловых Операций Web Go](https://elysiatools.com/ru/samples/web-file-operations-go): Примеры файловых операций Web Go включая чтение/запись текстовых файлов, копирование/перемещение, обход директорий и валидацию файлов