readable-measure — Claude Code skill: what it does, how to install
Sets optimal typographic measure and line length across screen breakpoints. Helps maintain reading comfort in body copy, articles, and UI descriptions.
npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-codeWhat readable-measure does
This skill guides column widths so text stays within 45 to 75 characters per line, including spaces. Extremely short lines interrupt reading rhythm with constant eye jumps. Lines wider than 75 characters make tracking back to the next line difficult. For documentation and articles, it targets a tighter window of 55 to 70 characters, applying max-width: 65ch as a baseline CSS constraint.
Column constraints target body text rather than headlines or brief interface labels. Mobile screens running 16px font sizes rarely exceed 70 characters in a single column. Tablets and desktop viewports, however, require explicit width limits so lines do not stretch edge-to-edge. Whenever column width increases, line-height must expand slightly to preserve readability.
The skill handles line length and column width only. If your design system requires font sizes and weight scales, install typography-scale instead.
What it helps with
- constrain body copy column width using CSS
chunits - balance character count per line for documentation and articles
- prevent text from stretching across wide desktop viewports
- adjust line-height when expanding paragraph width
Example prompts for the agent
- Set comfortable line length for article body text using CSS
- Review desktop typography container widths against the 65ch guideline
- Constrain UI description paragraphs so line lengths stay under 70 characters
How to install readable-measure
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-code2Manually: put the files in place
~/.claude/skills/readable-measure/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/readable-measure/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a codex2Manually: put the files in place
.agents/skills/readable-measure/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a cursor2Manually: put the files in place
.cursor/skills/readable-measure/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills readable-measure2Manually: put the files in place
.github/skills/readable-measure/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/readable-measureManually: put the files in place
.devin/skills/readable-measure/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill readable-measure -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about readable-measure
How do I install readable-measure in Claude Code?
Run npx skills add Owl-Listener/designer-skills --skill readable-measure -a claude-code. You can also place it manually at ~/.claude/skills/readable-measure/SKILL.md.
What is the recommended line length in readable-measure?
The target range is 45 to 75 characters per line with spaces, with 66 characters considered ideal. For long-form text, it targets 55 to 70 characters.
Does readable-measure configure font sizes and weights?
No, it focuses strictly on line length and column widths. For type scales and font weights, use the companion skill typography-scale.
Source text
SKILL.md · MIT
--- 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 `ch` CSS unit (width of the `0` glyph) as a rough proxy: `max-width: 65ch` - Count actual characters in a representative paragraph to validate — `ch` is 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-width` on 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
© Owl-Listener · MIT · Owl-Listener/designer-skills
