Настройка типографической шкалы
Предварительный просмотр модульной шкалы типографики с регулируемым размером базы, соотношением, шрифтом и высотой линии. экспорт CSS Размеры для текста тела и шесть уровней заголовков.
Типография CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Текст экспорта остаётся на английском; введённые данные сохраняются без изменений.
Не подписывайся. Никаких кредитов. Этот инструмент собирает ваш вывод в вашем браузере.
От идеи к чему-то полезному.
- 01
Выберите шрифт, размер базы и модульное соотношение.
- 02
Проверить размеры заголовков и интервал между абзацами.
- 03
скачать CSS переменных для текущей шкалы.
Небольшой контекст.
Модульная шкала умножает размер базового шрифта на повторное соотношение. Эта игровая площадка вычисляет шестиуровневую иерархию заголовков, а также тело и небольшой текст. Размеры являются явными значениями пикселей для отправной точки; просмотрите отзывчивое поведение и масштабируйте перед использованием их в производстве.
Хорошие вопросы.
Делает это CSS Загрузить выбранный шрифт?
Нет. Он называет шрифт и снабжает запасные семьи. Загрузите или самостоятельно разместите выбранный шрифт в своем приложении.
Являются ли эти размеры отзывчивыми?
Экспорт содержит фиксированные размеры. Адаптируйте их к точкам останова или системе типа жидкости после тестирования фактического содержимого.