ГоловнаІнструменти дизайнуПоєднання шрифтів

Поєднання шрифтів

Інструмент поєднання шрифтів показує 12 добірних комбінацій Google Fonts для заголовків і основного тексту, дає змогу самостійно комбінувати шрифти та копіює відповідний CSS @import.

The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Про цей інструмент

Інструмент поєднання шрифтів показує 12 добірних комбінацій Google Fonts для заголовків і основного тексту, дає змогу самостійно комбінувати шрифти та копіює відповідний CSS @import.

Як користуватися

  1. Оберіть одну з добірних пар або самостійно виберіть шрифт для заголовків і тексту.
  2. Натисніть «Випадкова пара», щоб переглянути різні комбінації.
  3. Оцініть живий попередній перегляд заголовка й абзацу.
  4. Натисніть «Копіювати CSS @import», щоб підключити шрифти на своєму сайті.

Корисно знати

  • Класичне поєднання протиставляє шрифт із зарубками та рубаний (sans-serif), наприклад Playfair Display і Source Sans 3.
  • Серед пар — Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter і DM Serif Display + DM Sans.
  • Обмеження сайту двома гарнітурами робить сторінки цілісними й зменшує обсяг завантаження.
  • Попередній перегляд завантажує обрані шрифти з Google Fonts у накресленнях 400 і 700.
  • Параметр display=swap в URL шрифту показує резервний текст, поки завантажується вебшрифт.

Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.

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

Які шрифти добре поєднуються?

Зазвичай добре пасують шрифти з контрастним стилем, але схожими пропорціями, як-от висококонтрастний шрифт із зарубками для заголовків і чистий рубаний для тексту. Добірні пари тут — перевірені комбінації.

Скільки шрифтів має бути на сайті?

Для більшості сайтів досить двох гарнітур — однієї для заголовків і однієї для основного тексту. Третя потрібна рідко.

Чи безкоштовні Google Fonts для комерційного використання?

Так. Шрифти з бібліотеки Google Fonts поширюються за відкритими ліцензіями, як-от SIL Open Font License, і їх можна використовувати в комерційних цілях.

Як додати шрифти на свій сайт?

Вставте скопійований @import на початок свого CSS або перетворіть його на тег link у head вашого HTML, а потім задайте font-family для заголовків і body.