skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

readable-measure

Sets line length and measure for comfortable reading across type sizes and breakpoints.

2.5k|358|Updated Mar 7, 2026
Search Tags:#CSS#measure#Readability#line length#Typography#Responsive design#body text
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill readable-measure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: readable-measure
Source: https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/readable-measure
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill readable-measure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Body text that runs too wide or too narrow is hard to read: lines over 75 characters make the eye lose its place, and lines under 45 characters break reading rhythm. This Skill applies typographic measure rules so text columns stay within the comfortable 45–75 character range across devices and type scales.

Core Features & Use Cases

  • Measure Targets by Context: Provides character-per-line ranges for long-form articles (55–70), UI body copy (45–65), captions (40–60), and pull quotes (30–45).
  • CSS Implementation Guidance: Recommends using the ch unit (e.g., max-width: 65ch) as a proxy, with validation against real character counts and adjustments for typeface width.
  • Responsive Behavior Rules: Covers single-column mobile, constrained tablet/desktop columns, and multi-column layouts where each column must independently satisfy the 45–75 rule.
  • Use Case: When tuning a blog or documentation page, apply this Skill to set max-width on text containers, pair wider columns with increased line-height, and verify with real content rather than lorem ipsum.

Quick Start

Ask the AI to review the line length of your page's body text and set an appropriate max-width in ch units for comfortable reading.

Frequently Asked Questions about readable-measure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set the ideal line length for body text in CSS?▼

Set max-width on the text container using the ch unit, such as max-width: 65ch, which approximates 65 characters per line. Validate by counting actual characters in a representative paragraph, since ch is only an approximation based on the width of the 0 glyph.

What is the optimal number of characters per line for readability?▼

The optimal range is 45–75 characters per line including spaces, with 66 often cited as ideal. For sustained reading like articles or docs, a tighter 55–70 range works best; UI body copy targets 45–65.

Does line length matter on mobile screens?▼

On single-column mobile layouts, full width is usually fine at 16px or larger because small screens rarely exceed 70 characters per line. Explicit width constraints become important on tablet and desktop where text can stretch to the container edge.

Should I adjust line length for different typefaces?▼

Yes. Wide typefaces like Georgia need narrower columns, while condensed faces allow slightly wider ones. Revisit the measure whenever the typeface or type size changes, and increase line-height as columns get wider.

When should I not apply the 45–75 character rule?▼

Display type and short UI strings are exempt from the measure rule; it applies only to body copy and reading contexts. For the full type size and weight scale rather than measure alone, use the typography-scale skill instead.

Related Skills

Explore More Design & Creative Skills→
tayiorbeiitayiorbeii

web-typography

Select and implement web typography with CSS for readability and font performance.

Community
Intermediate
PavkaBrikaPavkaBrika
1

typeset

Adjusts UI and marketing text typography including fonts, hierarchy, sizing, spacing, and readability.

Community
Intermediate
launchapp-devlaunchapp-dev
38

typography-scale

Define a ratio-based modular typography scale for UI design.

Official
Intermediate
yonatangrossyonatangross
217

responsive-patterns

Create responsive React components using container queries and fluid typography.

Community
Intermediate