The problem: You design a headline that looks great on a 1080×1920 vertical story. Now it needs to work on a 468×60 display banner, a dashboard widget, and an Ultra HD 8K narrowcasting screen — all from the same template. Viewport units like vw and vmin can't help — they reference the browser window, not the container the text lives in.
The solution: Use cqmin — a CSS unit equal to 1% of the container's smallest dimension. It adapts to any aspect ratio: wide banners, tall stories, square widgets, massive digital signage. Wrap it in max() to guarantee a readable minimum. No upper cap, no JavaScript, one formula.
↓ Drag the handles below to resize each panel and see the formula in action across different sizes and aspect ratios.
font-size scales with the smallest container dimension
Vanilla CSS
.container {
container-type: size;
}
.title {
font-size: max(12px, 8cqmin);
}
.text {
font-size: max(10px, 3.5cqmin);
}Tailwind CSS
<div style="container-type: size">
<h1 class="text-[max(12px,8cqmin)]">
Title
</h1>
<p class="text-[max(10px,3.5cqmin)]">
Body text
</p>
</div>font-size scales with the smallest container dimension
Vanilla CSS
.container {
container-type: size;
}
.title {
font-size: max(12px, 8cqmin);
}
.text {
font-size: max(10px, 3.5cqmin);
}Tailwind CSS
<div style="container-type: size">
<h1 class="text-[max(12px,8cqmin)]">
Title
</h1>
<p class="text-[max(10px,3.5cqmin)]">
Body text
</p>
</div>font-size scales with the smallest container dimension
Vanilla CSS
.container {
container-type: size;
}
.title {
font-size: max(12px, 8cqmin);
}
.text {
font-size: max(10px, 3.5cqmin);
}Tailwind CSS
<div style="container-type: size">
<h1 class="text-[max(12px,8cqmin)]">
Title
</h1>
<p class="text-[max(10px,3.5cqmin)]">
Body text
</p>
</div>