Урок 14. Ошибки: Цвета и типографика
⚡ Кратко
Топ-ошибки темы: слабый контраст, центрирование длинного текста, много шрифтов, ссылка цвета обычного текста. Все видны глазом — сравните «как ломается» и «как правильно» ниже.
Типичные ошибки
1. Слишком слабый контраст
Светло-серый текст на белом фоне трудно читать, особенно при ярком освещении.
❌ #cbd5e1 на белом — текст почти не виден
✅ #1f2937 на белом — читается легко
/* плохо */ p { color: #cbd5e1; }
/* хорошо */ p { color: #1f2937; }2. Центрирование больших объёмов текста
Длинные центрированные абзацы хуже читаются: глаз не находит начало строки.
❌ Этот абзац выровнен по центру, и каждая строка начинается в новом месте — читать утомительно.
✅ Тот же абзац по левому краю: ровный левый край ведёт взгляд от строки к строке.
/* плохо */ .text { text-align: center; }
/* хорошо */ .text { text-align: left; }3. Много разных шрифтов
Двух семейств обычно достаточно для учебной страницы. Каждый лишний шрифт создаёт визуальный шум.
/* хорошо: максимум 2 семейства */
body { font-family: Arial, sans-serif; }
h1, h2 { font-family: Georgia, serif; }4. Цвет ссылки совпадает с обычным текстом
Пользователь должен видеть, что элемент интерактивный.
❌ Здесь есть ссылка, но её не отличить от текста.
✅ Здесь ссылка выделена цветом и подчёркиванием.
/* плохо */ a { color: inherit; text-decoration: none; }
/* хорошо */ a { color: #1d4ed8; }