visual design
F-pattern and Z-pattern
What are the F-pattern and Z-pattern in how people read screens?
The F-pattern and Z-pattern describe the rough paths eyes take when scanning a page, not reading every word. Text-heavy pages tend to get an F - two horizontal sweeps near the top, then a vertical skim down the left. Sparse, visual pages get a Z - across the top, diagonally down, across the bottom. Both say the same thing: people scan in predictable shapes, so put what matters on the path.
Also known as: f-pattern, z-pattern, reading patterns, scanning patterns
Prefer to watch?
Watch the recap 0:50
The demo
People scan pages in shapes, not word by word. Flip between a text-heavy page and a sparse landing page, and watch the typical gaze path the layout invites.
What this demo shows (text version)
Two mock pages are shown with an overlay of the typical eye-scan path. The text-heavy page draws an F: the gaze sweeps across the top, then a shorter second sweep lower down, then skims vertically down the left edge - leaving the lower-right largely unseen. The sparse landing page draws a Z: across the top (logo to navigation), diagonally down to the opposite corner, then across the bottom to a call-to-action.
The implication is the same for both: attention concentrates on the top, the start of lines, and the path itself, and skips the lower-right. So front-load headings and links with meaningful words, keep the value proposition up top, and place the primary action where the path ends. These are defaults, not laws - strong visual hierarchy can deliberately pull the eye elsewhere.
People scan, they don't read - in roughly an F on dense, text-led pages and a Z on sparse, visual ones. Either way the start (top-left), the top edge, and the path itself carry the most attention, while the lower-right and mid-right get skipped. Put your most important things - value proposition, primary action, key links - on the path; don't bury them where the eye never travels.
Trace the overlay and you can see it: on the text page the gaze rakes across the top twice then slides down the left, leaving the lower-right a dead zone; on the landing page it cuts a Z from logo to nav to hero to call-to-action. Put the important things on those lines, and they get seen; hide them off the path, and they don't.
Which pattern shows up depends on the content. Dense, text-led pages (articles, search results, listings) draw an F: people read the first lines, then scan down the left edge catching the starts of lines and headings. Sparse, visually-led pages (landing pages, hero layouts) draw a Z: the eye crosses the top, sweeps diagonally to the opposite corner, and crosses the bottom. Lay content out to suit whichever your page is.
Both patterns make the front of lines and the top of the page the prime real estate, and the lower-right the most-missed. So front-load headings and link text with meaningful words (not "click here"), keep the value proposition up top, and place the primary action where the path ends - the bottom-right of a Z, or anchored where the F's vertical scan rests.
These are tendencies, not laws. Strong visual hierarchy can and should override the default scan - a bold image, a high-contrast button or generous whitespace will pull the eye off the F or Z. Use the patterns as the baseline of where attention goes for free, then use hierarchy to direct it deliberately where you need it.