Readable Measure
- 621 installs
- 2k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
Readable Measure is a Claude skill that sets optimal line lengths for readability across typography scales and responsive layouts for developers who need evidence-based column widths for body text.
About
Readable Measure is a designer-skills module from owl-listener applying typographic measure principles to web and product text. The skill enforces the 45–75 character-per-line range—with 66 characters cited as ideal—and explains failure modes: sub-45 causes rhythmic line jumping, above 75 strains horizontal eye tracking. Developers invoke it when blog templates, docs pages, or app copy blocks feel hard to read on wide monitors or mobile breakpoints. The workflow translates measure targets into CSS max-width, grid column spans, and fluid type scales so long-form content stays comfortable without designer handoff for every breakpoint.
- readable-measure
Readable Measure by the numbers
- 621 all-time installs (skills.sh)
- +63 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #623 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill readable-measureAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 621 |
|---|---|
| repo stars | ★ 2k |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
What is the optimal line length for web readability?
Use readable-measure for development tasks
Who is it for?
Frontend developers implementing article, docs, or marketing text layouts who need character-based line-length targets instead of arbitrary container widths.
Skip if: Heading hierarchy audits, color contrast checks, or data-dense table typography unrelated to prose measure.
When should I use this skill?
A developer asks for optimal line length, readable measure, character-per-line limits, or responsive typography column widths.
What you get
Typography specs with character-based measure targets, max-width values, and responsive column rules for readable body text.
- Measure-based max-width specs
- Responsive typography guidelines
By the numbers
- Optimal measure range is 45–75 characters per line
- 66 characters cited as the ideal line length
Files
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
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kHow it compares
Use Readable Measure for prose column width; use localization-design when translated text expansion affects line breaks across locales.
FAQ
What line length does Readable Measure recommend?
Readable Measure recommends 45–75 characters per line including spaces, with 66 characters often cited as ideal. Lines shorter than 45 disrupt reading rhythm; lines longer than 75 make horizontal tracking difficult.
How does Readable Measure apply to responsive layouts?
Readable Measure translates character targets into max-width and grid column rules across typography scales and breakpoints. Developers adjust container widths so body text stays within the measure range on desktop and mobile.