All posts tagged copy

Creating Text Columns With CSS3

The recommended line length for a paragraph is generally 45-75 characters. With ever-growing monitor sizes, it is a continuing challenge for web designers to create readable copy. In this tutorial, I’ll show you how to use the CSS3 column-count property to create text columns on the fly.

Live Demo

Here’s What The CSS Looks Like

The CSS is actually pretty simple for this technique. We simply have to use the column-count property to set our columns. For the value, enter the number of columns you would like, in this case 2. You can also control the width of the column gap using the column-gap property. All you need to do is declare a width value in pixels, in this case 40px.

div { 
 -moz-column-count: 2;
 -moz-column-gap: 40px;
 -webkit-column-count: 2;
 -webkit-column-gap: 40px;
}

Continue Reading