The script manipulates the text in the left column below. Resize the window and for contrast compare it to the column on the right with fixed line-spacing.
For details and discussion see Flex CSS with JavaScript for better reading.
Where text content is the most important consideration, it is desirable to minimise inappropriate interruptions or distractions to the task of reading. Appropriate interruptions are elements of reading itself, for example: punctuation, new paragraphs or the contrast between a heading and the text around it. These things can all contribute to slow down reading, but used well, they serve to assist the reader’s comprehension of the text.
To read text that is, by obvious necessity, wrapped over multiple lines, your eyes must skip back quickly at the end of each line to the start of the next line. Common sense tells us that longer lines of text will minimise the frequency of this interruption. Trouble is, the more characters in each line the further this leap becomes. Consequently the more care and time your eyes must take to ensure you don’t skip back to the incorrect line. Either way, making the text column too wide or too narrow will interfere with smooth reading. Of course, like most things, the answer lies in a happy place between these two extremes.
If you can’t control the text width the next best thing you can do to compensate for an overly wide text measure is to increase the leading. You may call it line spacing or, if you know your CSS, line-height. This clears the path along which your eye travels when seeking the next line to read. Again, all things in moderation, more is not necessarily better. If excessively deep, this space will create a barrier between the lines rather than just a separation.
On a printed document, a typographer will typically take great care to get the balance right between these factors. To make the same decisions for text displayed on a computer involves more compromises - the same control is simply not available. Typically when you change the width of a column of text on your computer only the width is changed; rewrapping the text onto shorter or longer lines. Your software normally doesn’t include any mechanism to make compensating changes to any other text attributes, such as lines spacing. Perhaps it should!
Where text content is the most important consideration, it is desirable to minimise inappropriate interruptions or distractions to the task of reading. Appropriate interruptions are elements of reading itself, for example: punctuation, new paragraphs or the contrast between a heading and the text around it. These things can all contribute to slow down reading, but used well, they serve to assist the reader’s comprehension of the text.
To read text that is, by obvious necessity, wrapped over multiple lines, your eyes must skip back quickly at the end of each line to the start of the next line. Common sense tells us that longer lines of text will minimise the frequency of this interruption. Trouble is, the more characters in each line the further this leap becomes. Consequently the more care and time your eyes must take to ensure you don’t skip back to the incorrect line. Either way, making the text column too wide or too narrow will interfere with smooth reading. Of course, like most things, the answer lies in a happy place between these two extremes.
If you can’t control the text width the next best thing you can do to compensate for an overly wide text measure is to increase the leading. You may call it line spacing or, if you know your CSS, line-height. This clears the path along which your eye travels when seeking the next line to read. Again, all things in moderation, more is not necessarily better. If excessively deep, this space will create a barrier between the lines rather than just a separation.
On a printed document, a typographer will typically take great care to get the balance right between these factors. To make the same decisions for text displayed on a computer involves more compromises - the same control is simply not available. Typically when you change the width of a column of text on your computer only the width is changed; rewrapping the text onto shorter or longer lines. Your software normally doesn’t include any mechanism to make compensating changes to any other text attributes, such as lines spacing. Perhaps it should!