Как сочетать шрифты: пары для заголовков и текста
Два шрифта на странице выглядят либо продуманно, либо случайно. Разница в нескольких простых приёмах: контраст, родство и понятная шкала размеров.
Правило контраста
Шрифты в паре должны заметно отличаться, иначе кажется, что вы ошиблись. Самый надёжный ход: заголовок с засечками, текст без засечек, или наоборот. Второй вариант: один шрифт, но разные начертания, например жирный узкий заголовок и обычный текст.
Правило родства
При этом у пары должно быть что-то общее: похожая ширина букв, высота строчных, настроение. Строгий геометрический заголовок плохо уживается с рукописным текстом.
Удачные бесплатные пары с кириллицей
- PT Serif + PT Sans: одна семья, классика для новостей и блогов.
- Playfair Display + Source Sans 3: изящно, для журналов и салонов.
- Montserrat + Merriweather: современный заголовок и удобный текст.
- Oswald + Roboto: плотно и энергично, для спорта и событий.
- Unbounded + Manrope: смело и по-современному, как на этом сайте.
- Comfortaa + Nunito: мягко и дружелюбно, для детских тем.
- Cormorant Garamond + Raleway: тонко и дорого, для свадеб и украшений.
Все они бесплатны под лицензией OFL. Другие шрифты с русскими буквами ищите в каталоге 7fonts.ru.
Шкала размеров
Размеры заголовков лучше не подбирать на глаз, а умножать размер текста на постоянный шаг: 1,2 для спокойного сайта, 1,25 или 1,333 для выразительного. Например, при тексте 18 пикселей и шаге 1,25 получится примерно 23, 28 и 35 пикселей для заголовков третьего, второго и первого уровня.
Проверьте на своём тексте
Соберите страницу с настоящими заголовками и абзацами, а не с «Lorem ipsum». На 7fonts.ru можно написать свой текст сразу многими шрифтами. Про размер, интервалы и лицензии подробнее в статье «Как выбрать шрифт для сайта».
Частые вопросы
Как сочетать два шрифта?
Шрифты должны заметно различаться (например, заголовок с засечками и текст без засечек), но иметь общее: похожие пропорции и настроение.
Какие бесплатные шрифты с кириллицей хорошо сочетаются?
PT Serif и PT Sans, Montserrat и Merriweather, Oswald и Roboto, Playfair Display и Source Sans 3, Unbounded и Manrope.
Как выбрать размеры заголовков?
Умножайте размер текста на постоянный шаг: 1,2 для спокойного сайта или 1,25 для выразительного. При тексте 18 пикселей и шаге 1,25 получится около 23, 28 и 35 пикселей.
