jpoindexter 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
- Name the system currently in use. If you can't, that's the finding.
- State the intended reading order. Trace it on the render — does the eye follow?
- Check content/structure agreement (symmetric content ↔ symmetric system).
- If fluid: resize. Does the system survive, or was it fixed-geometry?
- If modular: render the shortest and longest real content in the module.
- Squint. Structure should be legible as shape before you read a word.
- Confirm any combination of systems is deliberate and describable.
8. Output format
System: <one of eight> — because <content + medium reasoning>
Secondary system (if combined): <name> — deliberate: <yes/no>
Reading order: <1 → 2 → 3 …>, controlled by <axis | focal point | module | banding>
Medium: <fixed | fluid> — system survives reflow: <yes/no>
Content variance handled: <how>
Alternatives rejected: <system> because <reason>
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.