Text placement rules

Summary

A layout-rules page: four blurple-outlined wireframe templates show where text sits relative to the visual across formats, text-only centered, portrait below the canvas, landscape beside the canvas, and a dynamic story layout.

Visual description

White-left / near-black-right split. The left column shows the "04 TYPOGRAPHY" eyebrow, a two-tone "USAGE / TEXT PLACEMENT" headline, and four numbered rules (text-only centered; portrait-ratio below the visual; landscape-ratio beside the visual; part of a story). The right 2x2 area holds four schematic frames outlined in blurple, each tagged with a small dark numbered chip: a portrait frame with two centered white placeholder bars, a portrait frame with a dotted-texture image block above bottom-placed bars, a landscape frame with a textured image block on the left and bars on the right, and a frame mixing avatar dots with text bars for a chat-style story. The bars and image blocks are abstract placeholders, not real copy.

Key takeaway

Reducing layout rules to bare blurple wireframes with placeholder bars, so the lesson is purely about position and never distracted by content. Mapping each ratio (portrait, landscape) to a fixed text position gives designers a quick decision rule.

Reuse notes

A clean way to document composition and text-placement rules in any brand or layout guideline. Abstract wireframes keep it format-agnostic and timeless. Reach for it when the rule is about where things go, not what they say. Pairs with the type-styling pages around it.