На главную
CSS и вёрстка
Пары шрифтов
Заголовок и текст из Google Fonts на живом примере: оценка сочетаемости, разбор причин и честная пометка, есть ли в семействе кириллица.
Выбор
Готовые пары
Как это читается
Раздел
Типографика решает больше, чем кажется
Разница между шрифтами видна не на одном слове, а на абзаце в десять строк. Съешь же ещё этих мягких французских булок, да выпей чаю. Цифры тоже важны: 1234567890, ₽ и №.
Мелкий кегль — самая честная проверка: если на 14 пикселях буквы слипаются, на сайте это заметят все.
Оценка пары: 86 из 100
Хорошая пара
- +Контраст рисунка: Антиква в заголовке и Гротеск в тексте.
- +Оба семейства с кириллицей — русский текст не подменится системным шрифтом.
- +В текстовом шрифте есть и обычный, и полужирный — хватит на выделения.
Подключение в <head>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;700&display=swap">
CSS
h1, h2, h3 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 700;
}
body {
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}