Генератор плавної шкали типорозмірів
Обчисліть справжнє плавне значення CSS clamp() за мінімальним і максимальним розмірами для двох ширин вікна перегляду з покроковим показом кутового коефіцієнта, перетину та живим попереднім переглядом зі зміною розміру.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває калькулятор одразу в режимі шкали типорозмірів із базовим розміром 16px і коефіцієнтом 1,25 (велика терція) — надійна, широко використовувана відправна точка для типографічної шкали. Лише з цих двох чисел генерується шість розмірів: small, base, h4, h3, h2 і h1, кожен з яких є власним плавним значенням clamp(), а не одним фіксованим розміром.
Кожен крок зберігає базовий розмір прив’язаним до однакового значення як на мобільному, так і на десктопному кінці, тоді як заголовки масштабуються агресивніше на ширшому десктопному вікні, ніж на вузькому мобільному — та сама ідея, що й вибір м’якшого коефіцієнта для малих екранів і сміливішого для великих, виведена автоматично з одного обраного вами коефіцієнта.
Зміна коефіцієнта на 1,125, 1,2, 1,333 або 1,5 миттєво перегенеровує всю таблицю, а кнопка внизу копіює всі шість значень clamp() як готовий до вставки блок CSS-змінних, на який посилається решта таблиці стилів.