Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

readable-measure

Sterne1.882

Forks318

Aktualisiert6. Mai 2026 um 20:19

Set optimal line lengths for readability across typography scales and responsive layouts.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

Owl-Listener

Owl-Listener/designer-skills

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Web- und digitale SchnittstellendesignerInformatik- und Mathematikberufe·SOC 15-1255

SKILL.md

readonly

name	readable-measure
description	Set optimal line lengths for readability across typography scales and responsive layouts.

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

Mehr aus diesem Repository

gleiches Repository

critique-affordance

Owl-Listener/designer-skills

Critique a screen's interactive affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.

2026-06-111.9k

critique-color

Owl-Listener/designer-skills

Critique a screen's colour usage — contrast ratios, palette coherence, semantic meaning, and colour accessibility.

2026-06-111.9k

critique-information-density

Owl-Listener/designer-skills

Critique a screen's information density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure.

2026-06-111.9k

test-scenario

Owl-Listener/designer-skills

Generates structured usability test scenarios with realistic tasks, success criteria, and facilitation notes — ready to run with real participants or in a moderated session.

2026-06-111.9k

interfaces-that-feel

Owl-Listener/designer-skills

Apply an emotional resonance lens to any UI. Use when a design is technically correct but flat — to identify what's missing and prescribe specific changes at the copy, motion, and interaction layer.

2026-06-111.9k

business-design

Owl-Listener/designer-skills

A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.

2026-06-111.9k

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