# Body Text Never Touches the Viewport Edge **MUST** · **ID:** `layout-impeccable-body-text-viewport-edge` · **Category:** layout **Source:** [impeccable](https://impeccable.style/) **Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-impeccable-body-text-viewport-edge > MUST: Never let a paragraph or list item land within 16px of the left or right viewport edge — give the wrapping container at least 16px (ideally 24–32px) of horizontal padding, or a `max-width` plus `mx-auto` once there is room for one. Give body copy a gutter — never let paragraphs bleed flush against the left or right edge of the screen This is distinct from cramped padding: there the container exists and is too tight, here the container is missing entirely. The detector flags a

or

  • with more than 40 characters of text, wider than 50% of the viewport, whose left edge sits less than 16px from the viewport edge (or whose right edge is within 16px of the far side). Text that runs into the physical edge of the screen has no margin for the eye to return to on each line wrap, and on a phone it collides with the rounded corners and the palm holding the device. The fix is at least 16px — ideally 24–32px — of horizontal padding on a wrapping container, or a max-width plus mx-auto once there is room for one. ## Bad — do not do this `layout-impeccable-body-text-viewport-edge-bad` ```tsx /** * Bad: the article is rendered straight into the (simulated) mobile viewport * with no wrapping container, so every paragraph runs flush into both edges. * The detector fires: a

    over 40 characters, wider than 50% of the viewport, * with its left edge less than 16px from the viewport edge. Gutter: 0px. */ export function ImpeccableBodyTextViewportEdgeBad() { return (

    {/* Simulated phone viewport */}
    viewport — 280px
    {/* No horizontal padding anywhere: text meets glass */}

    Shipping the redesign

    We rebuilt the dashboard around a single column so the primary action is always the first thing you reach, on any screen size.

    Every line of this paragraph starts and ends against the edge of the screen, which is exactly where a thumb and a rounded corner already live.

    0px gutter. The paragraphs bleed to both edges — the eye has no margin to return to on each wrap, and on a real phone the text collides with the rounded corners and the hand holding the device.

    ); } ``` ## Good — do this `layout-impeccable-body-text-viewport-edge-good` ```tsx /** * Good: the same article inside a container that supplies a 24px horizontal * gutter (well past the 16px floor) and a max-width with mx-auto, so the * measure stays readable once the viewport grows past the text column. */ export function ImpeccableBodyTextViewportEdgeGood() { return (
    {/* Same simulated phone viewport */}
    viewport — 280px
    {/* px-6 = 24px gutter, plus a max-width + mx-auto for wider screens */}

    Shipping the redesign

    We rebuilt the dashboard around a single column so the primary action is always the first thing you reach, on any screen size.

    Every line of this paragraph has room to breathe on both sides, so the eye lands cleanly at the start of the next one.

    24px gutter on both sides — past the 16px floor, inside the 24–32px sweet spot — plus max-width and mx-auto so the measure holds when the viewport gets wider.

    ); } ``` ## References - [impeccable.style](https://impeccable.style/) - [MDN — max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/max-width) - [Practical Typography — line length](https://practicaltypography.com/line-length.html)