On this page: Line length The ch unit Spacing
Semantic HTML is used to make code logical and accessible for browsers and to increase accessibility for readers with visual impairments. But it is also important to consider how easy it is to actually read the content on your pages.
How many times have you been reading an article on a site with lines that stretch all the way across the screen only to wonder whether you've missed a line - or to find that you're reading the same line again? Wikipedia is one such site; there is no constraint to the length of the lines.
It is tiring on the eye to sweep across a large span and then return all the way across the page to try and find the beginning of the next line.
As responsible web designers we can do something about that with thoughtful styling.
Typographers know about line length. In print it is acceptable to make lines of text between 45 to 75 characters in length, including punctuation marks and spaces between words. 65 characters is often referred to as the ideal line length. There is a great article on Smashing Magazine about this if you would like to read more.
Fortunately we have a way of ensuring our web pages meet this standard. In CSS it's called the ch unit - ch being short for character. On these pages I'm using a line length of 60ch.
ch is a unit like pixels or em. It is based on the width of the 0 (zero) character in whichever font you are using. It's easier to use than guessing the width of your text by using pixels or em to get it right. Line lengths will vary slightly from your chosen ch length as letters such as i and l are narrower than a 0.
A simplified way of using ch would be to make your containing element width: 60ch;. Fortunately in CSS you can declare this once as part of the width of your page and its final layout. You may wish to vary the ch unit according to the font you use as some fonts are more condensed than others.
The width of each page on this website, and the line length, is declared in the selector main in the stylesheet. I am using a grid layout with three columns. Note: the top banner, navbar, and footer are not included in the main part of the page as I want them to be full-width.
My markup is written like this:
main {
margin-top: 2rem;
display: grid;
/* next comes the important bit */
grid: auto / 1fr min(60ch, calc(100% - 64px)) 1fr;
}
main > * {
grid-column: 2;
}
This is a responsive layout. The declaration grid tells each row height to be auto (will expand as you add more content - and we can add as many rows as we like). We have two outer columns of 1fr each (read more about the fr unit on the CSS-tricks website). The middle column has width of 60ch and on small screens will display at 100% width less 64px (32px either side - this replaces padding).
The selector main > * is telling all children of the main grid to be placed in column 2 otherwise everything will be placed into the first available cell of the grid regardless of the column - and that will look a right mess.
It looks like this on a large screen:
And like this on a small screen:
You can read more about this layout on Josh Comeau's blog where he also describes how to break out of it for other elements, such as images, if you wish them to be up to 100% of the page width - like this:
Line height is also important, it is what separates the lines in a paragraph. Use the line-height selector to increase white space and make your text easier to read. On this website I'm using line-height: 1.6;, which is a good industry standard.
The default line height for paragraphs is 1 and looks like this. As you can see the lines of text look crammed together and make scanning the lines with your eyes more difficult.
Font size needs to be readable for most people without the need to zoom the page. Most schools of thought go for a base font size of 16px, from which you can change the size of all headers and paragraphs using the value rem. I prefer to use a base font size of 16pt, which is slightly larger than 16px.
And don't forget to include good spaces between your paragraphs using either margins or padding top and bottom.
There is a whole lot more about web typography on The Elements of Typographic Style Applied to the Web - a practical guide to web typography.
You can find links to useful web resources on the Resources page.
❧