Калькулятор плавного размера шрифта

Определите переход размера

1. Введите меньшую и большую ширину окна просмотра в CSS-пикселях с разницей не менее 100px и размер шрифта для каждой ширины. Размер может увеличиваться, уменьшаться или оставаться постоянным. Укажите предполагаемый размер корня в CSS-пикселях на rem.
2. Проверьте CSS и таблицу. Измените проверочную ширину, чтобы посмотреть другой результат модели: она меняет образец, но не скопированный CSS. Карточка не является окном просмотра.
3. Скопируйте CSS и проверьте его на некорневом элементе целевой страницы. Важны её фактический размер корня, ширина окна, шрифт и масштабирование. Если доступ к буферу обмена запрещён, выделите тот же CSS и скопируйте вручную.

Поймите выражение

Калькулятор делит разницу размеров шрифта на разницу ширин окна и получает наклон. Умножив его на 100, он получает коэффициент vw; смещение и числовые границы переводятся в rem с учётом предполагаемого размера корня.

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

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

Размер корня — предположение для перевода единиц. Другой размер корня на целевой странице меняет границы шрифта и ширины перехода. rem относится к корню документа, vw — к окну просмотра; изменение ширины или шрифта обычного div не имитирует их.

Примеры увеличения, убывания и округления

По умолчанию заданы 16px при ширине окна 320px и 32px при 1600px, с корнем 16px. Результат: clamp(1rem, calc(0.75rem + 1.25vw), 2rem); модель даёт ровно 24px при ширине 960px.

Если поменять размеры шрифта местами, получится clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Границы остаются упорядоченными по величине. Значения 20px на обеих ширинах дают font-size: 1.25rem; при том же размере корня.

Для 17px при 360px и 23px при 1280px округлённые до шести знаков коэффициенты дают 17,0000024px на первой ширине и 20,0000028px в середине. Таблица округляет эти результаты и не утверждает, что попадание в конечные значения точно.

Авторские права и ограничения модели

Ширина окна — целое число от 240 до 3840 CSS-пикселей; разница ширин должна быть не менее 100px. Размер шрифта — от 1 до 256 CSS-пикселей, корня — от 8 до 32 CSS-пикселей на rem, не более двух знаков после запятой. Знаки, единицы в полях, разделители групп, экспоненты и лишние знаки не исправляются автоматически.

Инструмент создаёт одно объявление font-size для некорневого элемента с rem и vw. Он не импортирует произвольный CSS, не строит шкалу размеров, не использует единицы контейнера, не загружает шрифты и не меняет корневые стили. Граница ошибки относится к арифметической модели, а не к растеризации браузера.

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

Сочетание rem и единиц окна само по себе не доказывает доступность изменения размера текста. Проверьте целевую страницу с настройками текста и масштаба браузера. Инструмент не гарантирует соответствие WCAG, точное совпадение пикселей или удвоение размера при масштабе 200%.

Локальное числовое создание без сохраненных настроек

Инструмент не добавляет загрузку значений, запросы удалённых шрифтов, сохранение черновиков, ссылки с настройками или телеметрию с вашими данными. Копирование выполняется по запросу. Существующие сервисы сайта, расширения и сохранённые вами копии не охватываются универсальной гарантией конфиденциальности или удаления.