readable-measure
owl-listener/designer-skills
Set optimal line length (45–75 characters) for comfortable reading across devices and type sizes.
What is readable-measure?
Readable Measure ensures body text columns are sized for reading comfort by applying the principle that optimal line length is 45–75 characters per line, with 66 characters as the ideal. Use this when tuning text layout for articles, documentation, UI copy, or any sustained reading context.
- Apply the 45–75 character per line principle to body copy for optimal reading rhythm
- Use CSS `ch` units (e.g., `max-width: 65ch`) as a proxy for character-based column sizing
- Adjust measure by context: 55–70 for long-form, 45–65 for UI copy, 40–60 for captions, 30–45 for callouts
- Account for typeface width differences (Georgia vs. condensed faces) when setting column constraints
- Implement responsive behavior: full width on mobile, explicit constraints on tablet/desktop, independent satisfaction in multi-column layouts
- Pair measure adjustments with line-height increases for wider columns to maintain reading comfort
How to install readable-measure
npx skills add https://github.com/owl-listener/designer-skills --skill readable-measureHow to use readable-measure
- 1.Identify the context of your body text (article, UI copy, caption, or callout)
- 2.Set a `max-width` on your text container using the `ch` CSS unit based on your context target (e.g., `max-width: 65ch` for long-form)
- 3.Count actual characters in a representative paragraph to validate the measure is within 45–75 characters
- 4.Adjust for your typeface: narrow the column for wide faces like Georgia, allow slightly wider for condensed typefaces
- 5.Increase line-height proportionally as column width grows to maintain reading comfort
- 6.Test with real content rather than placeholder text to catch measure problems
Use cases
- Tuning article or documentation body text to prevent eye strain and maintain reading flow
- Setting UI description and helper text column widths for clarity and scannability
- Designing multi-column layouts where each column must independently meet the 45–75 character target
- Adjusting measure when switching typefaces or type sizes to maintain reading comfort
- Validating responsive text layout by counting actual characters in representative paragraphs
- Web designers and developers tuning typography for readability
- Content teams publishing long-form articles or documentation
- Product designers refining UI copy and description text layout
- Anyone implementing responsive text layouts across breakpoints
readable-measure FAQ
Readable Measure covers line length and column width only. Use typography-scale for the full size and weight scale across your type system.
Below 45 characters, the eye jumps lines too frequently and disrupts reading rhythm. Above 75 characters, the eye loses its place returning to the next line. 45–75 balances these concerns; 66 characters is often cited as ideal.
`ch` units (width of the '0' glyph) are a good rough proxy and scale with font size automatically. Always validate by counting actual characters in real content, since `ch` is approximate and varies by typeface.
No. The readable measure principle applies to body copy and sustained reading contexts. Display type, short UI strings, and headings are exempt.
Each column should independently satisfy the 45–75 character target. Set `max-width` on each column container, not just the overall layout.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: readable-measure
description: Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use typography-scale.
Readable Measure
You are an expert in typographic measure and its effect on reading comfort and comprehension.
What You Do
You apply the principle of readable measure to ensure text columns are sized for comfortable, uninterrupted reading across devices and type scales.
The Principle
Measure is the length of a line of text. The optimal range is 45–75 characters per line (including spaces), with 66 characters often cited as the ideal.
- Below 45 characters: too short — the eye jumps lines too frequently, disrupting rhythm
- Above 75 characters: too long — the eye loses its place returning to the start of the next line
- 45–75 is the target zone for body copy; tighter ranges (50–60) suit sustained reading like articles or docs
Measuring in Practice
- Use the
chCSS unit (width of the0glyph) as a rough proxy:max-width: 65ch - Count actual characters in a representative paragraph to validate —
chis approximate - Adjust for typeface: wide faces (Georgia) need narrower columns; condensed faces allow slightly wider
- Display type and short UI strings are exempt — this applies to body copy and reading contexts
Responsive Behavior
- Single-column mobile: full width is usually fine at 16px+ (rarely exceeds 70 chars on small screens)
- Tablet and desktop: constrain column width explicitly; don't let text stretch to container edge
- Multi-column layouts: each column should independently satisfy the 45–75 rule
By Context
| Context | Target |
|---|---|
| Long-form articles, docs | 55–70 characters |
| UI body copy, descriptions | 45–65 characters |
| Captions, helper text | 40–60 characters |
| Pull quotes, callouts | 30–45 characters |
Best Practices
- Set
max-widthon text containers, not just font size - Increase line-height slightly as column width grows (wider measure needs more leading)
- Test with real content — synthetic lorem obscures measure problems
- Revisit measure whenever typeface or type size changes
Related skills
More from owl-listener/designer-skills and the wider catalog.
research-repository
Organize research findings so teams stop redoing studies and build on accumulated evidence.
responsive-design
Design layouts and interactions that adapt across screen sizes and input methods.
search-ux
Design search experiences that help users find what they need with minimal friction.
service-blueprint
Map service delivery across frontstage actions, backstage processes, and supporting systems.
spacing-system
Create a systematic spacing scale from a base unit with clear application rules for consistent layouts.
stakeholder-alignment
Build responsibility matrices, decision rights, and communication plans to unblock stakeholder alignment.