← All posts

Tutorials

The perfect reading column width

17 May 2026 · by JustZix Team

If a single change could improve every article you read, it would be column width. Typographers call it the measure, and getting it right is the difference between effortless reading and constant eye fatigue.

The 66-character rule

Decades of typographic practice point to roughly 50 to 75 characters per line, with 66 as the sweet spot. Too short and your eyes jump constantly; too long and the return sweep from the end of one line to the start of the next becomes unreliable. Most websites stretch text edge to edge on wide monitors, landing well past 120 characters — far outside the comfortable range.

Measuring in ch units

CSS gives you a unit built for exactly this job. The ch unit equals the advance width of the 0 glyph in the current font. A max-width of 66ch therefore tracks your font choice automatically:

article,
.entry-content,
main .content {
  max-width: 66ch !important;
  margin-inline: auto !important;
}

Because ch is font-relative, the same rule keeps a good measure whether the site uses a condensed sans or a wide serif.

Keep wide elements wide

Capping the article column should not trap your images and code inside it. Let specific children break out to full width while text stays narrow:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
}
article figure,
article pre,
article table {
  width: 90vw !important;
  max-width: 90vw !important;
  margin-left: calc(33ch - 45vw) !important;
}

The negative margin re-centers a full-width child relative to the narrow text column. Tune the numbers to taste — the goal is media that breathes while prose stays disciplined.

Responsive padding

On a phone, a hard max-width is irrelevant but edge padding matters. Combine both so the rule works everywhere:

article {
  max-width: 66ch !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

The clamp() gives small screens a comfortable gutter and large screens a generous one, without a single media query.

Pairing width with rhythm

Width works best alongside generous vertical spacing. A narrow column with tight leading still feels cramped. Add this companion block:

article p {
  line-height: 1.7 !important;
  margin-bottom: 1.5em !important;
  font-size: 1.15rem !important;
}

Apply it as a JustZix rule

Create a rule, set a broad URL pattern such as *://*/* if you want it everywhere, or scope it to a specific publication. Paste the width and rhythm blocks into the CSS pane and save. Visit a few articles and nudge the ch value until lines feel natural — most people settle between 60ch and 72ch.

A correct measure is invisible: you simply stop noticing the layout and start absorbing the words. Explore our ready-made examples for tuned presets, read the companion guide on building a full reader mode, and download JustZix to start measuring.