The CSS ch Unit: Typography-Aware Widths

What is ch?

ch is a CSS unit based on the width of the “0” character in the current font.

11ch = width of "0" character
272ch ≈ 72 zeros wide ≈ ~70-75 characters of typical text

Why Use ch Instead of px?

The key difference: ch scales with font size, px doesn’t.

The Problem with Fixed Pixels

1User A (16px font): 720px → ~72 chars/line ✅
2User B (20px font): 720px → ~58 chars/line ❌ cramped
3User C (14px font): 720px → ~82 chars/line ❌ too wide

Users with accessibility settings or zoom get a degraded reading experience.

The ch Solution

1User A (16px font): 72ch ≈ 720px → ~72 chars/line ✅
2User B (20px font): 72ch ≈ 900px → ~72 chars/line ✅
3User C (14px font): 72ch ≈ 630px → ~72 chars/line ✅

Characters per line stays constant - which is what actually matters for readability.

Optimal Reading Width

Research shows 50-75 characters per line is optimal for comfortable reading:

• Too wide (>80 chars): Eyes lose track when jumping to the next line
• Too narrow (<45 chars): Constant line breaks disrupt flow
• Sweet spot (~65 chars): Comfortable scanning, good rhythm

Practical Usage

 1/* Article content - optimal reading width */
 2.article-content {
 3    max-width: 72ch;
 4}
 5
 6/* Narrower for mobile */
 7@media (max-width: 768px) {
 8    .article-content {
 9        max-width: 100%; /* Full width, padding handles margins */
10    }
11}

When to Use ch

The ch unit shines specifically for text content width where character count matters.

TL;DR

Use max-width: 72ch for article content. It respects user font preferences while maintaining optimal readability - the typography-aware way to set width.