# Калькулятор clamp для fluid typography CSS Введите границы viewport и шрифта, чтобы получить clamp(), готовый CSS и данные превью > Каноническая страница: https://elysiatools.com/ru/tools/css-fluid-typography-clamp-calc - **Категория:** Design - **Ключевые слова:** css, clamp, fluid typography ## Обзор Считает наклон vw и смещение для fluid typography и возвращает clamp() и HTML-превью. ## Входные данные - **Минимальный viewport** (number) - **Максимальный viewport** (number) - **Минимальный размер шрифта** (number) - **Максимальный размер шрифта** (number) - **Базовый размер шрифта** (number) - **Текст превью** (text) ## Когда использовать - При верстке адаптивных сайтов, когда нужно плавно масштабировать заголовки и текст между мобильной и десктопной версиями. - При создании дизайн-систем с гибкой типографикой, чтобы избежать написания множества медиа-запросов @media. - Для точного расчета математических параметров функции clamp() на основе пиксельных макетов из Figma. ## Как это работает - Укажите минимальную и максимальную ширину экрана (viewport) в пикселях. - Задайте желаемые минимальный и максимальный размеры шрифта, а также базовый размер шрифта (root font size) для перевода в rem. - Калькулятор автоматически рассчитает наклон (slope) и смещение (intercept) и сгенерирует готовое выражение clamp(). ## Сценарии использования - Плавное масштабирование крупных заголовков (h1, h2) на посадочных страницах. - Настройка адаптивного основного текста для блогов и новостных порталов. - Оптимизация отступов и размеров элементов в адаптивных карточках товаров. ## Частые вопросы ### Что делает этот калькулятор? Он рассчитывает выражение clamp() для CSS, которое плавно изменяет размер шрифта в зависимости от ширины экрана. ### Зачем указывать базовый размер шрифта (Root Font Size)? Он необходим для корректного перевода пикселей (px) в относительные единицы (rem), что важно для доступности интерфейса. ### Можно ли использовать полученный clamp() для других свойств, кроме font-size? Да, сгенерированное выражение подходит для любых CSS-свойств, поддерживающих плавное изменение, например padding или margin. ### Что происходит за пределами указанных границ viewport? Функция clamp() ограничивает размер шрифта: он не станет меньше минимального значения на экранах меньше minViewport и не превысит максимум на экранах больше maxViewport. ### Нужны ли медиа-запросы при использовании clamp()? Нет, функция clamp() автоматически и плавно масштабирует текст в реальном времени без использования @media. ## Связанные инструменты - [Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings](https://elysiatools.com/ru/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Загрузите вариативный шрифт (TTF/OTF/WOFF/WOFF2), чтобы изучить оси fvar и именованные экземпляры, посмотреть интерполяцию прямо в браузере и получить готовый CSS font-variation-settings, эквивалентные высокоуровневые свойства и блок @font-face. - [Генератор меток синхронного чтения](https://elysiatools.com/ru/tools/audio-read-along-cue-generator): Создаёт метки на уровне предложений или слов с таймстампами из аудио закадровки и сценария. - [Генератор llms.txt / аудит ИИ-краулеров](https://elysiatools.com/ru/tools/llms-txt-and-ai-crawler-audit): Генерирует llms.txt (формат llmstxt.org v2: H1, краткая цитата, списки H2) из живого обхода или вставленного перечня страниц и аудирует политику robots.txt для GPTBot, ClaudeBot, PerplexityBot и Bytespider по алгоритму RFC 9309 — с превью allow/block и готовыми директивами. - [Генератор JSON-LD из CSV](https://elysiatools.com/ru/tools/json-ld-generator-from-csv): Преобразует строки CSV или Excel в Schema.org JSON-LD для Article, Product или Event с результатом, готовым к SEO-проверке - [Пакетный генератор кодов](https://elysiatools.com/ru/tools/barcode-batch-generator): Пакетно создает Code 128, EAN-13, UPC-A, ITF-14, QR Code и Data Matrix из CSV или многострочного текста с экспортом в PNG ZIP или PDF - [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную. - [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков - [Генератор арт-QR-кодов со стилизованными модулями и вставкой логотипа](https://elysiatools.com/ru/tools/qr-code-art-styled-module-and-logo-embed-generator): Создаёт арт-QR с фирменными цветами, градиентами, скруглёнными или точечными модулями и центральным логотипом, с разбором ISO-штрафов маски, метаданными по модулям и вердиктом по стираниям Рида–Соломона. ## Примеры - [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS - [Примеры CSS Фреймворка Milligram](https://elysiatools.com/ru/samples/milligram): Примеры CSS фреймворка Milligram, включая типографику, формы, сетки и компоненты - [Примеры CSS-селекторов](https://elysiatools.com/ru/samples/css-selectors): Коллекция примеров CSS-селекторов для тестирования извлечения и анализа - [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией ## Связанные материалы - [Работа с CSS: вёрстка и каскад](https://elysiatools.com/ru/hubs/css-authoring-layout-and-cascade-workflows): Создавайте и проверяйте CSS: форматирование, диагностика селекторов, адаптивные фрагменты, визуальные эффекты и рендер-проверки.