Z-pattern or F-pattern, which reading flow fits which kind of page?

The Z-pattern fits sparse, visual pages and the F-pattern fits text-dense ones, because the flow follows the content’s density rather than any preference of yours. When a page holds only a few elements with lots of open space, the eye sweeps across the top, cuts diagonally down, and sweeps across the bottom, tracing a Z, because there is little to stop it and it travels freely. When a page is packed with text, the eye scans down the left edge sampling the start of each line and reading across only where something catches it, tracing an F. Neither is the correct way people read in general. Each is the shape the eye naturally falls into given a particular density, so you do not impose a pattern, you match the layout to the scan the content already invites.

The reasoning is that reading behavior is a response to how much there is to process. On a sparse page the eye has no dense block to anchor on, so it ranges across the available elements in broad strokes, and the Z is just the path of least resistance through a few well-spaced anchors. On a dense page the eye cannot read everything, so it economizes, running down the left where every line begins and committing to full reads only selectively, and the F is the trace of that triage. The common advice to design everything to the F-pattern because that is how people read overgeneralizes one of these responses into a universal law. It holds for text-heavy pages and quietly fails on visual ones, where forcing an F-shaped layout onto sparse content fights the sweep the emptiness already produces.

Two pages make the sort concrete. A landing page with a big headline, a hero image, a short supporting line, and a single button is sparse and visual, so it suits a Z, put the logo top-left, a secondary action top-right, let the eye fall diagonally through the headline and image, and land the button at the bottom-right where the Z ends. A documentation page, a long article, or a dense product listing is the opposite, it is text-heavy, so it suits an F, keep the most important words at the starts of lines and near the top-left, front-load headings and link text, and accept that the eye will scan down the left and dip in selectively rather than read every word in order. Designing the docs page to a Z would scatter its structure, and designing the landing page to an F would ignore how little there is to scan.

The edge case is the hybrid page that shifts density as it scrolls, like a marketing page that opens sparse and visual then moves into a dense feature explanation. The honest read is that the pattern can change down the page, the visual top invites a Z and the textual middle invites an F, so you design each region to the scan its own density produces rather than picking one pattern for the whole page. The mistake is treating either pattern as a layout to apply, when both are descriptions of behavior that follow from content. Density leads, the pattern follows, section by section if the density changes.

When you lay out a page, read its density first and let that pick the pattern. If the content is sparse and visual, design to the Z, anchor the corners and place the key action where the diagonal ends. If it is text-dense, design to the F, front-load the left edge and the tops of blocks with what matters most. And where a page changes density as it scrolls, switch patterns with it. Match the layout to the scan the content’s density already invites, instead of bending every page to a single pattern.