Як обрати шрифти для сайту: гайд з типографіки для бізнесу

Чому типографіка — це 90% дизайну

Текст займає 90% контенту сайту. Правильний шрифт створює довіру, неправильний — відштовхує. Comic Sans на сайті юридичної компанії — це не жарт, це втрата клієнтів. Шрифт передає характер бренду: серйозність, креативність, технологічність.

Типи шрифтів і де їх використовувати

• Serif (з засічками) — Times New Roman, Georgia, Playfair Display. Класика, довіра, елегантність. Для юридичних, фінансових, преміальних сайтів
• Sans-serif (без засічок) — Roboto, Open Sans, Montserrat. Сучасність, чистота. Для tech, стартапів, SaaS
• Slab-serif — Roboto Slab, Zilla Slab. Впевненість, стабільність. Для будівельних, виробничих компаній
• Display/Decorative — тільки для заголовків! Ніколи для основного тексту
• Monospace — Fira Code, JetBrains Mono. Для технічних сайтів, блоків коду

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

1. Максимум 2-3 шрифти — заголовок + основний текст + акцент (опціонально)
2. Контраст — serif + sans-serif завжди працює: Playfair Display + Source Sans Pro
3. Одна сім'я — Roboto (заголовок bold) + Roboto (текст regular) — безпечний вибір
4. Уникайте подібних — два sans-serif шрифти виглядають як помилка

Технічні параметри

• Розмір основного тексту — мінімум 16px (краще 18px для довгих текстів)
• Висота рядка (line-height) — 1.5-1.8 для основного тексту, 1.1-1.3 для заголовків
• Довжина рядка — 50-75 символів. Занадто довгий рядок — важко читати
• Контраст тексту — мінімум 4.5:1 для WCAG AA. Перевіряйте на WebAIM Contrast Checker

Google Fonts: ТОП-10 для бізнес-сайтів

1. Inter — універсальний, чудова читабельність на екранах
2. Montserrat — геометричний, сучасний, добре для заголовків
3. Roboto — нейтральний, підходить для будь-якого проекту
4. Playfair Display — елегантний serif для преміальних брендів
5. Source Sans Pro — Adobe, відмінна читабельність
6. Nunito — м'який, дружній, для дитячих та освітніх проектів
7. Raleway — тонкий, стильний, для fashion та дизайну
8. Lora — сучасний serif, чудово поєднується з sans-serif
9. DM Sans — геометричний, відмінний для tech/SaaS
10. Manrope — сучасний, з кирилицею, для стартапів

Оптимізація шрифтів для швидкості

• font-display: swap — текст видний одразу, шрифт підвантажується
• Завантажуйте тільки потрібні начертання (400, 600, 700)
• Використовуйте WOFF2 — на 30% менше за WOFF
• Preload критичних шрифтів: <link rel="preload" href="font.woff2">

Потрібен дизайн сайту з ідеальною типографікою? Розрахуйте проект.