Saga

Saga is a long-form storytelling layout designed around immersive reading flow. It pushes the content width wider than typical blog layouts — 72 characters instead of the usual 65 — and uses pull quotes, section breaks, and strategic whitespace to pace the narrative. The name fits: this is a layout for stories that need room to unfold, where the structure itself supports the arc of the content.

We built Saga after noticing that standard editorial layouts started feeling constraining around the 3,000-word mark. Articles that told a story — with rising action, supporting evidence, and resolution — needed a layout that could shift gears visually as the content moved through different phases. Saga accomplishes this with variable section spacing: tighter in argumentative passages, more expansive around reflective or transitional moments.

Writers and editors working on long-form journalism, personal essays, case studies, and narrative documentation will find Saga's pacing tools directly useful. The layout is less suited to listicles, product comparisons, or anything where readers scan rather than read sequentially. It rewards commitment and is built for content that deserves it.

Layout Anatomy

Saga uses a single wide column with a 72-character measure — 7 characters wider than the typical editorial standard. This extra width is intentional: it accommodates the longer sentences and complex clause structures common in narrative writing without forcing awkward line breaks. The content area is centered with generous side margins that increase proportionally on larger screens, creating an increasingly immersive feel as viewport width grows.

Spacing and Typography Notes

Variable section spacing is Saga's defining feature. Standard paragraph spacing is 1.5× line height, but section breaks use three tiers: minor breaks at 2× (topic shifts within a section), major breaks at 4× (new narrative phases), and dramatic breaks at 6× (major turning points or climactic transitions). This variable rhythm gives editors a tool to control pacing through structure rather than relying entirely on prose. Testing showed that readers unconsciously paused longer at wider breaks, which aligned reading pace with narrative intent.

Saga uses a larger base font size — 18px instead of the standard 16px — to match the wider measure and support longer reading sessions. The heading scale is intentionally compressed at 1.2 ratio to avoid oversized H1 elements that would create dead space at the top of the page. Pull quotes use a 24px italic serif at reduced opacity, positioned as visual landmarks that readers can spot while scrolling — they serve double duty as content highlights and navigation waypoints.

Components in This Layout

The core components are pull quotes, section breaks with optional labels, full-bleed images, and the chapter navigation footer. Pull quotes sit on the left margin with a vertical accent bar, breaking the content column to create visual variety in long passages. Full-bleed images extend beyond the content width to the edge of the viewport, creating a cinematic interruption that resets the reader's visual context. The chapter navigation footer lists all major sections with anchor links, useful for readers who want to revisit specific parts of a long piece.

Common Implementation Mistakes

• Using the wider 72ch measure without increasing the base font size. At 16px, 72 characters per line exceeds comfortable reading width for most people. The 18px base is not optional — it is what makes the measure work.
• Applying the variable section spacing without editorial intent. If every section uses 4× spacing, the three-tier system collapses into a single rhythm and the pacing benefit disappears. The variation only works when it corresponds to actual content shifts.
• Placing full-bleed images at regular intervals 'for variety.' They should mark genuine narrative transitions. Used randomly, they disrupt the reading flow rather than resetting it.
• Skipping the chapter navigation on articles under 2,000 words. Short pieces do not need it and the component adds visual clutter without functional benefit.
• Testing only with polished prose. Saga's wide measure and generous spacing expose rough writing — awkward transitions and weak paragraphs are more visible in this layout than in tighter formats.