🔠 Один набор инструментов для
любой задачи проектирования

Генератор типографической шкалы

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

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🔠 Генератор типографической шкалы

Руководство по масштабированию типографики

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

Выберите базовый размер (16 пикселей — это значение браузера по умолчанию и надежная отправная точка), затем выберите соотношение. Меньшие соотношения, например 1,125, создают тонкие, элегантные масштабы для редакционных сайтов; более высокие коэффициенты, такие как 1,618, создают резкий контраст для маркетинговых страниц.

Pro Tips

Frequently Asked Questions

Q: Что такое модульная шкала?
Что такое модульная шкала? Модульная шкала — это серия размеров, полученная из базового размера, многократно умноженного на фиксированное соотношение — та же математика, что и в музыкальных шкалах.
Q: Какое соотношение мне выбрать?
Какое соотношение мне выбрать? Начните с 1.333 (идеальный четвертый) для общего использования в Интернете. Используйте 1,2 для плотных интерфейсов, 1,5 для ярких маркетинговых сайтов и 1,618 для эффектного редакционного дизайна.
Q: Почему 16 пикселей — стандартный базовый размер?
Почему 16 пикселей — стандартный базовый размер? 16 пикселей — это размер корневого шрифта по умолчанию во всех браузерах. Использование этого масштаба обеспечивает согласованность, когда пользователи меняют настройки масштабирования или специальных возможностей браузера.
Q: Должен ли я использовать rem вместо px?
Должен ли я использовать rem вместо px? Да. Определите масштаб в пикселях, но для доступности используйте rem: 1rem соответствует размеру корневого шрифта, поэтому размеры на основе rem масштабируются в соответствии с предпочтениями пользователя.
Q: Сколько ступеней нужно весам?
Сколько ступеней нужно весам? 6–8 шагов удовлетворяют большинство потребностей: заголовок, маленький размер, текст, диапазон h4–h1 и размер дисплея. Дополнительные шаги добавляют обслуживания без особой пользы.

Русские традиционные цвета

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

Алый #FF2400

Алый цвет знамён, сарафанов и праздничной символики

Васильковый #6495ED

Цвет полевых васильков — символ русских лугов

Золото Хохломы #D4AF37

Золотой орнамент хохломской росписи

Гжель Синий #005A9C

Кобальтовая синева гжельской керамики

Изумрудный #50C878

Цвет уральских самоцветов и малахита

Бордовый #800020

Тёмно-красный цвет театральных занавесов

Янтарный #FFBF00

Балтийский янтарь — золото Калининграда

Сиреневый #C8A2C8

Нежная сирень майских садов

Охристый #CC7722

Цвет иконописи и древних фресок

Снежно-белый #F8F8FF

Белый снег русских зим

Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.