Главная идея
Цвет и типографика — это не «украшения в конце», а основа читаемости. Один и тот же текст с продуманными цветами и интервалами читается легко, а со случайными — утомляет глаз. В CSS у нас два инструмента: цвет (как раскрасить текст и фон) и типографика (как набрать сам текст — шрифт, размер, межстрочный интервал, вес).
Представьте, что цвет — это краски художника, а типографика — почерк. Можно записать одну и ту же мысль аккуратным разборчивым почерком на контрастной бумаге — и нацарапать бледным карандашом, мелко и без пробелов между строк. Слова те же, но в первом случае читать приятно, а во втором глаза устают через минуту. CSS даёт вам и краски, и почерк.
Три записи одного цвета
Цвет можно задать именем (teal), шестнадцатеричным кодом (#0f766e), функцией rgb() или hsl(). Это разные «языки» для одного и того же оттенка. Ниже — один цвет в трёх нотациях, образцы идентичны:
- Hex (
#0f766e) — две цифры на красный, зелёный, синий. Самая частая запись в проектах. - rgb() — те же каналы 0–255, но числами. Удобно читать «сколько каждого канала».
- hsl() — тон (0–360°), насыщенность и светлота в %. Удобен для подбора оттенков: меняешь только светлоту — получаешь светлее/темнее.
Контраст важнее декора
Главное правило цвета в тексте — контраст между текстом и фоном. Сравните: слева текст легко читается, справа — почти сливается с фоном.
Слабый контраст делает страницу не только некрасивой, но и недоступной для людей со слабым зрением.
Из чего состоит типографика
Типографика начинается с базовых свойств, которые задаются у body и наследуются дочерними элементами:
- font-family — семейство шрифта. Указывают список «запасных»:
Georgia, 'Times New Roman', serif— браузер берёт первый доступный. - font-size — размер букв. Базовый текст обычно 16–18px (или
1rem). - font-weight — насыщенность:
400(обычный),700(жирный). - line-height — высота строки. Для основного текста комфортно
1.5–1.6. - color — цвет текста.
Длина строки и иерархия
Хорошая строка не должна быть слишком длинной: глазу трудно найти начало следующей. Ограничивайте текстовые блоки через max-width в единицах ch (ширина символа «0»): комфортный диапазон — 65–75ch.
Заголовки должны отличаться не только размером, но и ролью: h1 — главный заголовок страницы (один), h2 — разделы, h3 — подразделы. Это и визуальная иерархия, и структура для скринридеров.
body цвет, фон, font-family и line-height — и весь текст сразу станет читаемым. Дальше только уточняйте заголовки и акценты.