Home / Layouts / F-Pattern
3.1 · Layout

F-Pattern Layout.

Eyes scan text in an F-shape. Put what matters in the top band and along the left edge. Toggle the heatmap in the demo to see why.

What it is

Eye-tracking research has shown that when people read web pages, their eyes don't scan every word equally. Instead, they trace an F-shape: first they scan across the very top of the page, then a shorter horizontal band a little lower, then their eyes drift down the left edge of the page reading only the first few words of each line. Understanding this pattern helps you place your most important content where eyes naturally fall.

How it works

Put your most important content in the top horizontal band (headline, navigation, hero message). Your left margin and left edge of content are seen far more than the right. Content on the far right of the page is often never seen by users who are scanning. Left-aligned text, left-placed CTAs, and left-column navigation are all strategically placed where eyes actually go.

Above the foldVisible without scrolling — highest attention zone
Left edge priorityLeft column and left-aligned text get far more attention than right
Visual anchorsBold text, images, and icons create stopping points that pull the eye
Scanning vs readingMost users scan first, read only if interested — design for scanners first
Tip. The F-pattern is strongest on text-heavy pages like articles and search results. On landing pages with lots of imagery, a Z-pattern (top-left → top-right → bottom-left → bottom-right diagonal) is more common.

Live demo

Toggle the heatmap overlay to visualize the F-shaped scan pattern over the article.

Live
Long read · 8 min · May 30, 2026

Why your eyes never quite reach the right margin.

Most readers don't read. They scan, sweep, and skip. Eye-tracking studies done since the early 2000s have repeatedly shown a particular pattern in how people consume web pages: an F-shape, almost like a column with one or two horizontal beams across it.

The top beam is the strongest signal. Readers see your headline, your navigation, and the first sentence of your hero. If those don't earn their attention, the rest of the page is at risk.

Where the eye drifts next

After the top sweep, the eye drops down a few lines and makes a shorter horizontal pass. This is where second-level headlines, lead sentences, and pull quotes live. Put a strong sub-headline here and your scanner becomes a reader.

From there, attention slides down the left margin, sipping the first few words of each line. The right side of the screen, sadly, is often invisible.

"The left edge is the second most important part of any text-heavy page — after the top beam itself."

What to do about it

Left-align almost everything. Place your call-to-action at the start of a line, not the end. Make sure the first 3-5 words of each paragraph carry meaning. Bold the lead sentence of long blocks. And don't waste the right rail — make it a table of contents, a sticky CTA, or a related link.

Design for scanners first; the readers will take care of themselves.

Copy this prompt

Prompt · 3.1 F-Pattern 
Design a long-form blog article layout following the F-pattern reading behavior. Full-width header with article title (left-aligned, not centered). Below: a two-column layout — left column 68% width for article body (left-aligned text, comfortable line length of 65-70 characters max, 18px body text). Right column 28% width for a sticky table of contents sidebar that stays visible as you read. In the article body, use bold lead sentences at the start of each paragraph, subheadings every 200-300 words, and inline pull-quotes to create visual stopping points. Place key CTAs (email signup, related articles) in the left-aligned body column, not in the right sidebar.

Example sites to study