Line Length in CSS: The Ideal Measure With ch Units

Wide monitors do not need full-width paragraphs. When a line stretches across the screen, returning to the beginning of the next one becomes a bigger visual task. Extremely narrow columns create a different problem: constant line breaks interrupt phrases. A useful reading measure sits between these extremes and changes with language, typeface, and context.

Define the reading task before the width

Separate sustained reading from scanning. An essay paragraph, an account label, and a product specification do not need the same measure. For a long-form Latin text specimen, begin near 55 to 75 characters per line, counting spaces, as a practical hypothesis rather than a standard that every page must satisfy.

Use the word counter to prepare samples of similar length, such as three 180-word excerpts from real articles. Compare the same excerpts at each candidate width. The counter helps keep content volume consistent; it does not calculate an ideal column width for your audience.

Include a short paragraph, a long paragraph, and a paragraph with several links. Natural variation reveals spacing and wrapping behavior that a perfectly uniform sample hides. Establish the intended body size before deciding how wide the column should become.

Understand what the ch unit measures

The CSS ch unit usually corresponds to the advance width of the zero glyph in the font in use. It is not an exact count of average letters in proportional text. A line containing many narrow letters will hold more characters than one dominated by wide capitals. The MDN length reference documents this font-relative unit.

.reading-column {
inline-size: 100%;
max-inline-size: 65ch;
margin-inline: auto;
padding-inline: 1rem;
box-sizing: border-box;
}
.reading-column p {
line-height: 1.6;
}

This is a useful starting rule, not a promise of exactly 65 characters. Because padding participates in the border-box width, the actual text area is smaller than the maximum box. If you require a precise text-area maximum, put the page gutter on a separate wrapper instead.

Compare the same 65ch rule in your primary family and a system fallback. They may produce different pixel widths and different line endings. Evaluate the resulting paragraph rather than assuming equal unit values create equal reading experiences.

Find the measure with controlled comparisons

Create three specimens around 50ch, 65ch, and 75ch. Keep font size and leading fixed for the first comparison. Read at least two full paragraphs in each column. Notice whether you lose your place at the return sweep or feel forced to restart phrases too frequently.

Next, adjust line height only for the strongest candidate. A wider measure may benefit from slightly more vertical separation, but do not use extra leading to rescue a column that is clearly too wide. The container architecture guide can help separate a page-wide grid from its narrower reading region.

Use normal body copy rather than only the opening paragraph. Introductions often have larger text and a shorter measure by design. Applying that same treatment to thousands of words can make an article unnecessarily long and fragmented.

Inspect alignment as well. Left-aligned Latin text leaves a ragged edge that makes natural spacing easier to preserve. Justified text introduces another variable: word spacing. The MDN text-align documentation explains the available alignment values, but visual judgment is still necessary.

Adapt the measure to smaller screens

A maximum width should not become a minimum. Let the column shrink with its container, preserving usable side gutters. At a narrow viewport, the comfortable desktop character range may be impossible without making the type too small. Preserve a reasonable reading size and accept fewer characters per line.

Do not shrink text to preserve measure. If a mobile paragraph becomes only 30 or 35 characters wide, inspect the complete context. Excessive page padding, a persistent sidebar, or a nested card may be consuming the available room. Correct those constraints before changing typography.

Watch long unbroken strings separately. A URL or identifier can overflow even when ordinary sentences wrap well. Apply an appropriate wrapping rule to that content rather than breaking every word throughout the article. For code blocks, intentional horizontal scrolling may be preferable to damaging the meaning of long source lines.

Test portrait and landscape orientations, plus a narrow browser window on a desktop. Viewport labels are poor substitutes for actual available space. A documentation pane beside a navigation rail can have less room than a phone held sideways.

Account for language and reader preferences

Character counts are language-dependent. Dense ideographic text, scripts with different spacing conventions, and mixed-script passages do not map cleanly to an English character guideline. Ask fluent readers to evaluate representative localized content. The W3C internationalization resources provide a sound starting point for understanding script-specific concerns.

Allow browser zoom and text enlargement to reduce the number of characters per line naturally. Avoid rigid widths in pixels paired with fixed text heights. A readable column should reflow, not crop the sentence or force continuous sideways movement.

Document your decision as a range with context: family, approximate size, leading, and content type. For example, an editorial article may use a 64ch ceiling while short supporting notes use a wider relationship to their smaller type. Such exceptions should solve a reading problem, not merely fill empty space.

For a final review, open a dense page and a sparse page from the same publication. Check that both still feel intentional. Keep related decisions in your typography documentation, and repeat the measure test when the chosen font or primary language changes. A measured specimen is more useful than a supposedly universal width copied from another design.

Key takeaways

• Treat character ranges as starting hypotheses, not rigid limits.
• Remember that ch measures a glyph advance, not average letters.
• Compare widths using identical paragraphs and fixed type settings.
• Let narrow screens reduce the measure without shrinking the text.
• Revisit the result when fonts, languages, or reading tasks change.