Give paragraphs a max-width

[alexanderwallin]

Great to see new docs in the makings!

One thing I think the old and new docs alike are suffering from is readability, the biggest problem being the number of characters per line (120+ on my 13" MacBook).

Attaching an example of paragraph width constraits and use of system font.

Before

After

p {
  max-width: 35em;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

[skipjack]

Hi @alexanderwallin, I definitely agree that we should have an optimal width for reading. However I just double checked the deployed version and found that even at our widest screen width we're under 960px (currently) for the content section. We are planning to bring that down for smaller screens, see #183, but isn't 960px the recommended max for readability?

Either way I'm fine with bringing it down a bit but I'd rather take down the max screen size, see _vars.scss, than individual paragraphs.

EDIT: After a little more research, I guess you're right that typically these days 560 - 720px (at a font-size of 16) is the recommended norm.

[alexanderwallin]

I think the key metric is the number of characters per line, where anything between ~45 and ~95 seem to be recommended. 720px results in about 120 characters per line on my machine.

Thanks for the quick reply!

[skipjack]

No problem, I'll play around with it and try to get it down in a clean way, probably shooting for 90 - 95 characters per line to start.

[skipjack]

Closed via 46dbf28. Taking the screen size down 1024 still leaves the sidebar with a decent amount of room and yields around 95 characters per line.