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 reas­on, how­ever when design­ing respons­ively you need to keep a few things in mind. One of those things is the line length of para­graphs. Excessive line lengths can make read­ing dif­fi­cult as our eyes have to move fur­ther from the start to the end of each line, which can in turn lead to los­ing track of the line we were up to. We can use CSS3 multi-column lay­outs to pre­vent this from hap­pen­ing and it works in almost everything that isn’t IE (ref­er­ence).

There are two prop­er­ties we can use to define our columns; column-count (num­ber of columns) and column-width (min­im­um width of columns). As we are talk­ing about respons­ive design we won’t use column-count, it is too spe­cif­ic, 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 pre­fixes are required as column lay­outs are still a can­did­ate recom­mend­a­tion.

I use ems when defin­ing the min­im­um column size so that the lay­out adjusts accord­ing to the font-size. I have found 30em to be quite a read­able width but feel free to exper­i­ment for your­self. Don’t think we are done just yet though! There are a couple of oth­er prop­er­ties we can use to modi­fy our lay­out; column-gap (gap between columns), column-rule (bor­der between columns) and column-span (ensure an ele­ment spans all columns). These are fairly straight for­ward so I thought I would show them to you rather than tell you about them.

Tweet this