Typography adapts to container
Fluid type that responds to container width using container-type and cqw — no media queries.
Container-aware Headline
This text scales smoothly as the container changes width. No breakpoints needed.
Container-aware Headline
This text scales smoothly as the container changes width. No breakpoints needed.
Quick implementation
/* HTML: <div class="container"><h2>Headline</h2><p>Content</p></div> */
.container {
/* Declare this as a container for inline-size */
container-type: inline-size;
}
.heading {
/* Scales from 1rem to 1.5rem based on container width */
font-size: clamp(1rem, 3.5cqw, 1.5rem);
line-height: 1.2;
}
.text {
/* Scales from 0.875rem to 1rem based on container width */
font-size: clamp(0.875rem, 2cqw, 1rem);
line-height: 1.5;
}Prompt this to your LLM
Crafted prompt — includes role, intent, constraints, framework variant, and edge cases.
You are a senior frontend engineer specializing in modern CSS.
Goal: Create a component with typography that scales fluidly based on its container width — no media queries.
Technical constraints:
- Use container-type: inline-size to declare a sizing container.
- Use cqw (container query width) units in font-size values.
- Wrap font-size in clamp() with min, preferred (cqw-based), and max values.
- Use oklch() for all colors instead of rgba() or hex.
- Ensure readable line-height (1.2 for headings, 1.5 for body).
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept children, className, and an optional size variant prop ("small", "medium", "large").
Edge cases to handle:
- What happens if container-type is not supported? Provide a fallback using viewport units (vw) or rem.
- Handle very small containers where text might become too tiny (set a sensible minimum in clamp()).
- Mention accessibility: ensure minimum readable sizes for users with visual impairments.
Return the HTML structure and CSS, clearly separated.Why this matters in 2026
Container queries have matured from experimental to essential. Instead of tying typography to viewport breakpoints with media queries, you can now tie it directly to the component's container. This means a card's type adapts whether it lives in a sidebar, main content area, or modal — no duplicate rules, no global overrides.
Combine container-type: inline-size with cqw units and clamp() and you get truly fluid typography that scales smoothly across all container widths. The entire system becomes composable and reusable.
The logic
container-type: inline-size tells the browser to treat this element as a container whose inline size (width in LTR) can be queried. Child elements can then use cqw (container query width) units to size themselves relative to that container.
clamp(min, preferred, max) creates smooth scaling. For example, clamp(1rem, 3.5cqw, 1.5rem) means: never go below 1rem, try to use 3.5% of the container width, but cap it at 1.5rem. The result is type that grows with the container but stays readable at both extremes.
cqw is relative to the nearest ancestor container, not the viewport. This is why container queries feel so modular — each component manages its own responsiveness.Accessibility & performance
Always set minimum sizes in your clamp() values to ensure text remains legible on very small containers. For users with visual impairments, consider a minimum of at least 0.875rem for body text and 1rem for headings.
Container queries are GPU-accelerated and don't trigger layout recalculation when the container changes — they're more efficient than media queries for component-level responsiveness. No JavaScript required, making this a performant, no-JS-friendly solution.