Line length is simply how wide your text is on a page - basically, how many characters (letters, spaces, and punctuation) fit on one line before wrapping to the next line. Getting this right is super important for websites because it affects how easily people can read your content. Studies show that the sweet spot is between 45-75 characters per line, with about 66 characters being perfect for most websites.
Long lines of text can cause fatigue as users struggle to find the beginning of the next line, while too-short lines disrupt reading rhythm by forcing frequent line breaks.
To manage line length in web design, CSS provides several properties and techniques. You can use relative units and maximum width constraints:
Control your content width:
.content {
max-width: 65ch;
margin: 0 auto;
padding: 0 1rem;
}
Enhance your typography:
p {
line-height: 1.6;
margin-bottom: 1.5rem;
}
Make it responsive:
@media (max-width: 600px) {
.content {
max-width: 95%;
}
}
The 'ch' unit is useful as it's relative to the width of the '0' character in the current font. So '65ch' means make this about 65 characters wide.