Постройте типографическую шкалу и посмотрите её на реальном макете
Задайте размеры заголовка и текста независимо и получите полную шкалу h1-h6, lead, body и small - в виде списка размеров и внутри живого блог-макета.
Slow, deliberate craft is quietly becoming the loudest trend in the room
A conversation about restraint, texture, and why the best layouts are the ones you stop noticing.
“Good structure is invisible until you take it away.”
Что такое типографическая шкала и зачем она нужна
Типографическая шкала - это набор размеров шрифта, растущих с фиксированным шагом, поэтому каждый уровень страницы - заголовок, подзаголовок, основной текст, подпись - связан с остальными по замыслу, а не на глаз. Размеры, подобранные по одному, склонны сползать в почти одинаковые значения и размывать иерархию; шкала держит ступени различимыми, а ритм - ровным.
Этот инструмент строит шкалу от двух независимых опорных точек - заголовка и текста, у каждой свои размер, шаг, начертание и интерлиньяж - и показывает результат дважды: как простой список со значениями в rem, px и pt, и внутри живой блог-страницы, которая использует те же шрифты заголовка и текста, что вы выбрали в панели шрифтов.
Хотите увидеть свои цвета на макетах целых страниц? Откройте Explore Хотите проверить палитру на кнопках, формах и алертах? Откройте Elements Нужно подробное руководство по шагам и размерам? Прочитайте статью о типографической шкалеЧасто задаваемые вопросы
Что такое типографическая шкала?
Последовательность размеров шрифта, построенная от базового размера с фиксированным шагом и используемая для заголовков, основного и мелкого текста, чтобы иерархия страницы выглядела цельно.
Как работают настройки заголовка и текста?
У заголовка и текста свои размер шрифта, шаг шкалы, начертание и интерлиньяж, поэтому крупный акцидентный заголовок может стоять над скромным основным текстом, и одна настройка не тянет за собой другую.
Какие размеры генерируются?
В списке размеров - h1-h6, затем body large, body small, label и caption, у каждой ступени значения в rem, px и pt, которые можно перенести в CSS.
Можно ли попробовать шкалу на своём тексте?
Да. В списке размеров есть поле тестового предложения - введите свой заголовок или фразу, и каждый уровень шкалы отрисуется с ней.
Откуда берутся шрифты?
Шрифты заголовка и текста - те же, что вы выбираете в панели шрифтов внизу инструмента, поэтому смена шрифта там сразу обновляет превью шкалы.
В каких макетах можно посмотреть шкалу?
В редакционном макете (Editorial) или в макете блог-платформы (Blog Platform). Editorial всегда реагирует на настройки шкалы, а Blog Platform реагирует на них с Pro.