Events

60/40 reflow test

Morbi nec risus urna, quis lobortis ligula. Sed dolor mi, dapibus nec molestie eu, condimentum id lorem. Cras dapibus enim id libero iaculis hendrerit. Fusce non metus tortor. Curabitur risus diam, aliquam non volutpat at, cursus vel risus. Etiam justo risus, iaculis id commodo et, molestie vel felis. Pellentesque ac lacus libero. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Curabitur risus diam, aliquam non volutpat at, cursus vel risus. Etiam justo risus, iaculis id commodo et, molestie vel felis. Pellentesque ac lacus libero. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 1

Having the right amount of characters on each line is key to the readability of your text.

Indeed, it shouldn’t merely be your design that dictates the width of your text — the ability of users to easily read through the text should also be a critical factor.
Some fundamental exploration of line length and readability was conducted by Emil Ruder, a mid-twentieth century Swiss graphic designer.

Ruder concluded that the optimal line length for body text is 50–60 characters per line, including spaces (“Typographie”, E. Ruder).

Other sources suggest that up to 75 characters is acceptable.

Setting aside the specific number for the moment, what are the downsides of violating this range?

Column 2

Too wide: if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.

Too narrow: if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too-short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).

Column 3

Providing users with text line lengths of 80 characters or fewer is one step toward more readable text on a site.

However, it’s important to keep in mind that line length is only one component of text readability.
Additionally, in order to be in compliance with accessibility standards, text styling must be able to be set as follows:

• Line height (i.e., the spacing between lines of text): 1.5em (i.e., 1.5 times the font size)
• Paragraph spacing: 2em
• Word spacing: 0.16em
• Letter spacing (i.e., tracking): 0.12em

Column 1

Morbi nec risus urna, quis lobortis ligula. Sed dolor mi, dapibus nec molestie eu, condimentum id lorem. Cras dapibus enim id libero iaculis hendrerit. Fusce non metus tortor. Curabitur risus diam, aliquam non volutpat at, cursus vel risus. Etiam justo risus, iaculis id commodo et, molestie vel felis. Pellentesque ac lacus libero. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Morbi nec risus urna, quis lobortis ligula. Sed dolor mi, dapibus nec molestie eu, condimentum id lorem. Cras dapibus enim id libero iaculis hendrerit. Fusce non metus tortor. Curabitur risus diam, aliquam non volutpat at, cursus vel risus. Etiam justo risus, iaculis id commodo et, molestie vel felis. Pellentesque ac lacus libero. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.