Improve Readability with Columns

Improve Readability with Columns

This post will take 1 minute to read.

Responsive design is all the rage at the moment, and with good reason, however when designing responsively you need to keep a few things in mind. One of those things is the line length of paragraphs. Excessive line lengths can make reading difficult as our eyes have to move further from the start to the end of each line, which can in turn lead to losing track of the line we were up to. We can use CSS3 multi-column layouts to prevent this from happening and it works in almost everything that isn’t IE (reference).

There are two properties we can use to define our columns; column-count (number of columns) and column-width (minimum width of columns). As we are talking about responsive design we won’t use column-count, it is too specific, instead we will use column-width. Here is the code:

.columns {
    -webkit-column-width: 30em;
       -moz-column-width: 30em;
            column-width: 30em;
    /* Each column will be at least 30em wide */

Note: Browser prefixes are required as column layouts are still a candidate recommendation.

I use ems when defining the minimum column size so that the layout adjusts according to the font-size. I have found 30em to be quite a readable width but feel free to experiment for yourself. Don’t think we are done just yet though! There are a couple of other properties we can use to modify our layout; column-gap (gap between columns), column-rule (border between columns) and column-span (ensure an element spans all columns). These are fairly straight forward so I thought I would show them to you rather than tell you about them.

Tweet this