$ Пресеты
# Шрифт заголовка
# Шрифт основного текста
$ Предпросмотр
</> Код
$ Как использовать генератор пар шрифтов
Начните с выбора пресет-пары — это проверенные комбинации, которые работают вместе. Или сделайте свою: выберите шрифт заголовка и шрифт основного текста из выпадающих списков (все из Google Fonts), настройте размеры и жирность, и смотрите, как предпросмотр обновляется в реальном времени. Переключайтесь между предпросмотрами статьи, hero и карточки, чтобы увидеть, как пара ведёт себя в разных контекстах. Когда вы довольны, скопируйте импорт или CSS и вставьте в проект.
Что делает пару шрифтов хорошей
Лучшие пары создают контраст без столкновения. Распространённый шаблон — шрифт с засечками или дисплейный для заголовков в паре с чистым без засечек для основного текста. Заголовок привлекает внимание; основной текст остаётся читаемым. Избегайте парить два слишком похожих шрифта — если вы прищуритесь и не сможете их различить, выберите что-то с большей индивидуальностью для заголовка.
Почему это важно для вашего приложения
Ваши скриншоты App Store, лендинг и UI в приложении — всё выигрывает от последовательной, хорошо подобранной типографики. Шрифты, которые вы выбираете, задают тон — игривый, профессиональный, минималистичный, смелый. Правильно подобрать пару рано — это сэкономит работу по редизайну позже. Используйте этот инструмент для быстрых экспериментов, затем возьмите точный CSS в свой проект.
$ FAQ
Это бесплатно?
Да — полностью бесплатно, без регистрации, без ограничений. Работает полностью в браузере и загружает шрифты прямо из Google Fonts.
Могу ли я использовать эти шрифты в своём приложении?
Все шрифты здесь из Google Fonts и являются open-source. Можно использовать в приложениях, на сайтах, в печати — где угодно. Подробности на Google Fonts по лицензии каждого шрифта (большинство — SIL Open Font License).
Как добавить шрифты в проект?
Скопируйте тег <link> или строку @import из секции кода и добавьте в свой HTML или CSS. Затем используйте объявления font-family, показанные в выводе CSS.
Почему некоторые веса показываются недоступными?
Не все Google Fonts поддерживают все веса. Чипы веса показывают только веса, которые выбранный шрифт реально предоставляет.