تابع clamp(min, ideal, max) سه مقدار می‌گیرد و همیشه مقداری بین حداقل و حداکثر برمی‌گرداند. برای فونت‌های سیال ایدهٔ ایده‌آل است.

نمونهٔ ساده

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}

.container {
  padding-inline: clamp(1rem, 4vw, 3rem);
}

در این مثال عنوان هیچ‌وقت از ۱٫۷۵ رِم کوچک‌تر و از ۳ رِم بزرگ‌تر نمی‌شود و بین این دو با عرض صفحه رشد می‌کند.

دو نکتهٔ مهم

  • در مقدار میانی حتماً یک جزء ثابت (مثلاً 1.2rem) با vw ترکیب کنید تا با زوم مرورگر هم اندازه تغییر کند و دسترس‌پذیری حفظ شود.
  • برای محاسبهٔ دقیق‌تر می‌توان از ابزارهای آنلاین ساخت کلمپ استفاده کرد؛ اما همیشه نتیجه را در عرض‌های موبایل و دسکتاپ بسنجید.

همین الگو برای فاصله‌ها (gap, margin) و عرض‌ها هم کار می‌کند و بسیاری از media queryهای تکراری را حذف می‌کند.