Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Support scanning with clear openings and strong left-edge anchors.
- 01Initial scan
A clear opening helps people understand the subject quickly.
- 02Follow-up scan
A meaningful subheading creates another useful entry point.
- 03Left-edge anchors
Descriptive headings and early words help people locate relevant sections.
The dashed line illustrates a possible attention route. Actual reading behavior depends on the content, task, language, and person.
How the pattern works
The F-pattern describes a possible scanning behavior on text-heavy, left-to-right pages: a broad initial scan, a shorter follow-up scan, and attention along the start of subsequent lines. It is a reading pattern, not a requirement to draw an F with the page grid.
Use the idea to improve headings, introductory sentences, and information order. People also read closely, search for particular details, or follow different paths according to language, task, and content. The figure is an explanatory route, not a guaranteed gaze trace.
Where it fits—and what to consider
A useful choice when
- The page contains substantial text.
- Readers are likely to skim before choosing a section.
- Headings and paragraph openings can carry useful meaning.
Be deliberate about
- An F-shaped arrangement is not a universal reading rule.
- Weak headings remain weak even when their positions match the diagram.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Keep readable line lengths and a strong hierarchy of headings. Supporting content should not interrupt the primary reading area.
On narrower screens
Use a natural single-column reading order. Short, informative headings and paragraph openings matter more than reproducing a wide-screen scan shape.
Build the structure
- 01Put the main topic and purpose in the opening.
- 02Write headings that make sense when read on their own.
- 03Test whether someone can find a specific answer by scanning the page.
.article {
max-width: 68ch;
margin-inline: auto;
line-height: 1.75;
}
.article h2 {
margin-block: 2.5rem 1rem;
scroll-margin-top: 6rem;
}
.article p + p { margin-top: 1.25rem; }Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Read only the headings and first sentence of each section in an article. Rewrite them until you can predict where a reader will find each important answer.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.