Создавайте гармоничную модульную типографическую шкалу с золотым сечением, большой терцией и другими классическими пропорциями. Наглядный предпросмотр размеров и полный CSS.
Типографический масштаб — это набор размеров шрифта, которые соответствуют единому математическому соотношению. Вместо случайного выбора размеров каждый шаг умножается на одно и то же соотношение, создавая визуальный ритм и иерархию заголовков, основного текста и подписей.
Выберите базовый размер (16 пикселей — это значение браузера по умолчанию и надежная отправная точка), затем выберите соотношение. Меньшие соотношения, например 1,125, создают тонкие, элегантные масштабы для редакционных сайтов; более высокие коэффициенты, такие как 1,618, создают резкий контраст для маркетинговых страниц.
Типографическая шкала — это фиксированный набор размеров шрифта, следующих одной математической пропорции, так что каждая ступень связана со следующей одним и тем же отношением. Вместо того чтобы выбирать размеры на глаз — 14, 17, 22, 31... — вы выбираете базовый размер и снова и снова умножаете (или делите) его на отношение: 16 × 1,25 = 20, × 1,25 = 25, и так далее. В результате иерархия выглядит осознанной: заголовки, основной текст, подписи и метки кажутся членами одной дизайн-системы, а не кучей случайных размеров.
Распространённые отношения ведут себя по-разному. 1,125 и 1,2 создают тонкие, элегантные ступени — идеально для плотных текстовых интерфейсов. 1,25 и 1,333 — рабочие лошадки веба: заметная иерархия без драмы, а 1,333 кстати является чистой квартой классической музыки. 1,5 даёт смелые скачки для контентных сайтов. 1,618 — золотое сечение — эффектно, но агрессивно: красиво для дисплейных заголовков и маркетинговых страниц, обычно перебор для длинного чтения.
16px — стандарт браузера и правильная отправная точка для основного текста на десктопе: соответствует комфорту чтения печатных книг, читабелен для большинства и согласуется с рекомендациями доступности. Мобильные интерфейсы могут начинать чуть меньше (15px) или оставаться на 16px. Когда база зафиксирована, всё остальное выводится из неё — заголовки умножением вверх, подписи и метки делением вниз — одно изменение базы перенастраивает всю иерархию согласованно.
Шкала — это больше, чем размеры шрифта. Межстрочный интервал должен расти по мере уменьшения текста: 1,5–1,6 для основного текста, 1,2–1,4 для заголовков. Для вертикального ритма умножьте базовый размер на отношение шкалы и постройте ступени отступов — если шкала 16/20/25/31, те же числа годятся как приращения полей и паддингов. Когда размеры и отступы разделяют одно отношение, каждый элемент встаёт на невидимую сетку, и страница выглядит свёрстанной, а не собранной.
Текст должен плавно меняться между мобильным и десктопом. Современный CSS решает это одной строкой: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — минимум, текучая середина, максимум. Возьмите минимум и максимум из своей шкалы (например, 16px до 28px), остальное сделает член с viewport — заголовки изящно сжимаются на телефоне и растут на мониторе без единого media query.
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый цвет знамён, сарафанов и праздничной символики
Цвет полевых васильков — символ русских лугов
Золотой орнамент хохломской росписи
Кобальтовая синева гжельской керамики
Цвет уральских самоцветов и малахита
Тёмно-красный цвет театральных занавесов
Балтийский янтарь — золото Калининграда
Нежная сирень майских садов
Цвет иконописи и древних фресок
Белый снег русских зим