Much like a graphic designer would use InDesign to edit the layout of text in print, in this tutorial, I will show you how you can use simple CSS to make text readable on webpages.
Styling text is the art of overcoming 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 is to chisel away at this dissonance so that the physical sensation of viewing does not visually interrupt reading the text.
One of the most distracting visuals when reading a paragraph is the use of hyphens.
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 (as in pick-me-up, rock-forming ), to indicate the division of a word at the end of a line, or to indicate a missing or implied element (as in short- and long-term ).– Oxford Languages
Hyphens can be removed entirely by setting the value of several hyphen properties to none:
hyphens: none; moz-hyphens: none; ms-hyphens: none; webkit-hyphens: none;
the spacing between letters or characters in a piece of text to be printed.Oxford Languages
In typography, kerning is the adjustment of space between two individual letters. In print design, you may use millimeters or centimeters in a program like InDesign to layout these margins. In digital design, you use pixels or points to create vectored text.
When using CSS, it is best practice to use pixels (px) with em or rem values for classes or individual elements. The em unit is the height of the current element’s font-size, and the particular font being used. It can depend on your display monitor (i.e. points per inch or PPI). The rem unit is the font size of the root element of the document. For an in-depth look at the pros and cons see CSS-Tricks “Font Size Idea: px at the Root rem for Components, em for Text Elements”.
In web design, we have several CSS properties we can choose from to space letters. These are the letter-spacing and word-spacing properties. These can be written into the stylesheet or in-line using the span element if you feel a specific word or phrase needs better readability.
letter-spacing: .05rem; word-spacing: .5rem;
Some of the most widely used tools for determining readability generate a Flesch Kincaid Readability Score or provide a grammar check.
- Read Able, The Readability Test Tool
If you don’t know where you are going, you’ll end up someplace else.Yogi Berra