Урок 14. Старый vs Новый: Цвета и типографика

📁 Раздел: Основы CSS ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

#color #background-color #rgb #hsl #font-family #font-size #font-weight #line-height #text-align #letter-spacing #max-width

⚡ Кратко

Сравнивайте не только внешний результат, но и удобство поддержки кода. Слабый контраст и фиксированный гигантский размер заголовка — устаревший подход; читаемая палитра + адаптивный размер — современный.

Сравнение подходов

❌ Неудачный подход: случайные цвета и размеры

Заголовок

Светло-серый текст на белом почти не читается.

body {
  color: lightgray;
  background: white;
}

h1 {
  font-size: 80px;
}

Низкий контраст и чрезмерный фиксированный размер ухудшают чтение и ломают мобильную вёрстку.

✅ Лучший подход: система текста и цвета

Заголовок

Тёмный текст на светлом фоне читается легко, заголовок подстраивается под ширину.

body {
  color: #1f2937;
  background: #f8fafc;
  line-height: 1.6;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Цвета читаются, а размер заголовка адаптируется к ширине экрана.

⚠️ Проверить по документации: clamp(min, предпочт, max) — современная функция CSS для «отзывчивого» размера без media-queries. Поддержка во всех актуальных браузерах.