# Typography Layout Systems > Use when composing type in space rather than sizing it — deciding how a poster, hero, editorial spread, dashboard, or landing page is structurally organized. Also use when a layout feels arbitrary, elements float without relationship, a grid is being applied by reflex, or a composition needs deliberate tension or movement. - Skill: `jpoindexter/typography-layout-systems` (Agent Skill) - Install (CLI): `npx skillmds@latest add jpoindexter/typography-layout-systems` - Raw SKILL.md: https://api.skillmd.com/api/skills/jpoindexter/typography-layout-systems/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: jpoindexter (https://skillmd.com/u/jpoindexter) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jpoindexter/typography-layout-systems --- # Typography layout systems Elam's premise: *"All design is based on a structural system."* There are eight, and the grid is only one. Reaching for a grid by default is a choice made by habit rather than by reasoning. ## 1. When to invoke - Composing a page, spread, poster, hero, or screen at the structural level. - A layout "feels arbitrary" or elements sit without visible relationship. - Someone reached for a 12-column grid without asking whether it fits. - You want deliberate movement, tension, or expressive composition. **Do not** invoke for sizing (`hierarchy-and-scale`) or spacing detail (`microtypography`). ## 2. Required context - The **content inventory** — how many text groups, what lengths, what images. - Whether the composition is **fixed** (poster, print) or **fluid** (web). - Whether it must **repeat** across many instances or is a one-off. - The intended **reading order**, explicitly. - Brand or system constraints that pre-commit you to a structure. ## 3. Invariant principles - **Every composition has a structural system, chosen or not.** Choosing by default is still choosing. - **The system determines the reading order.** If reading order isn't controlled, the composition isn't finished. - **Structure and content should agree.** Symmetric content in an asymmetric system fights itself. - **Systems can be combined** — Elam notes compositions that carry characteristics of two systems at once. Combination is a deliberate act, not a hedge. - **Fluid media constrain the choice.** Radial and dilatational systems depend on fixed geometry and largely do not survive reflow. ## 4. The eight systems | System | Definition (Elam) | Reads as | Fits | |---|---|---|---| | **Axial** | All elements organized to the left or right of a single axis | Ordered, directional | Timelines, editorial spreads, agendas | | **Radial** | All elements extend from a central point of focus like rays | Dynamic, energetic | Posters, hubs, event graphics | | **Dilatational** | Circles dilate or expand from a central point | Rippling, concentric | Expressive covers, data with a centre | | **Random** | Elements arranged without definite aim, pattern, direction, rule, or purpose | Spontaneous | Zines, art direction, deliberate disorder | | **Grid** | Vertical and horizontal divisions organizing and relating elements | Formal, ordered, economical | Publications, web, dashboards, docs | | **Transitional** | Informal layered and shifted banding; no axis or edge alignment; elements move freely left and right | Casual, drifting | Editorial features, expressive marketing | | **Modular** | Standardized non-objective units act as ground to hold and contain text | Systematic, componentized | Card UIs, design systems, catalogues | | **Bilateral** | A single centred axis with text centred on it | Formal, classical, static | Titles, invitations, certificates | Elam's notes worth carrying: - **Radial and dilatational compositions are dynamic** because the eye is drawn to or along the focal point/arc. - **Random is "deceptively simple because the viewer imposes organization"** — people will find pattern whether you put one there or not, so random still needs control. - **Bilateral is the most symmetrical and therefore the most challenging**, because the inherent symmetry resists visual interest. - **Modular resists type's nature**: "typographic lines and words have a distinctly individual form that defy standardization," so the module must be designed to hold varied content. ## 5. Context-dependent heuristics - **Nonobjective elements are compositional tools, not decoration.** Elam's term for the non-typographic marks in a layout — rules, bars, blocks, dots, circles. "Using nonobjective elements sharpens and articulates the composition… they enhance the functions of emphasis, organization, and balance," becoming "functional guides when used with typography," clarifying hierarchical order and directing the eye. If a rule in your layout isn't doing one of those four jobs, delete it. - **The circle is a wildcard.** Elam: it "can be used anywhere in the composition," giving you a tool to "guide the eye; create a pivot point, tension, and emphasis; or contribute to visual organization or balance." Placement changes its function entirely: | Placement | Effect | |---|---| | Squeezed between lines of text | **Tension** | | In close proximity to a word or line | **Emphasis** | | Aligned with lines | **Organization** | | Isolated in open space | **Stopping point** — where the eye enters | | Counterweighting a heavy group | **Balance** | | At an axis intersection | **Pivot point** | Generalise this: any nonobjective element's meaning comes from *placement relative to the type*, not from the element itself. - **Try "one size, one weight" as a diagnostic.** Elam's teaching constraint — compose using a single size and single weight, so hierarchy must come from position, grouping, and space rather than from typographic contrast. If a layout only works once you add size and weight variation, its underlying structure is weak. Fix the structure, then add the contrast back. - **Group by breaking lines deliberately.** Elam: when the format is small and line lengths are long, breaking lines "intuitively in a logical pattern" groups lines of text that belong together — which "simplifies the composition and enhances readability." Line breaks are a compositional decision in display settings, not only a consequence of measure. - **Compound grids beat rigid modular grids on the web.** Rutter's fix for modular grids fighting responsive design: combine a **columnar** grid with a **hierarchical** one. Either give each column its own hierarchical grid, or — more flexibly — start hierarchical and give each element of the hierarchy its own columnar grid, choosing whatever suits that content. This lets a page hold a 12-column gallery and a 2-column article without forcing both onto one lattice. - **Prefer odd over even column counts.** Even grids invite lazy halving; odd counts (5, 7, 9) force asymmetric decisions and produce more interesting, less default compositions. - **Default for product UI is grid or modular.** Both survive reflow, repeat reliably, and are auditable. - **Card-based interfaces are modular systems.** Name it — it tells you the real problem is designing a module that tolerates content variance. - **Editorial and marketing can afford transitional or axial.** They give movement without abandoning structure. - **Bilateral for a single short block only.** Centred running text is hard to read because every line-start moves. - **Web rarely supports radial/dilatational** except as decorative background or in a fixed-aspect canvas (SVG, hero illustration). - **Combine deliberately.** Elam shows a bilateral arrangement that gains radial and dilatational character once circles touch. Combination should be an observation you can state, not an accident. ## 6. Failure patterns | Pattern | Cause | Fix | |---|---|---| | 12-column grid on a 3-element hero | Grid by reflex | Axial or bilateral is likely correct | | Cards of wildly uneven height, layout looks broken | Module not designed for content variance | Constrain content or design a flexible module | | Centred layout feels lifeless | Bilateral's inherent symmetry | Introduce one asymmetric element, or change system | | "Organic" layout reads as a mistake | Random without control | Random still needs deliberate density and balance | | Reading order ambiguous | No system, or two competing systems | Commit to one primary system | | Print composition falls apart responsively | Fixed-geometry system on fluid media | Move to grid/modular for the fluid case | ## 7. Evaluation procedure 1. Name the system currently in use. If you can't, that's the finding. 2. State the intended reading order. Trace it on the render — does the eye follow? 3. Check content/structure agreement (symmetric content ↔ symmetric system). 4. If fluid: resize. Does the system survive, or was it fixed-geometry? 5. If modular: render the shortest and longest real content in the module. 6. Squint. Structure should be legible as shape before you read a word. 7. Confirm any combination of systems is deliberate and describable. ## 8. Output format ``` System: — because Secondary system (if combined): — deliberate: Reading order: <1 → 2 → 3 …>, controlled by Medium: — system survives reflow: Content variance handled: Alternatives rejected: because ``` ## 9. Examples **Conference landing page: logo, title, date, four speakers, CTA.** > Not a grid problem. The content is one strong title plus a repeating set, so: > **axial** for the header block (title, date, CTA aligned to a single left axis, > giving a clear top-to-bottom order), **modular** for the speaker set (four > standardized units holding a photo, name, and role of varying length). Two > systems, deliberately combined, each doing the job it's good at. A 12-column > grid would impose divisions the content doesn't have. **Award certificate.** > **Bilateral** — formal, ceremonial, symmetric content on a single centred axis. > Elam's warning applies: it's the most challenging system because symmetry > resists interest. Carry the interest in a single rule and generous space > rather than by breaking the axis, which would undercut the formality that's the > whole point. ## 10. Counterexamples - ❌ "Start with a 12-column grid." — Correct for publications and dashboards, an imposition on a three-element composition. - ❌ "Make it random so it feels organic." — Elam: random is deceptively simple; the viewer imposes organization regardless, so uncontrolled random reads as a bug. - ❌ "Centre everything, it looks elegant." — Bilateral on running text moves every line-start and slows reading. - ❌ "Use a radial layout for the responsive homepage." — Depends on fixed geometry; will not survive reflow. - ❌ "The cards look fine." — with three words of placeholder in each. Modular systems fail on real content variance, not on lorem ipsum. ## 11. Source citations - Elam, *Typographic Systems of Design* — **primary source.** "All design is based on a structural system. These systems or frameworks can be broken down into eight major variations." Definitions of axial, radial, dilatational, random, grid, transitional, modular, and bilateral systems; the dynamism of radial and dilatational; random's deceptive simplicity; bilateral as most symmetric and most challenging; modular units as ground; typographic lines defying standardization. - Rutter, *Web Typography* — design layouts from the content out; **use compound grids for maximum flexibility** (columnar × hierarchical, in either order); **choose odd over even grid systems**; use active white space; bring the design into the margins; don't slavishly follow a baseline grid. - Lupton, *Thinking with Type* 3e — grids and alignment. - Elam, *Typographic Systems of Design* — also: **nonobjective elements** sharpening and articulating a composition, enhancing "emphasis, organization, and balance" and acting as "functional guides"; **the circle as a wildcard element** creating a pivot point, tension, emphasis, organization, or balance depending on placement; the one-size/one-weight constraint studies; grouping by breaking lines "intuitively in a logical pattern" to simplify composition and enhance readability; and the caution that designers too often accept default leading (~20% of text size) instead of developing sensitivity to the texture of the text. - Lupton (ed.), *Type on Screen* — screen hierarchy, layering, dynamic vs. fixed compositions.