Оглядач поєднань шрифтів

Шукайте серед 48 Google Fonts для заголовка й тексту, налаштовуйте насиченість, розмір, міжрядковий та міжлітерний інтервал, перемішуйте пари й копіюйте CSS @import, link або Fontsource.

Завантаження інструмента…

Оглядач поєднань шрифтів — Оберіть шрифт заголовка й шрифт основного тексту з каталогу 48 популярних Google Fonts із пошуком і фільтром за категоріями, а потім тонко налаштуйте для кожної ролі насиченість, розмір, міжрядковий та міжлітерний інтервал, спостерігаючи результат наживо з власним текстом. Натисніть «перемішати», щоб відкривати нові поєднання, і скопіюйте готовий фрагмент як правило CSS @import, HTML-тег link або npm-імпорти Fontsource. Лише два обрані шрифти завантажує ваш браузер безпосередньо з публічного Google Fonts CSS API; ваш зразок тексту й налаштування ніколи не покидають пристрій.

Що таке Оглядач поєднань шрифтів?

Оглядач поєднань шрифтів — це безкоштовний інструмент у браузері для вебдизайнерів, розробників і авторів контенту, яким потрібне охайне поєднання заголовка й основного тексту без перебирання бібліотек шрифтів. Два незалежні пошукові селектори дають змогу фільтрувати 48 дібраних Google Fonts за serif, sans, display чи mono й обирати шрифт для кожної ролі, а елементи керування для кожної ролі задають насиченість, розмір, міжрядковий та міжлітерний інтервал. Живий попередній перегляд відмальовує ваш заголовок і абзац справжніми шрифтами, а кнопка перемішування пропонує випадкові поєднання, коли потрібне натхнення. Коли результат подобається, скопіюйте згенерований CSS у бажаному форматі — правило @import, HTML-тег link чи npm-імпорти у стилі Fontsource — і вставте його в лендинг, тему блогу, презентацію чи дизайн-систему.

Як користуватися Оглядач поєднань шрифтів

  1. У селекторі заголовка відфільтруйте за serif, sans, display чи mono, уведіть текст для пошуку й клацніть шрифт, щоб обрати його.
  2. Зробіть те саме в селекторі тексту, щоб дібрати доповнювальний шрифт для абзацу.
  3. Відкрийте налаштування, щоб задати насиченість, розмір, міжрядковий та міжлітерний інтервал кожної ролі.
  4. Уведіть власний заголовок і речення в полі зразка або залиште порожнім для тексту за замовчуванням; натисніть «Перемішати» для випадкових ідей поєднань.
  5. Оберіть формат виводу — @import, <link> чи Fontsource — і скопіюйте згенерований CSS у свою таблицю стилів чи проєкт.

Приклади

Видавничий заголовок із читабельним текстом

Вхідні дані

Заголовок: Playfair Display 700 · Текст: Source Sans 3 400

Результат

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Тег link для простого HTML

Вхідні дані

Формат: <link>

Результат

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Імпорти Fontsource для збирача

Перемкніть формат на Fontsource, і фрагмент стане рядком встановлення npm та імпортами за насиченістю на кшталт import '@fontsource/inter/700.css'; — готово для проєкту React, Vite чи Next.js.

Поширені запитання

Як обрати два шрифти?
Кожна роль має власний селектор. Відфільтруйте каталог за serif, sans, display чи mono, уведіть частину назви родини для пошуку й клацніть результат, щоб обрати. Заголовок і текст обираються незалежно, а кнопка «Перемішати» добирає випадкову пару за вас.
Чи можна керувати насиченістю, розміром, міжрядковим та міжлітерним інтервалом?
Так. Відкрийте налаштування, щоб задати насиченість, розмір у пікселях, міжрядковий та міжлітерний інтервал (у em) окремо для заголовка й тексту. Кожна зміна з'являється і в живому перегляді, і в скопійованому CSS.
Які формати виводу можна скопіювати?
Три: правило CSS @import, HTML-тег <link> із підказками preconnect і npm-імпорти у стилі Fontsource (npm i @fontsource/… та рядки імпорту за насиченістю). Усі три містять однакові правила font-family, насиченості, розміру, міжрядкового та міжлітерного інтервалу для h1–h3 і body.
Звідки беруться шрифти й чи приватний мій текст?
Коли ви обираєте поєднання, браузер завантажує лише ці дві родини безпосередньо з публічного Google Fonts CSS API за адресою fonts.googleapis.com — це сторонній запит із вашого браузера, а не через наші сервери. Ваш зразок тексту й налаштування повністю залишаються на вашому пристрої.
Які шрифти включено?
Дібраний набір із 48 популярних Google Fonts серед serif, sans-serif, display і monospace — зокрема Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono та інші.

Схожі інструменти

Код у зображення

Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.

Перевірка контрастності кольорів

Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.

Змішувач кольорів

Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.

Генератор відтінків кольору

Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.