Single Column

This is ideal

Whilst developing a useful fall-back for browsers that do not support CSS Multi-Column layouts, I felt that having a column that would remain at an ideal reading width, no matter what the device width, would be a nice option to include in my fluid layout.

Content Too Wide

If no further action is taken on this content and it was viewed in a device that is wider than a small desktop, it would be very difficult to read. If you take a look at this paragraph in such a device, then you will see the issue and realise that we need to do something to give the user better reading experience.

Ideal Reading Width

The ideal line length for text layout is based on the physiology of the human eye… At the normal reading distance, the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line.

Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line.

Quantitative studies show that moderate line lengths significantly increase the legibility of text.

Structure

Any block element with a class of single will suffice.

<section class="single">
  <h3>TITLE</h3>
  <p>PARA</p>
</section>

Presentation

All that is needed is to remain fluid up until the width exceeds about 40em (640px). At this breakpoint, a media query can be used to set an ideal reading width.

@media screen and (min-width: 40em) {
  .single {
    width: 33em;
    margin: 0 auto;
  }
}

Hyphenated Words

Additionally, especially at smaller widths, such as this single 33em column and smaller fluid widths, I believe hyphenating words also increases readability. This is very easy to apply with CSS.

/* Hyphenation */
p {
    hyphens: auto;
}