Responsive Content Fit Lab

The browser renders this exact card at each tested width using Poppins headings and Mulish body text. The container has a fixed 16 px gutter on each side; card padding and width limits are additional. The preview may be scaled for display, but measurements always use the full configured width. Check at 100% scale to judge reading size.

Overflow is measured from rendered element and scroll widths with a 2 px rounding tolerance. Text lines and action rows come from their rendered positions. A “ch” is the width of the zero character in the configured body font; the paragraph metric is its widest rendered line in those units, not a literal character count.

Comfort flags are specific to this experiment: at least 4 heading lines or more than twice the 1440 px line count, an action label wrapping, actions moving to another row (unless stacking is intentional), a paragraph line over 80 ch, inner width below 220 px, or more than 18 paragraph lines. These are inspection prompts, not accessibility or universal design rules. The five sampled widths do not establish an exact transition point.

Plain text only. Content stays in memory in this tab; nothing is uploaded or automatically saved. This is a single card experiment, so production fonts, styles, surrounding components, browser zoom, and content can change the result.