Line Length

Summary

Just for fun, I will briefly mention one resource I didn't use was pretty difficult to read due to varying designs, which I found ironic. Anyways, Rocketspark sums up this concept in one sentence: "When you look at the work of the best web designers in the world, there’s a simple design rule they never break — optimal line length." 50-75 characters is the generally accepted range, including spaces and punctuation. Baymard talks about this from the perspective of the mind. It will be energized to keep reading as long as reaching the next line doesn't happen too fast or take too long. Consequently, incorrect application could lead to users leaving the site. People read with different intentions, but they all end up scanning an F-like pattern, so the site should build around that.

Solution

Thinking about the F-shape, I feel like a good start would be to keep paragraphs short as well as style them. Besides line length, typography supports changing line height and font size in conjunction. You need to be careful in changing the values though because font size and line height should both scale with line length. Three CSS changes to keep track of are fonts, max-width, and default values. Choosing your font should always come first since no fonts are ever the same size, which would simply invalidate your other size values if you chose to set those first. Then, when setting max-width, you should use relative units so that a certain number of length units would always match character width, no matter the device size. Finally, not all default CSS values are always appropriate for your site, and in this case, line-height's default value of 1.2 can lead to the letters jumbling together without enough focus.

Resources

  1. Rocketspark
  2. Baymard Institute
  3. Smashing Magazine
  4. Pimp My Type