Improving readability through intelligently balanced typography

Gone are the days of manual typesetting to allow for faster engagement and readability. Through intelligent line breaking we can once again increase readability on the web and increase user engagement.

Guy Lepage
Universe Labs

--

Proper typesetting is an underestimated importance to readability. Since the early days of the web we have made drastic improvements by addressing things like leading, kerning, widows, orphans, etc. But one of the most important principles of typesetting is still lost on the web today. Balance.

Balancing type in typesetting has drastic benefits for users. People are constantly being bombarded and inundated with all forms of content, ads, images, video, etc. Research shows that if users are not captivated in a matter of milliseconds, they are more likely to move on to something else.

The average person gets distracted in eight seconds, with some being distracted in only a mere 2.8 seconds. And people form a first impression in a mere 50 milliseconds.

One of the best ways to engage a user is through imagery as images produce 650 percent higher engagement than text-only content. But in order to effectively communicate one’s message, text is necessary. Being able to quickly read headlines, leads and just general body copy can be the difference between engaging your audience and losing them.

Typesetting: A lost art

One of the typesetting art forms lost on the web today is the manual line breaks of hanging words, pronouns, etc. In the two examples below we can clearly see the difference that manual line-breaking to both headline and body copy can make.

Headline copy
Body copy

When we manually add line breaks in the appropriate instances, the content becomes much easier and faster to consume. But how can we accomplish this on the web?

In the English language, there are a finite number of variables that could possibly be achieved. Some variable sets can be easily applied such as any one, two or three letter word at the end of a line that follow a comma should break to the following line (excluding suffixes, etc.).

I would love to see a new balance CSS property introduced that would allow for this intelligent and automated form of line-breaking.

Comments? Tweet them @guylepage3.

--

--

Guy Lepage
Universe Labs

Entrepreneur, marketing, experiences, creative, developer, investor, alternative assets.