Калькулятор адаптивной типографики для сайта

Калькулятор адаптивной типографики создаёт согласованную систему размеров для основного текста, подписей и заголовков H1–H6. Размеры плавно изменяются между минимальной и максимальной шириной экрана, а готовый CSS использует функцию clamp().

Что рассчитывает инструмент

Вместо отдельного подбора каждого заголовка калькулятор строит модульную типографическую шкалу. Основой служит размер обычного текста, а каждый следующий уровень умножается на выбранный коэффициент. Для мобильного и широкого экрана можно использовать разные коэффициенты.

• размеры H1, H2, H3, H4, H5 и H6;
• размер основного текста;
• размер подписей и вспомогательного текста;
• плавное изменение между двумя ширинами viewport;
• CSS-переменные и готовые правила для HTML-тегов;
• результат в px или rem.

Как пользоваться калькулятором

1. Выберите компактную, сбалансированную или выразительную шкалу.
2. Укажите размер основного текста на узком и широком экране.
3. Задайте коэффициенты типографической шкалы.
4. Введите минимальную и максимальную ширину viewport.
5. Выберите единицы CSS и нажмите «Рассчитать типографику».
6. Проверьте результат в интерактивном предпросмотре и скопируйте CSS-код.

Что такое модульная типографическая шкала

Модульная шкала — это последовательность размеров, связанных постоянным коэффициентом. Если основной текст равен 16 px, а коэффициент составляет 1.2, следующий уровень будет иметь размер 19.2 px, затем 23.04 px и так далее.

следующий размер = предыдущий размер × коэффициент

Такая система создаёт предсказуемую визуальную иерархию. Заголовки отличаются друг от друга достаточно заметно, но не выглядят случайным набором значений.

Почему коэффициенты меняются между экранами

На телефоне крупные различия между уровнями быстро приводят к слишком большим заголовкам и неудобным переносам. На широком экране пространства больше, поэтому шкалу можно сделать выразительнее. Например, использовать коэффициент 1.15 на мобильном устройстве и 1.25 на компьютере.

Как работает плавное изменение шрифта

Для каждого стиля калькулятор определяет минимальный и максимальный размер, а затем строит линейную формулу с единицей vw. Функция clamp() ограничивает результат:

font-size: clamp(минимум, адаптивное значение, максимум);

На экранах уже минимальной контрольной точки используется минимум. Между контрольными точками размер изменяется плавно. После максимальной ширины рост прекращается.

Пример адаптивной шкалы

Для сбалансированного пресета основной текст меняется от 16 до 20 px. Коэффициент шкалы увеличивается от 1.15 до 1.25. В результате H1 остаётся достаточно компактным на телефоне, но становится заметно крупнее на настольном экране.

Калькулятор создаёт переменные следующего вида:

:root {
  --font-h1: clamp(...);
  --font-h2: clamp(...);
  --font-h3: clamp(...);
  --font-body: clamp(...);
  --font-small: clamp(...);
}

После этого переменные можно применять к тегам или CSS-классам во всём проекте.

Как выбрать размер основного текста

Для большинства сайтов разумной отправной точкой служат 16 px на мобильном экране. На больших экранах основной текст можно оставить таким же либо плавно увеличить до 18–20 px. Итоговое значение зависит от гарнитуры, длины строки, аудитории и назначения интерфейса.

Высота строчной буквы и визуальный размер отличаются у разных шрифтов, поэтому одинаковые 16 px могут восприниматься по-разному. Результат следует проверять с реальной гарнитурой и настоящим контентом.

Выбор коэффициента шкалы

• 1.1–1.15 — компактные интерфейсы, панели и приложения;
• 1.15–1.25 — универсальные сайты, статьи и блоги;
• 1.25–1.333 — лендинги и выразительные промостраницы;
• выше 1.333 — сильный контраст, требующий осторожной проверки переносов.

Использовать px или rem

Пиксели дают прямые и понятные значения. Единица rem связана с размером шрифта корневого элемента и лучше вписывается в масштабируемую систему. При выводе в rem калькулятор переводит минимальные, максимальные и постоянные части формулы по указанному корневому размеру.

Размер шрифта и длина строки

Увеличение текста само по себе не гарантирует читаемость. Для основного контента также важна ширина строки. Слишком длинные строки затрудняют переход к следующей, а слишком короткие создают много переносов. Часто текстовую колонку ограничивают примерно 60–75 символами в строке.

Высота строки и интервалы

Для основного текста обычно требуется более свободная высота строки, чем для крупных заголовков. В качестве отправной точки можно использовать line-height: 1.5 для абзацев и 1.1–1.25 для заголовков. Конкретные значения зависят от шрифта и размера.

Частые ошибки адаптивной типографики

• слишком крупный H1 на небольшом экране;
• почти одинаковые размеры соседних заголовков;
• неограниченный рост значения в vw;
• слишком маленький основной текст ради размещения большего количества контента;
• проверка только на минимальной и максимальной ширине;
• игнорирование длинных слов и заголовков;
• использование размеров без проверки реального шрифта.

Ответы на частые вопросы

Чем этот калькулятор отличается от генератора одного clamp()?

Он рассчитывает не одно CSS-свойство, а целую связанную систему H1–H6, основного и малого текста на основе модульной шкалы.

Нужны ли медиазапросы?

Для плавного изменения размеров обычно достаточно clamp(). Медиазапросы могут понадобиться, если на определённой ширине меняется не только размер, но и сама композиция страницы.

Можно ли использовать одинаковый коэффициент на всех экранах?

Да. Укажите одинаковое значение в обоих полях. Размеры всё равно смогут плавно меняться за счёт изменения базового текста.

Почему H1 получается слишком большим?

Уменьшите коэффициент максимальной шкалы или основной размер текста. Особенно внимательно проверяйте длинные заголовки на промежуточных ширинах.