Генератор модульной шкалы типографики
Модульная шкала строит размеры шрифтов по математическому соотношению, как ноты в музыке. Результат — типографика, которая выглядит гармонично без ручного подбора размеров.
3.052remГлавный герой страницы2.441remЗаголовок первого уровня1.953remЗаголовок раздела1.563remПодзаголовок1.25remКрупный абзац, лид1remОсновной текст0.8remВторичный текст, подписи0.64remЛейблы, лого, кнопки мелкие:root {
--step-5: 3.052rem;
--step-4: 2.441rem;
--step-3: 1.953rem;
--step-2: 1.563rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step-n1: 0.8rem;
--step-n2: 0.64rem;
}Часто задаваемые вопросы
Что такое модульная шкала?
Модульная шкала — набор значений, каждое из которых получается умножением предыдущего на фиксированное соотношение (ratio). Например, при base=16px и ratio=1.25 получим: 10.24, 12.8, 16, 20, 25, 31.25, 39.06 px. Это те же соотношения, что используются в музыке между нотами.
Какое соотношение выбрать?
Для лаконичных UI с небольшим диапазоном размеров — Minor Third (1.2) или Major Third (1.25). Для журналов и лендингов с выраженной иерархией — Perfect Fourth (1.333) или Golden Ratio (1.618). Чем больше ratio, тем сильнее различаются уровни заголовков.
Как применить шкалу в CSS?
Скопируйте сгенерированные CSS-переменные в :root {}. Затем используйте: h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } и т.д. Базовый размер текста body обычно соответствует --step-0.
Нужен полноценный SEO-аудит?
Инструменты помогают с точечными задачами. Для системного роста — запросите бесплатный разбор вашего сайта.