CSS units and functions: size against the right reference

How the rule works

An intake form needs readable text and a panel that can fill a narrow screen without becoming enormous on a wide one. Give the panel a maximum inline size and allow its actual width to be smaller. Clamp the title between two readable bounds; do not use a viewport-only font size that shrinks the title below a usable level. A percentage height often fails to behave as expected when the containing block's height is indefinite. Identify the reference dimension first. Logical inline sizing also keeps the rule useful when the writing mode changes.

.intake-panel { inline-size: min(100%, 42rem); margin-inline: auto; }
.intake-panel h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); }
.intake-panel p { max-inline-size: 68ch; line-height: 1.55; }

Cost and verification

These calculations are cheap compared with fetching fonts or images. The real cost is a layout that only looks right at one root font size. Test at narrow viewports, 200% browser zoom, and larger user text. The ch unit is an approximate text measure based on font metrics, not an exact character count. If a fixed rem maximum clips translated words, allow wrapping and inspect the actual content rather than raising every cap blindly.

Common Mistakes

• Do not assume every percentage resolves against the viewport.
• Do not make type depend only on vw.
• Do not use a fixed height for content that can grow.

Connected lessons

• CSS Foundations
• Responsive CSS: keep reading order and controls usable
• CSS clamp for type: grow headings within readable bounds
• CSS logical properties: space content by reading direction