Measure matters

Readable layouts start with the right line length.

Column Width is a field guide for designers, developers, and content teams who want web typography that feels calmer, clearer, and easier to read.

Why this exists

Most sites treat readability as an afterthought.

The result is familiar: lines that run too wide, cramped headings, weak figure treatment, and pages that technically work but never settle into a comfortable rhythm.

Better defaults

Start with proven targets instead of guessing max-width values in every new project.

Sharper editorial layouts

Use patterns for pull quotes, captions, sidenotes, and narrow or wide reading modes.

Practical implementation

Get CSS-ready guidance, not just abstract typography advice.

Performance-conscious

Built for static-first sites and lean frontends.

Flagship tool

Measure Lab turns typographic advice into something you can tune.

Adjust width, type size, and line-height. See the reading block change immediately. Copy a CSS snippet and share a preset through the URL.

Measure Lab tool preview
Reading width grid diagram

Pattern library

A small editorial system for text-heavy sites

Public pattern pages explain when a layout pattern helps, when it hurts, and how to use it without breaking rhythm.

What you'll find

The first release focuses on the fundamentals that pay off quickly.

Enough scope to feel real. Small enough to stay clean.

Pillar guide

A practical overview of column width, measure, and layout tradeoffs on the modern web.

Supporting guides

Focused articles on line length, responsive type, and readable docs layouts.

Patterns

Reusable references for pull quotes, sidenotes, captions, callouts, and data tables.

Methodology

A clear explanation of how the guidance is framed and what it is not.

Start with the guide, then tune your own defaults.

Learn the reasoning, test a preset, and keep the implementation lightweight.