Сочетания шрифтов и каталог Google Fonts
Просматривайте подобранный каталог популярных шрифтов Google с предпросмотром в реальном времени, фильтруйте по категории и ищите по названию, затем копируйте готовый CSS и изучайте предлагаемые сочетания шрифтов — всё в вашем браузере.
Всё работает в вашем браузере — шрифты загружаются из Google Fonts только для предпросмотра в реальном времени, ничего не загружается, без регистрации, абсолютно бесплатно.
Заголовок, набранный декоративным шрифтом
А вот абзац основного текста, набранный сочетаемым текстовым шрифтом. Хорошие сочетания шрифтов уравновешивают характер и читаемость: выразительный заголовочный шрифт привлекает внимание, а чистый и удобный основной шрифт делает чтение длинных фрагментов лёгким. Нажмите «CSS», чтобы скопировать обе строки @import и правила font-family для заголовков и основного текста.
О Сочетания шрифтов и каталог Google Fonts
Этот каталог шрифтов собирает 80 популярных Google Fonts на одной странице с возможностью поиска, каждый показан как живой образец со строкой панграммы, строкой алфавита и цифр и значком категории. Он охватывает пять семейств шрифтов — без засечек, с засечками, декоративные, рукописные и моноширинные, — чтобы вы могли сравнивать реальные начертания букв, а не гадать по названиям.
Каждая карточка шрифта включает подобранные предложения сочетаний: партнёрские шрифты, хорошо работающие вместе для заголовков и основного текста. Щелчок по чипу сочетания открывает превью, где заголовок набран одним шрифтом, а абзац — другим, чтобы вы могли оценить сочетание в контексте перед тем, как остановиться на нём.
Когда шрифт или сочетание подходят, одним щелчком копируется готовый к вставке CSS — строка @import для таблицы стилей Google Fonts плюс соответствующий стек font-family с разумным резервным вариантом. Шрифты загружаются из Google Fonts только для живых превью; ничто из введённого вами никуда не загружается.
Как использовать Сочетания шрифтов и каталог Google Fonts
- Просмотрите карточки шрифтов, каждая из которых показывает название, значок категории и живой образец текста, набранный реальным шрифтом.
- Используйте поле поиска, чтобы найти шрифт по названию, или щёлкните по чипу категории (без засечек, с засечками, декоративный, рукописный, моноширинный), чтобы отфильтровать сетку.
- Перетащите ползунок размера (16–72 px), чтобы предпросмотреть строку образца в нужном размере заголовка или основного текста.
- Щёлкните по чипу «Сочетается с» или кнопке «Предпросмотр сочетания», чтобы увидеть заголовок и абзац основного текста, набранные в предложенном сочетании.
- Нажмите кнопку «CSS» на карточке или в превью сочетания, чтобы скопировать строку @import и объявления font-family в буфер обмена.