Fluid Typography and Responsive Spacing
Fluid design allows dimensions to change smoothly as the available viewport changes. CSS clamp() is particularly useful for typography and spacing because it defines a minimum, preferred value, and maximum.
Sass can calculate fixed design tokens or generate reusable CSS expressions. The browser evaluates viewport-dependent expressions at runtime.
Fluid values should be tested across a range of viewport sizes. Excessively aggressive scaling can make text difficult to read or produce layouts that look unbalanced on intermediate screens.
Fluid Heading and Section Spacing
.hero-title {
font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
line-height: 1.1;
max-width: 16ch;
}
.section {
padding-block: clamp(2rem, 5vw, 5rem);
padding-inline: clamp(1rem, 3vw, 2.5rem);
}💡 The preferred font size and spacing scale with viewport width but cannot fall below their minimums or exceed their maximums.
The
ch unit provides a width based on the advance measure of the 0 glyph in the current font. It can help control line length, although it does not guarantee an exact number of words per line.Knowledge Check
What does the third argument in `clamp(minimum, preferred, maximum)` represent?