Типографіка

CSS типографіка — каліграфія та зразки шрифтів на столі майстра

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

Основні властивості шрифтів

font-family — сімейство шрифтів

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Браузер спробує перший шрифт. Якщо його немає — другий, і так далі. Останнім завжди вказуй generic family:

Generic family	Вигляд	Приклад
`sans-serif`	Без зарубок (сучасний)	Arial, Helvetica
`serif`	З зарубками (класичний)	Times New Roman, Georgia
`monospace`	Однакова ширина літер	Courier New, Consolas

font-size — розмір

body { font-size: 16px; }    /* базовий (стандарт браузера) */
h1 { font-size: 2.5rem; }    /* 40px */
h2 { font-size: 2rem; }      /* 32px */
small { font-size: 0.875rem; } /* 14px */

font-weight — жирність

font-weight: normal;   /* 400 */
font-weight: bold;     /* 700 */
font-weight: 300;      /* тонкий (light) */
font-weight: 600;      /* напівжирний (semibold) */

font-style

font-style: normal;
font-style: italic;

Властивості тексту

line-height — міжрядковий інтервал

/* Рекомендоване значення для основного тексту */
p {
  line-height: 1.6;  /* 1.6 × font-size */
}

Порада

line-height: 1.6 — золотий стандарт для основного тексту. Занадто тісно (1.0) — важко читати. Занадто вільно (2.5) — текст "розпливається". Для заголовків — 1.2-1.3.

letter-spacing та word-spacing

/* Відстань між літерами */
h1 { letter-spacing: -0.5px; }  /* трохи щільніше */
.caps { letter-spacing: 2px; }  /* для великих літер */

/* Відстань між словами */
p { word-spacing: 1px; }

text-transform

text-transform: uppercase;    /* ВЕЛИКІ ЛІТЕРИ */
text-transform: lowercase;    /* маленькі літери */
text-transform: capitalize;   /* Кожне Слово З Великої */
text-transform: none;         /* як є */

text-decoration

text-decoration: none;          /* прибрати підкреслення */
text-decoration: underline;     /* підкреслити */
text-decoration: line-through;  /* закреслити */

Google Fonts — красиві шрифти безкоштовно

Google Fonts — бібліотека з 1500+ безкоштовних шрифтів.

Як підключити:

Зайди на fonts.google.com
Обери шрифт (наприклад, Inter — один з найкращих для вебу)
Обери потрібні жирності (400, 600, 700)
Скопіюй код підключення

<!-- В <head> HTML-файлу -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
  rel="stylesheet">

/* В CSS */
body {
  font-family: "Inter", sans-serif;
}

Шрифт	Тип	Для чого
Inter	sans-serif	Універсальний, чудовий для UI
Roboto	sans-serif	Стандарт Google/Android
Open Sans	sans-serif	Легкий для читання
Merriweather	serif	Для довгих текстів/блогів
Fira Code	monospace	Для блоків коду

Принципи читабельності

1. Розмір

Основний текст — мінімум 16px (1rem). Менше — важко читати на мобільних.

2. Довжина рядка

Оптимально — 50-75 символів на рядок. Занадто довгі рядки стомлюють очі:

p {
  max-width: 65ch; /* ch = ширина символу "0" */
}

3. Контраст

Текст повинен чітко виділятися на фоні. Мінімальне співвідношення контрасту — 4.5:1.

/* ✅ Добре — достатній контраст */
body { color: #333; background: #fff; }

/* ❌ Погано — сірий на білому, важко читати */
body { color: #aaa; background: #fff; }

4. Ієрархія

Різні розміри та жирність створюють візуальну ієрархію:

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }
p  { font-size: 1rem; font-weight: 400; }

Практика: типографічна система

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2d3748;
  background-color: #f7fafc;
}

h1, h2, h3 {
  line-height: 1.3;
  color: #1a202c;
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }

p {
  max-width: 65ch;
  margin-bottom: 1rem;
}

a {
  color: #3182ce;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

small {
  font-size: 0.875rem;
  color: #718096;
}

Цю систему можна скопіювати як основу для будь-якого проєкту.

Підсумок

font-family — завжди вказуй fallback (sans-serif, serif, monospace)
font-size — використовуй rem, мінімум 16px для основного тексту
line-height: 1.6 — золотий стандарт для читабельності
Google Fonts — безкоштовні красиві шрифти, не більше 2-3 на сайт
Читабельність — контраст, довжина рядка (max-width: 65ch), ієрархія розмірів

Що далі?

У наступному уроці вивчимо позиціонування — display, position, z-index.

Інфо

Корисні інструменти:

Type Scale — калькулятор розмірів шрифтів
Google Fonts — бібліотека шрифтів
WebAIM Contrast Checker — перевірка контрасту

Корисні посилання:

web.dev: Font Best Practices — оптимізація шрифтів
Practical Typography — безкоштовна книга про типографіку