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

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

1. Почніть з однієї із Запропоновані пари (Редакційна, Сучасний блог, Посадкова сторінка, Новини, Елегантна, Технологічний журнал, Книга, Класична, Документація, Грайлива). Кожна кнопка показує шрифт заголовка й шрифт тексту, які вона застосовує.
2. Або виберіть власні Шрифт заголовка та Шрифт тексту. Списки згруповано на шрифти без засічок, із засічками, декоративні, моноширинні та рукописні. Кнопка Поміняти шрифти місцями обмінює їх.
3. Налаштуйте Розмір заголовка, Розмір тексту та Міжрядковий інтервал і виберіть Насиченість заголовка (Жирний (700) або Звичайний (400)). Позначте Темне тло, щоб перевірити пару в темному режимі.
4. Замініть Текст заголовка та Основний текст власними словами: справжній заголовок і справжній абзац розкажуть значно більше, ніж панграма. Між абзацами залишайте порожній рядок.
5. Скопіюйте CSS-код, а потім дотримуйтеся розділу Власний хостинг із Fontsource, щоб додати шрифти у ваш проєкт.

Шрифти завантажуються під час першого вибору (приблизно 12–50 КБ на одну насиченість). Вони віддаються з цього сайту, ніколи не з CDN шрифтів.

Що робить поєднання шрифтів вдалим

• Контраст, а не конфлікт. Класичний рецепт – шрифт із засічками для однієї ролі й рубаний для іншої: Playfair Display над Lato або Montserrat над Merriweather. Два шрифти, схожі, але не однакові (скажімо, два геометричні рубані), часто виглядають як помилка.
• Спокійний шрифт тексту. Саме в основному тексті люди проводять свій час. Виберіть шрифт з відкритими формами літер і щедрою висотою рядкових літер (Inter, Lato, Open Sans, Source Serif 4, Merriweather), а декоративні шрифти на кшталт Playfair Display, DM Serif Display, Oswald чи Caveat залиште для коротких заголовків.
• Співмірні пропорції. Шрифти зі схожою висотою рядкових літер добре виглядають в одному рядку й одній колонці.
• Двох шрифтів достатньо. Створюйте ієрархію розміром, насиченістю й інтервалами, а не третім шрифтом.

Для читабельного тексту добрий початковий діапазон – від 16 до 20 px з міжрядковим інтервалом від 1,4 до 1,7 та приблизно 60–75 символів у рядку. Заголовкам зазвичай потрібен щільніший інтервал (від 1,1 до 1,3), який CSS-код задає за вас.

Кирилиця й українська

Попередній перегляд і блок установлення підключають латиницю, розширену латиницю та кирилицю, якщо шрифт їх має. Українські літери і, ї, є, ґ є в кириличних наборах Inter, Roboto, Open Sans, Source Serif 4 та Fira Code, а також у багатьох інших шрифтах списку. Але Lato, Work Sans і Space Grotesk кирилиці не мають: українські літери в них показуватимуться запасним шрифтом. Для сторінок українською вибирайте шрифти з кирилицею. Арабських шрифтів у списку немає.

CSS-код

Код оголошує дві власні властивості, --font-heading та --font-body, кожна із запасним стеком: якщо веб-шрифт ще не завантажився, браузер показує схожий системний шрифт (Georgia для шрифтів із засічками, системний шрифт інтерфейсу для рубаних). Розміри записано в rem (16 px = 1rem), тож вони підлаштовуються під налаштування розміру шрифту в браузері читача.

Власний хостинг і ліцензії

Усі 20 шрифтів походять з Fontsource, який пакує шрифти з відкритим кодом для npm. Блок установлення дає команду npm install та рядки import для потрібної підмножини символів і лише тих насиченостей, які ви використовуєте; потім ваш збирач копіює файли woff2 у збірку. Віддавати шрифти зі свого домену швидше (немає додаткового з’єднання), це працює офлайн і дозволяє не надсилати IP-адреси ваших відвідувачів стороннім службам шрифтів, що в ЄС є відомою проблемою GDPR.

Згідно з метаданими пакетів, кожен шрифт тут має ліцензію SIL Open Font License 1.1: його можна використовувати на сайтах, у застосунках і в друку, комерційно чи ні, а також вбудовувати. Продавати самі файли шрифту не можна. Якщо ви змінюєте шрифт, він має зберегти OFL і не повинен використовувати вихідну зарезервовану назву. Файл ліцензії додається до кожного пакета.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.