Модуль 3 · Урок 12
Кольори й читабельна типографіка
Typography — це не вибір «красивого шрифту», а система читання: font fallback, relative size, line height, measure, spacing і contrast. Light/dark tokens повинні працювати як перевірені foreground/background pairs.
Color tokensContrastFont stackText spacing
Color pair, а не окремий hex
:root {
--ink: #18243a;
--surface: #ffffff;
--accent: #2454d3;
}
body { color: var(--ink); background: var(--surface); }Contrast вимірюється між rendered foreground і фактичним background. Для normal text WCAG 2.2 AA вимагає 4.5:1, для large text — 3:1. Колір не має бути єдиним сигналом state або помилки.
Font stack і sizing contract
Prioritized stack
Inter, ui-sans-serif, system-ui, sans-serif: browser бере перший доступний font.Generic fallbackОстання family не повинна залежати від конкретного installed font.
Relative size
rem, em і clamp() не скасовують потребу перевірити user zoom.Unitless line-height
1.5 масштабується від власного font-size element і успадковується передбачуваніше.MeasureДовжина рядка обмежується для читання, але без обрізання content.
Link affordanceUnderline/focus/state не повинні зникати заради «чистого» вигляду.
Чотири обов’язкові stress tests
| Test | Очікування |
|---|---|
| Light/dark theme | Кожна foreground/background pair має достатній contrast |
| 200% text resize | Без втрати content або functionality |
| 320 CSS px reflow | Без двовимірного scroll, крім справді двовимірного content |
| Text spacing override | Line 1.5, paragraph 2, letter .12, word .16 без overlap/clipping |
Практика модуля
- Заповніть
color-contrast-worksheet.csvдля light і dark pairs. - Заповніть
typography-review.csv: stack, size, line-height, measure, resize і spacing. - Завершіть visual QA checklist у 320px/200%/dark/light.
- Порівняйте starter/reference й поясніть кожну зміну cascade або box evidence.
BookFlow CSS Foundations Pack
Starter/reference HTML+CSS і сім audit artifacts. Без external fonts, trackers, PII та production endpoints.
Офіційні джерела
Практична перевірка · урок 12 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.