Как пользоваться: Генератор типографической шкалы
- Задайте базовый размер (обычно 16 px, размер основного текста) и коэффициент: чем он больше, тем сильнее контраст между заголовками.
- Выберите количество шагов вниз (мелкий текст, подписи) и вверх (от h4 до h1, крупный дисплейный текст).
- Включите Fluid, чтобы на телефонах использовался меньший базовый размер и коэффициент, которые растут до шкалы для десктопа. Перетащите ползунок ширины экрана для предпросмотра.
- Скопируйте CSS-переменные, конфиг
fontSizeдля Tailwind или SCSS-карту.
Что такое модульная шкала
Типографическая шкала умножает базовый размер на один и тот же коэффициент на каждом шаге: при 16 px и 1.25 шаги составляют 16, 20, 25, 31.25, 39 px… Размеры с одним коэффициентом выглядят согласованно, поэтому типографы заимствовали соотношения из музыки: большую терцию (1.25), чистую кварту (1.333), чистую квинту (1.5) и золотое сечение (1.618).
- Малые коэффициенты (1.125–1.2) подходят для плотных интерфейсов, дашбордов и длинного чтения.
- Большие коэффициенты (1.333–1.618) подходят для маркетинговых страниц с крупными, уверенными заголовками.
Адаптивная типографика с clamp()
Заголовок, который идеально смотрится на десктопе, часто слишком велик на телефоне. Адаптивные шаги интерполируют между шкалой для мобильных и шкалой для десктопа: font-size: clamp(1.5rem, 1.28rem + 0.98vw, 2.44rem) остаётся минимальным на маленьких экранах, линейно растёт вместе с шириной окна и останавливается на максимуме. Значения заданы в rem, поэтому они учитывают настройку размера шрифта в браузере посетителя. Для одиночных значений см. калькулятор clamp(), а для перевода единиц используйте PX в REM.
Также ищут как: clamp font size generator, tailwind размеры шрифтов.
Инструменты, которые хорошо сочетаются с Генератор типографической шкалы
- CSS Grid генератор — Задайте колонки, строки и отступы, затем выделите ячейки, чтобы создать области вроде header, sidebar и main.
- Генератор CSS Flexbox — Смотрите, что делает каждое свойство flexbox: задавайте направление, перенос, justify-content, align-items и gap, добавляйте или удаляйте элементы, а также нажмите на любой элемент, чтобы настроить его flex-grow, shrink, basis, order и align-self.
- Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
- Проверка контраста — Введите цвет текста и фона, чтобы получить точный коэффициент контраста WCAG, результат проверки для каждого уровня, оценку APCA и исправления в один клик с сохранением оттенка.