CSS · оформление текста

Цвета и типографика в CSS

Хорошо подобранный цвет помогает ориентироваться, а аккуратный текст делает страницу удобной для чтения. Сначала настрой контраст и ритм, а декоративные эффекты оставь на потом.

Как записывать цвет

В CSS есть несколько форматов. HEX удобен для готовой палитры, RGB — для прозрачности, а HSL — когда нужно осознанно менять тон, насыщенность и светлоту.

.title { color: #172033; }
.hint { color: rgb(23 32 51 / .7); }
.button { background: hsl(228 76% 56%); }

Не обозначай смысл только цветом. Сообщение об ошибке должно иметь текст или значок, а активный пункт — дополнительное выделение.

Палитра через переменные

Повторяющиеся значения удобно хранить в CSS-переменных. Изменение одной строки обновит все связанные элементы.

:root {
  --text: #171923;
  --muted: #64748b;
  --surface: #f8fafc;
  --accent: #3d66e8;
}

body { color: var(--text); }
.card { background: var(--surface); }
.link { color: var(--accent); }

Базовая типографика

Для основного текста подойдёт размер около 16–18 пикселей и межстрочный интервал 1.5–1.7. Длинную строку трудно читать, поэтому текстовую колонку полезно ограничивать.

body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

.article-text {
  max-width: 68ch;
}

Единица ch приблизительно связана с шириной символа и удобна для ограничения строки. Заголовкам можно дать меньший line-height, но основной текст не стоит сжимать.

Частые ошибки

• Слишком светлый текст на белом фоне.
• Пять разных оттенков акцента без системы.
• Длинные строки на широком мониторе.
• Размер текста задан везде вручную и плохо масштабируется.

Цвет текста и цвет фона проверяют вместе

Тёмный текст на белом и светлый текст на тёмном читаются. Серый на сером и жёлтый на белом — нет, даже если пара кажется «мягкой». Контраст особенно важен для маленького текста и для подписей полей. Крупный заголовок прощает больше, абзац — меньше.

Не кодируй смысл только цветом. Ошибка формы должна быть не только красной рамкой, но и текстом. Иначе её не поймут люди, которые плохо различают цвета, и она пропадёт на чёрно-белой печати.

Одна палитра на весь учебный сайт

:root {
  --bg: #f6f5f1;
  --text: #1f1c19;
  --muted: #5e584f;
  --line: #ddd6c8;
  --accent: #2f5d50;
}

body { background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.note { color: var(--muted); border-top: 1px solid var(--line); }

Переменные не делают дизайн красивым сами. Они не дают одному и тому же зелёному разъехаться на пять случайных оттенков. Акцент оставь для ссылок и главного действия, а не для каждой иконки.

Типографика рядом с цветом

• Основной текст обычно от 16 до 20 пикселей. Мельче плохо читается на телефоне.
• line-height около 1.5 делает абзац спокойнее, чем плотный 1.1.
• Ширину строки ограничь примерно 60–75 символами, иначе глаз теряет начало следующей строки.
• Не используй светло-серый для важной подсказки. Приглушённый текст — для второстепенного.

Что дальше

Изучи свойство color, CSS-переменные и подключение шрифтов.