Text & Image Layout
Overlay real compositional systems on a live layout and move the text block to see how it works with — or against — the guides. Runs in your browser — no server call, no tracking.
Headline Goes Here
Supporting copy sits below the headline, sized and positioned to stay clear of the busiest part of the image.
Rule of Thirds
Divide the frame into a 3×3 grid; place key elements along the lines or at their intersections rather than dead-center. Formalized in John Thomas Smith's 1797 painting treatise "Remarks on Rural Scenery" as a simpler approximation of the golden ratio — still the default composition guide in every camera viewfinder today.
Golden Ratio (φ)
A spiral or grid based on the ratio 1:1.618, found in classical architecture and Fibonacci sequences, and revived for modern graphic design by typographer Jan Tschichold in the mid-20th century. It draws the eye toward a focal point that feels naturally balanced rather than mechanically centered.
Z & F Reading Patterns
The Z-pattern traces how eyes scan a sparse layout — left to right along the top, diagonally down, then left to right along the bottom — common in posters and landing pages. The F-pattern, documented by Jakob Nielsen's 2006 eye-tracking research, shows how people scan dense text: heavily along the top, less along a second line, then scanning down the left edge.
The Swiss Grid System
Josef Müller-Brockmann's 1981 book "Grid Systems in Graphic Design" codified the International Typographic Style: rigorous modular grids, sans-serif type, and objective, asymmetric layouts — the direct ancestor of the column-and-gutter grids used in web design today.