Калькулятор типографической шкалы
Создавайте согласованную иерархию заголовков.
Введите базовый размер шрифта и выберите коэффициент шкалы, чтобы получить полную модульную шкалу от H1 до мелкого текста с соответствующим CSS-фрагментом.
1.250
h1Съешь ещё этих мягких булок39.06pxh2Съешь ещё этих мягких булок31.25pxh3Съешь ещё этих мягких булок25.00pxh4Съешь ещё этих мягких булок20.00pxh5Съешь ещё этих мягких булок16.00pxpСъешь ещё этих мягких булок16.00pxsmallСъешь ещё этих мягких булок12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}Как построить типографическую шкалу
- Введите базовый размер шрифта в пикселях.
- Выберите коэффициент шкалы или «Пользовательский», чтобы задать свой.
- Проверьте полученные размеры для каждого уровня заголовка.
- Скопируйте CSS-переменные и правила в таблицу стилей.
Часто задаваемые вопросы
Какой коэффициент выбрать?
1,125 и 1,2 дают тонкую шкалу; 1,333 и 1,618 создают более яркий контраст. Для большинства сайтов используйте от 1,2 до 1,25.
Почему предпросмотр H1 ограничен?
Очень большие размеры ограничены только в предпросмотре; CSS-результат сохраняет точное вычисленное значение.
Можно ли использовать с единицами rem?
Да. Разделите пиксельные значения на базовый размер шрифта или замените px на rem в полученном CSS.