layout-text

Typographic content container with vertical rhythm. Provides intelligent spacing between paragraphs, headings, lists, and other block elements.

Attributes

Attribute Values Default Description
layout-text has no configurable attributes. It applies consistent typographic spacing automatically.

How It Works

The layout-text element creates a container optimized for long-form reading content. It:

  • Sets a maximum line width of 65ch (characters) for optimal readability
  • Applies consistent vertical spacing between block elements
  • Uses larger margins before major headings (proximity principle)
  • Tightens spacing after headings so they associate with their content
  • Provides extra breathing room around figures and code blocks

Live Example

The Art of Typography

Good typography makes content easier to read and understand. The layout-text element handles the complexity of vertical rhythm so you can focus on writing great content.

Research shows that optimal line length for reading is between 45-75 characters. The layout-text container sets a max-width of 65ch to hit this sweet spot.

Vertical Rhythm

Vertical rhythm refers to the consistent spacing between elements on a page. Notice how the space before this paragraph is smaller than the space before the heading above it.

This creates a visual hierarchy that helps readers scan and understand the structure of your content.

The Proximity Principle

Elements that are related should be closer together. Headings have less space below them than above, associating them with the content they introduce.

  • First list item
  • Second list item
  • Third list item

Lists are also spaced appropriately within the prose container.

"Typography is the craft of endowing human language with a durable visual form."

Robert Bringhurst

Blockquotes receive special treatment to stand out from body text.

Code

<layout-text> <h2>Article Title</h2> <p>First paragraph of content...</p> <p>Second paragraph continues...</p> <h3>Section Heading</h3> <p>Content for this section...</p> <ul> <li>List item</li> <li>Another item</li> </ul> <blockquote> <p>A notable quote...</p> </blockquote> </layout-text>

Spacing Rules

The prose element applies different spacing based on element types:

Context Spacing Rationale
Default (between elements) var(--size-m) Standard paragraph spacing
Before h2 var(--size-2xl) Major section break
Before h3 var(--size-xl) Subsection break
Before h4/h5/h6 var(--size-l) Minor section break
After any heading var(--size-s) Associates heading with content
Between consecutive lists var(--size-s) Groups related lists
Before/after figures and pre var(--size-l) Extra breathing room for media

Usage Examples

Blog Post

Getting Started with Web Components

Learn how to build reusable, encapsulated HTML elements using the Web Components standards.

Web Components are a set of web platform APIs that allow you to create custom, reusable HTML tags. They work across all modern browsers and can be used with any JavaScript library or framework.

Why Web Components?

Unlike framework-specific components, Web Components are built on web standards. This means they:

  • Work everywhere HTML works
  • Don't require a build step
  • Can be shared across projects
  • Encapsulate styles and behavior
<layout-center data-layout-max="narrow"> <article> <layout-text> <h1>Getting Started with Web Components</h1> <p class="lead">Learn how to build reusable HTML elements.</p> <p>Web Components are built on web standards...</p> <h2>Why Web Components?</h2> <ul> <li>Work everywhere HTML works</li> <li>Don't require a build step</li> </ul> </layout-text> </article> </layout-center>

Documentation Page

Installation

Install the package using npm:

npm install vanilla-breeze

Or include via CDN:

<link rel="stylesheet" href="https://cdn.example.com/vanilla-breeze.css">

Usage

Import the styles in your CSS:

@import 'vanilla-breeze';

Then use the custom elements in your HTML.

With layout-center for Page Layout

Centered Article

Combining layout-text with layout-center creates an optimal reading experience. The prose handles vertical rhythm while the center constrains the horizontal width.

This pattern is common for blog posts, documentation, and any long-form content.
<layout-center data-layout-max="narrow"> <layout-text> <h2>Centered Article</h2> <p>Combining layout-text with layout-center creates an optimal reading experience.</p> <p>This pattern is common for blog posts, documentation, and long-form content.</p> </layout-text> </layout-center>

Best Practices

  • Use for long-form content only - layout-text is designed for articles, documentation, and similar content. Don't use it for UI layouts.
  • Combine with layout-center - For page layouts, wrap layout-text in a layout-center to constrain width.
  • Semantic HTML - The spacing rules work best with proper semantic markup (h2 before h3, etc.).
  • Avoid nesting layout elements - layout-stack, layout-grid, and similar elements inside prose may have unexpected spacing.

CSS Implementation

layout-text { display: block; max-inline-size: var(--measure-normal, 65ch); } /* Vertical rhythm between elements */ layout-text > * + * { margin-block-start: var(--size-m); } /* Larger spacing before major headings */ layout-text > * + h2 { margin-block-start: var(--size-2xl); } layout-text > * + h3 { margin-block-start: var(--size-xl); } layout-text > * + h4, layout-text > * + h5, layout-text > * + h6 { margin-block-start: var(--size-l); } /* Tighter spacing after headings (proximity principle) */ layout-text > h2 + *, layout-text > h3 + *, layout-text > h4 + *, layout-text > h5 + *, layout-text > h6 + * { margin-block-start: var(--size-s); } /* List and blockquote spacing */ layout-text > ul + ul, layout-text > ol + ol, layout-text > ul + ol, layout-text > ol + ul { margin-block-start: var(--size-s); } /* Figure and pre blocks get more breathing room */ layout-text > * + figure, layout-text > * + pre { margin-block-start: var(--size-l); } layout-text > figure + *, layout-text > pre + * { margin-block-start: var(--size-l); }

Related Elements