Text: Line length is too long

[jancborchardt]

Our line length currently goes up to ~105 characters, which is a bit much. Also, there could be a bit more whitespace to the sides:

With padding: 20px 114px; it looks like this with ~80 characters:

(Just as demo. Of course it doesn’t work responsively with the set padding, but max-width does not work because the scrollbars are on that container.)

From https://en.wikipedia.org/wiki/Line_length:

Traditional line length research, limited to print based text, resulted in a variety of results but generally for printed text it is widely accepted that line length fall between 45–75 characters per line (cpl), though the ideal is 66 cpl (including letters and spaces).

I used 80 chars cause lots of our target audience might use that as a standard. ;)

[juliushaertl]

@jancborchardt Setting a max width of 500px looks like this

It looks a bit to small to me, but I leave the decision up to you on this.

[jancborchardt]

@juliushaertl it looks pretty good to me. Let’s do it like that as a start, so we err on the side of readability. Then when we use it we can still adjust. Sounds good?

[skjnldsv]

What about wide monitors? Like 4k? How do you think we should handle that? :)
I have no idea really :thinking:

[jancborchardt]

Screen size has nothing to do with line length recommendations for readability. :) If the monitor is bigger, there’s just more whitespace. And higher resolution has no bearing on it either – see The 100% Easy-2-Read Standard by Oliver Reichenstein of Information Architects (makers of iA Writer).

Important is that it’s 80 characters per line. (We can think about changing the font-size depending on display, but we don’t do that anywhere else either.)

Also @juliushaertl the line-height is too little. What is it right now? It should ideally be something between 130% and 150%.

[juliushaertl]

I've limited the width on master. The line height is 150%

[jancborchardt]

Good stuff @juliushaertl! Looking real nice!