🏠 back to Observable

Markdown Width is Wrong

I would have expected the “width” for markdown text to match the global “width” value:

Real world example were visualizations use “width” and the markdown looks wrong:

Paragraph elements have a max-width of 640px because long lines are hard to read.

1 Like

Interesting I wonder if there is an acknowledged sweet spot (like the golden ratio) - 800px works well for me and indeed the full “width” is hard to read.

The recommended line length (per Matthew Butterick) is 45-90 characters, including spaces.

https://practicaltypography.com/line-length.html

By my count, I can get 74 characters (2.85 alphabets), which is right in the sweet spot.

3 Likes

This is highly dependent on the typography (font, font size, line spacing, contrast etc). One rule of thumb is 50-60 characters (which can be approximated via ex/en/em units), but you’ll find that in many situations these will still appear too narrow.

In general you’ll want to allow the reader’s eyes to track a line and easily jump back to the beginning of the next. See e.g.

2 Likes