## What editorial layout actually solves
Editorial layout solves one problem: getting a reader to move from the first line to the next, and from that paragraph to the one after it. It is not about fitting everything above the fold. It is about controlling the pace of reading.
The most common mistake on personal sites is cramming everything into the first screen and then shrinking the type until it fits. Magazines do the opposite. The grid sets the skeleton, whitespace sets the rhythm, and hierarchy tells the eye where to land first.
## Set the grid before you place content
A grid is a rule for column widths and gaps. Twelve columns is the common choice, because 12 divides by 2, 3, 4 and 6, so a block can span 4, 6 or 8 columns without awkward remainders.
- Column width decides how many characters sit on a line. Body text reads best between 45 and 75 characters.
- The gutter decides breathing room. Columns too close together make separate blocks look glued.
- Margins set the tone. Wide margins read as formal, narrow margins read as dense.
Draw the grid first, then place content into it. Doing it the other way around means most of your time goes into nudging spacing at the end.
## Whitespace is not just extra padding
Whitespace is not about increasing padding. It is about creating a difference in level: small gaps between paragraphs, larger gaps between sections, and more space above a section heading than below it.
There is a simple test. Zoom the page out until the text is unreadable. If the structure is still visible, the whitespace is doing its job. If it collapses into a grey block, your spacing is too even.
## Hierarchy needs three levels, not six
Hierarchy is the easiest thing to lose control of. People end up with four heading sizes, three weights and two colors, and every heading is shouting.
Three levels are enough: one page title, one section heading, one body size. A size difference needs to reach roughly 1.5x to register, and you should not change weight and color at the same time. Hierarchy comes from contrast, not from the number of variations.
## FAQ
- Does a grid make a layout rigid? No. A grid is a skeleton, not a template. Blocks can span columns when the content needs it.
- Is whitespace wasted space? On a personal site, whitespace buys attention.
- How do you handle mobile? Set the single-column layout first, then decide which blocks sit side by side. Not the other way round.
To see how this plays out on a real page, look at the layout examples on the [home page](/).