Justifying text by hand, now at 35 columns

Recently I read I just chose words carefully, by Marcin Wichary, and it fascinated me. It is about building a perfect right-justified margin by hand, choosing the right words to fit them into the 79 characters the terminal imposed.

Then a question kept spinning in my head: if today we read on phones, what would the equivalent width be?

The mobile calculation

Taking the typical viewport widths in logical pixels and subtracting about 16 px of margin on each side:

The direct heir to the "79 columns" is today around 35 to 40 characters at a comfortable reading size (16px), or 40 to 47 if you drop to 14px as in code blocks.

Here the two halves meet. A phone's physical width, those 35 to 40 monospaced characters, lands almost exactly on the lower bound of the readable range (30 to 40 CPL).

A demo

Every line is exactly 35 characters, cut by choosing the words, with no padding spaces. The same method, at the new width.

The HTML that shows it fixes the container to 35ch and respects the breaks with white-space: pre, so the browser does not touch the hand-made justification:

<pre class="text">I chose every word with utmost care
so that each line came out flush on
the right. No program, no tricks at
all, just the right words in a row.</pre>

pre.text {
  width: 35ch;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 16px;
  white-space: pre;   /* keep the 35-char cut exact */
}

At 16px, those 35ch take about 336 px, so they fit easily in any phone in portrait. Open it on your phone and you will see the right margin perfectly straight, without a single padding space.

I adapted the opening of Don Quixote into English with the same method, with an AI's help (editing the original text is sacrilege!). Open it on your phone and scroll to see how the right margin holds straight paragraph after paragraph.

Fun, don't you think?

Sources

• I just chose words carefully, by Marcin Wichary in his Unsung series: the story of rs1n and hand justification in monospaced text.
• Readability: The Optimal Line Length, Baymard: the comfortable range of characters per line and why it matters.
• Line length, Wikipedia: Bringhurst's rule (45 to 75, with 66 as the optimum) and the classic figures.
• UI Typography: Line length, Imperavi: the same recommendations applied to interfaces.
• Dyson & Haselgrove, Optimal Line Length in Reading: the sweet spot around 55 characters per line.