Типографическая шкала и плавный шрифт (clamp)
Выберите базовый размер и пропорцию для смартфона и для компьютера. Инструмент создаёт размеры от h1 до мелкого текста с clamp(), чтобы шрифт плавно рос между двумя экранами.
Как пользоватьсяРазмеры шрифта в гармонии
Доступно на: 
Типографическая шкала и плавный шрифт (clamp): для чего нужен
Выберите базовый размер и пропорцию (от малой секунды до золотого сечения) для смартфона и для компьютера, а также ширины экрана для каждого. Инструмент вычисляет размеры h1, h2, h3, h4, h5, текста и мелкого текста для обоих экранов и собирает clamp() для каждого в rem.
Предпросмотр показывает ваш текст в каждом размере, для смартфона или компьютера, а CSS выводится с готовыми переменными.
Как пользоваться
- Выберите базу и пропорцию для смартфона и компьютера.
- Проверьте предпросмотр каждого уровня.
- Скопируйте CSS-переменные.
Когда использовать
- Задать размеры шрифта нового сайта.
- Заголовки, подстраивающиеся под смартфон без media queries.
- Создать типографику для дизайн-системы.
Частые вопросы
Что такое типографическая шкала?
Это последовательность размеров, в которой каждый следующий равен предыдущему, умноженному на одну и ту же пропорцию, например 1,25 (большая терция). Заголовки получаются пропорциональными друг другу, и сайт выглядит более упорядоченным, чем при случайно выбранных размерах.
Как работает clamp()?
clamp(минимум, предпочтительное, максимум) позволяет шрифту расти вместе с шириной экрана (предпочтительное значение использует vw), не выходя за пределы. Благодаря этому у заголовка один размер на смартфоне и другой на компьютере, без media queries.
Почему использовать rem?
В rem размеры учитывают настройку размера шрифта в браузере пользователя, что важно для тех, кто увеличивает буквы для удобства чтения. Инструмент использует 1rem = 16px.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.