Руководство по использованию инструмента

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Категория: Design
Типы ввода: number, text
Тип вывода: json
Покрытие примерами: 4
API доступен: Да

Обзор

Этот онлайн-калькулятор позволяет мгновенно рассчитать CSS-функцию clamp() для создания адаптивной типографики. На основе заданных размеров шрифта и ширины экрана (viewport) инструмент вычисляет оптимальный наклон в vw и смещение в rem, генерируя готовый код для плавного масштабирования текста без использования медиа-запросов.

Когда использовать

При верстке адаптивных сайтов, когда нужно плавно масштабировать заголовки и текст между мобильной и десктопной версиями.
При создании дизайн-систем с гибкой типографикой, чтобы избежать написания множества медиа-запросов @media.
Для точного расчета математических параметров функции clamp() на основе пиксельных макетов из Figma.

Как это работает

1Укажите минимальную и максимальную ширину экрана (viewport) в пикселях.
2Задайте желаемые минимальный и максимальный размеры шрифта, а также базовый размер шрифта (root font size) для перевода в rem.
3Калькулятор автоматически рассчитает наклон (slope) и смещение (intercept) и сгенерирует готовое выражение clamp().

Сценарии использования

Плавное масштабирование крупных заголовков (h1, h2) на посадочных страницах.
Настройка адаптивного основного текста для блогов и новостных порталов.
Оптимизация отступов и размеров элементов в адаптивных карточках товаров.

Примеры

1. Адаптивный заголовок для лендинга

Фронтенд-разработчик

Контекст

Разработчик верстает главный экран лендинга. Заголовок должен быть 24px на мобильных экранах (360px) и плавно увеличиваться до 48px на мониторах (1920px).

Проблема

Необходимо вручную рассчитать формулу для clamp(), чтобы избежать резких скачков размера шрифта.

Как использовать

Ввести minViewportPx = 360, maxViewportPx = 1920, minFontPx = 24, maxFontPx = 48, rootFontPx = 16.

minViewportPx: 360, maxViewportPx: 1920, minFontPx: 24, maxFontPx: 48, rootFontPx: 16

Результат

Получено выражение clamp(1.5rem, 1.1538rem + 1.5385vw, 3rem), готовое для вставки в CSS-файл.

2. Адаптивный текст для мобильного приложения

UI/UX дизайнер

Контекст

Дизайнер готовит спецификацию для верстки текстового блока, который должен масштабироваться от 14px (на экранах 320px) до 18px (на экранах 1200px).

Проблема

Требуется быстро получить точную CSS-строку для разработчиков без ручных вычислений.

Как использовать

Ввести minViewportPx = 320, maxViewportPx = 1200, minFontPx = 14, maxFontPx = 18, rootFontPx = 16.

FAQ

Что делает этот калькулятор?

Он рассчитывает выражение clamp() для CSS, которое плавно изменяет размер шрифта в зависимости от ширины экрана.

Зачем указывать базовый размер шрифта (Root Font Size)?

Он необходим для корректного перевода пикселей (px) в относительные единицы (rem), что важно для доступности интерфейса.

Можно ли использовать полученный clamp() для других свойств, кроме font-size?

Да, сгенерированное выражение подходит для любых CSS-свойств, поддерживающих плавное изменение, например padding или margin.

Что происходит за пределами указанных границ viewport?

Функция clamp() ограничивает размер шрифта: он не станет меньше минимального значения на экранах меньше minViewport и не превысит максимум на экранах больше maxViewport.

Нужны ли медиа-запросы при использовании clamp()?

Нет, функция clamp() автоматически и плавно масштабирует текст в реальном времени без использования @media.

minViewportPx: 320, maxViewportPx: 1200, minFontPx: 14, maxFontPx: 18, rootFontPx: 16

Калькулятор clamp для fluid typography CSS

С чем помогает этот инструмент

Запустить этот инструмент

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Адаптивный заголовок для лендинга

2. Адаптивный текст для мобильного приложения

FAQ

Подготовка и проверка многоязычной веб-типографики

Работа с CSS: вёрстка и каскад

Примеры CSS-фреймворка Bulma

Примеры CSS Фреймворка Milligram

Примеры CSS-селекторов

Примеры Tailwind CSS

Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings

Генератор меток синхронного чтения

Генератор llms.txt / аудит ИИ-краулеров

Генератор JSON-LD из CSV