Генератор модульної типографічної шкали
Що таке модульна типографічна шкала?
Типографічна шкала — це набір розмірів шрифтів, що знаходяться у певному математичному відношенні один до одного. Замість довільних розмірів (14px, 16px, 20px, 28px) шкала створює гармонійну прогресію: кожен наступний розмір у задане число разів більший за попередній. Це забезпечує візуальну ієрархію та консистентність.
Популярні шкали
Minor Second (1.067) — дуже щільна шкала для складних UI з багатьма рівнями. Major Second (1.125) — популярна для корпоративних сайтів. Minor Third (1.2) — збалансована і популярна. Major Third (1.25) — чітка ієрархія для маркетингових сайтів. Perfect Fourth (1.333) — класична і гарна. Golden Ratio (1.618) — максимальний контраст, підходить для лендингів.
Практичне застосування
Починайте з базового розміру тексту (16px або 18px). Застосовуйте шкалу вгору для заголовків та вниз для підписів. Округлюйте до цілих пікселів або rem-значень для чіткості. Експортуйте як CSS-змінні або токени дизайну для використання у Figma та коді одночасно.
Шкали для адаптивного дизайну
На маленьких екранах велика шкала (1.333+) може давати надто великі заголовки. Розгляньте використання clamp() для плавного масштабування або різних шкал для мобільної та десктопної версій. Tailwind CSS використовує близьку до Major Third шкалу як основу для своїх класів тексту.