Enhance Readability with CSS

Readability lies at the cornerstone of all good writing.

To make our writing readable we need to style our text with CSS.

Styling text is done to overcome the natural dissonance we feel between viewing the visual type and hearing our voice read the words as we “think along” with the sentences and paragraphs we are visually reading.

The goal of typography or text design in general is to chisel away at this dissonance so that the physical sensation of viewing is elided, and the joy of reading can be received without visual interruption.

Readability

To test whether or not your writing is readable, consider using a tool like read-able.com.

While a web document cannot be styled say like an InDesign document, I do have certain preferences for CSS that I use time and again.

The following is an example block of code I typically use:

 h1, p {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
 hyphens: none;
letter-spacing:  .05rem;
text-align:justify;
white-space:pre-line;
word-spacing:  .5rem;
}

Hyphens

Hyphen. noun. the sign -, used to join words to indicate that they have a combined meaning, or that they are linked in the grammar of a sentence, to indicate the division of a word at the end of a line, or to indicate a missing or implied element.

Hyphens generally make it harder to read. If you want to get rid of them use the hyphen property to declare a value of ‘none’:

 h1, p {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
 hyphens: none;
}

Text Alignment

To use a typical “ragged right” alignment use the text-align property to asign the value ‘left’ to align text on the left side of a paragraph:

 h1, p {
text-align: left;
}

To “justify” text, assign the value ‘justify’:

 h1, p {
text-align:justify;
}

Also, consider using the property ‘text-indent’ if you are looking for the more formal look of indented paragraphs. The value should be declared in units (px, cm, em, rem, etc.), and is supported in all browsers.

Spacing

Use letter-spacing and word-spacing properties to make your text more readable. This is as close as you are going to get to kerning.

 h1, p {
letter-spacing:  .05rem;
word-spacing:  .5rem;
}

Hierarchy

Your headers and menu navigation should stand out so that readers can vertically understand the hierarchy of your site.

To scale header and sub-header text, use percentages, em, and rem units that are responsive to varying screen sizes:

‘EM’ is a unit used to mean relative to the font-size of the element ( 2em means 2 times the size of the current font).

‘REM” is a unit used to mean relative to the font size of the root element.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.