Research and Document
1. The Concept of Line Length
Line length is the concept of how many characters are on a single line of text on a webpage before the paragraph / article continues to the next line. Longer line length can make it harder for people to read the text, and it's recommended that using 50 - 75 characters on a singular line is the optimal amount for a single line of text.
2. How Line Length Impacts UI and UX
Using research provided by baymard.com, they found that the experiences of the user can be dragged down by long lines of text, which can cause less engagement with the site, or even cause the reader to be overwhelmed by how much there is to read in a singular line.
3. How to Mitigate Issues of Line Length
There are several things to try to mitigate the issues caused by line length, with some good starting points being font size and line spacing, according to smashingmagazine.com. While these are both well known techniques, making sure that the size of the text is big enough to read properly and that each line is spaced out a fair amount can keep a reader engaged in the website's contents.
Solution(s)
There are multiple solutions using CSS that help set a specific line length and improve the readability of a webpage. Benmarshall.me uses properties such as 'max-width', 'text-overflow', 'width', and 'white-space' on a paragraph element to make sure that the text doesn't go longer than it's parent container, whether that be a div or not.
Another solution is proposed by user DK-TBS on Github.com, where they lay down a blanket rule in the CSS putting the 'max-width' property on any element of text that needs to be trimmed down, such as a paragraph or list element. They make sure to use the unit of 'em', which does work, but another way to do it could involve the 'vw' measurement, which uses a precentage of the view-window as reference (100vw is 100% of the view window).
While both of these solutions do work, I would simply use the 'width' property to set a defined width as a percentage of the view-window, and utilize the parent container and modify it if need be.
Summary
Overall, the concept of line length was very interesting to look into, as it didn't seem like a big deal when I first thought about it, but now doing further research, line length can definitely affect how a user's UX on a website. However, there are several ways to mitigate and even solve this issue with the use of some CSS, which is helpful to both the web designers who want more web traffic, and the end users, who have an easier time reading the site.