CodeKitHubЩо це за інструмент?
Поєднання шрифтів — це вибір двох (іноді трьох) гарнітур, які використовуються разом на сторінці, зазвичай одна для заголовків, а інша для основного тексту, щоб сторінка мала візуальну ієрархію, не виглядаючи ні неузгоджено, ні одноманітно.
Кожне поєднання нижче показує наживо відрендерений приклад: шрифт заголовка зверху, шрифт основного тексту знизу, з використанням реальних файлів Google Fonts, тож те, що ви бачите, — це саме те, що отримаєте на своєму сайті.
До кожного поєднання додається готовий тег `<link>` для вбудовування з Google Fonts і відповідний фрагмент CSS із деклараціями `font-family` для заголовків і основного тексту — скопіюйте обидва, і готово.
Навіщо його використовувати?
- 28 дібраних вручну поєднань, а не автоматично згенерований список — кожне обране тому, що ці два шрифти справді доповнюють одне одного.
- Живий попередній перегляд: кожне поєднання рендериться з реальними шрифтами, завантаженими з Google Fonts, а не як статичне зображення чи здогадка за назвою шрифту.
- Фільтрація за стилем — Сучасний, Елегантний, Сміливий, Мінімалістичний, Класичний — щоб швидко знайти настрій, потрібний вашому проєкту.
- Копіювання в один клік як тега `<link>` для вбудовування, так і правил CSS `font-family`.
- Безкоштовно, працює прямо у браузері, без акаунта чи входу.
Як користуватися
- За бажанням натисніть фільтр стилю (Сучасний, Елегантний, Сміливий, Мінімалістичний, Класичний), щоб звузити список, або залиште вибраним «Усі», щоб переглянути всі варіанти.
- Перегляньте картки з живим попереднім переглядом — верхній рядок показує шрифт заголовка, рядок нижче — шрифт основного тексту.
- Відкрийте сподобане поєднання й натисніть, щоб розгорнути розділ із кодом для вбудовування.
- Скопіюйте тег `<link>` у `<head>` вашого HTML-документа, а фрагмент CSS — у файл стилів, щоб застосувати шрифти до заголовків і основного тексту.
Приклад
Введення
Елегантний блогРезультат
Playfair Display (заголовки) + Source Sans Pro (основний текст)Фільтр «Елегантний» показує контрастні заголовки з засічками у поєднанні з чистим, добре читабельним рублений текстом без засічок — поширена комбінація для редакційних і блог-макетів.
Принципи вдалого поєднання шрифтів
- Контраст важливіший за схожість: два майже ідентичні шрифти (наприклад, два схожі геометричні рублені) зазвичай виглядають як помилка, а не як свідомий вибір. Поєднуйте шрифт із засічками з рубленим або насичений акцидентний шрифт із легшим текстовим, щоб відмінність сприймалася навмисною.
- Узгоджуйте висоту малих літер (x-height) і пропорції: шрифти, чиї малі літери мають схожу візуальну висоту, зазвичай виглядають так, ніби належать одній сторінці, навіть коли стилі різняться — неузгоджена x-height — одна з найпоширеніших причин, чому поєднання здається «недоречним».
- Обмежтеся двома гарнітурами (іноді трьома): одна для заголовків, одна для основного тексту і щонайбільше третя для акцентів на кшталт кнопок чи міток. Більше — і сторінка починає здаватися непродуманою.
- Враховуйте настрій, а не лише форму: заокруглений, дружній рублений шрифт у поєднанні з формальним шрифтом із засічками надсилає суперечливі сигнали, навіть якщо форми літер технічно поєднуються — обирайте шрифти, узгоджені і за тоном, і за структурою.
- Тестуйте в реальних розмірах: поєднання, яке чудово виглядає у великому попередньому перегляді, може втратити контраст у розмірі основного тексту, а акцидентний шрифт може стати нечитабельним у малих розмірах — завжди перевіряйте обидві крайності.
Вибір поєднання залежно від призначення
Лендінги й маркетингові сайти зазвичай виграють від фільтрів «Сміливий» або «Сучасний» — сильний, контрастний шрифт заголовка привертає увагу над лінією згину, у поєднанні з чистим, нейтральним текстовим шрифтом, що полегшує сканування довгого тексту.
Блоги та редакційний контент часто читаються найкраще з поєднаннями «Елегантний» або «Класичний» — витончений заголовок із засічками сигналізує про виважений, редакторський голос, тоді як зручний текст із засічками або рублений зберігає довгі статті читабельними протягом тривалого читання.
Інтернет-магазини та сайти товарів зазвичай віддають перевагу поєднанням «Мінімалістичний» — стримані, нейтральні шрифти зосереджують увагу на фотографіях товарів і цінах, а не на самій типографіці, що важливо, коли на одній сторінці показано десятки карток товарів.
Портфоліо та креативні сайти мають найбільше простору для експериментів — поєднання «Сміливий» або «Елегантний» з більшою індивідуальністю можуть чудово спрацювати, адже аудиторія частково приходить саме для того, щоб оцінити візуальний смак.
Примітки щодо продуктивності та ліцензування
Тег `<link>` для вбудовування завантажує шрифти з CDN Google, який швидкий і закешований на багатьох сайтах, які ваші відвідувачі, ймовірно, уже відвідували, — проте він усе одно додає зовнішній запит. Для сайтів, де важлива кожна мілісекунда, завантаження файлів шрифтів і самостійний хостинг (із вручну заданим `font-display: swap`) усувають цю зовнішню залежність ціною певних додаткових зусиль із налаштування.
Усі шрифти в Google Fonts мають відкритий код і безкоштовні для комерційного використання без обов'язкового зазначення авторства, хоча згадати дизайнера шрифту — приємний жест, коли це легко зробити.
Часті запитання
Що робить два шрифти «добре поєднаними»?
Вдалі поєднання балансують між контрастом і гармонією. Контраст — поєднання шрифту із засічками з рубленим, або сміливого акцидентного шрифту зі звичайним текстовим — створює візуальну ієрархію, завдяки якій заголовки й текст чітко відрізняються. Гармонія — схожа висота малих літер (x-height), порівнянна товщина штрихів і спільне відчуття формальності або грайливості — не дає двом шрифтам конфліктувати. Поєднання тут дібрані з урахуванням обох цих чинників.
Чи завжди заголовки й основний текст мають використовувати різні шрифти?
Ні, використання однієї гарнітури для обох (як-от поєднання «Rubik + Rubik» у цьому інструменті) теж чудово працює, якщо шрифт має достатньо варіацій насиченості, щоб відрізнити заголовки від тексту. Це цілком слушний, мінімалістичний вибір, а не помилка.
Як насправді застосувати поєднання на своєму сайті?
Скопіюйте тег `<link>` для вбудовування в `<head>` вашої сторінки, щоб завантажити шрифти з CDN Google, а потім скопіюйте фрагмент CSS у файл стилів — він задає `font-family` для заголовків (h1, h2, h3) і для основного тексту (body, p). За потреби скоригуйте CSS-селектори відповідно до вашої розмітки.
Чи сповільнить завантаження Google Fonts мій сайт?
Кожен додатковий файл шрифту додає мережевий запит і певний ризик блокування рендерингу. Обмежтеся однією насиченістю для заголовків і однією-двома для основного тексту, використовуйте `display=swap` (уже включено в код вбудовування), щоб текст показувався резервним шрифтом, поки завантажується веб-шрифт, а для продакшн-сайтів, яким потрібне максимально швидке завантаження, розгляньте самостійний хостинг файлів шрифтів.
Чи можна безкоштовно використовувати ці шрифти комерційно?
Так. Кожен шрифт у Google Fonts, включно з усіма поєднаннями, показаними тут, ліцензований за SIL Open Font License або Apache License — обидві ліцензії дозволяють вільне комерційне використання, модифікацію та поширення без роялті.