9261 shaares
226 private links
226 private links
A text with a dynamic size depending of the container width:
.container {
container-type: inline-size;
}
.fluid-type {
font-size: clamp(1rem, 4cqi, 3rem);
}
Strategy 2: Grow From a Base Font Size with calc()
font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi));
An upper-bound size can be set with min
if needed.
Strategy 3: Generate Styles Using a Type Scale Ratio