Typesetting: The Silent Communicator in Effective Online Readability
Published on January 31, 2024
by Geraint Maglalang
Picture this: you enter a well-designed model unit. The beautifully designed unit catches your attention, with each element in perfect harmony, inviting and engaging. If done right, that’s how proper typesetting would look. It transforms your words into an immersive reading experience, effortlessly moving your eyes across the page or screen.
The best part? You don’t need a Ph.D. in design to master typesetting. Interested in making your online content better?
Before we embark on a journey together to discover how to captivate your audience, let’s quickly discuss what you’ll get out of it and why it’s worth your time.
You need users to stay on your website to improve Google rank. Session Time is how long a user stays on a webpage. The longer, the better.
None of us want to be greeted by a wall of text when we load a web page; we can do more to make users feel comfortable so they consume more of our content.
Here are 7 tips to get you started:
Tip #1: Choosing the right typeface
Different fonts have different styles and personalities. Choose one that matches your brand’s personality to set the tone you want to convey to your audience.
There are two main types of fonts:
- Serif – These fonts have little lines or extra strokes at the ends, like small feet at the bottom and tiny hats at the top. An example of this is Times New Roman.
- Sans-serif – These are plain and don’t have any extra decorations. There are no little lines or strokes at the ends. This font you’re reading right now is a sans-serif font.
However, most web-based content uses sans-serif fonts for online reading. This is because they are easier for our eyes to read, especially when there’s a lot of text content displayed.
Bonus info: If you look at high-end fashion brands today, like Burberry and YSL, did you notice how their logo changed from serif to sans-serif font? The once flamboyant logos of these luxury brands have shifted to a more modern and simple aesthetic.
Why did they change it? It could be because of digital compatibility and versatility. Sans-serif logos are more adaptable to many mediums and scales, from giant billboards to tiny smartphone screens.
Tip #2: Visual hierarchy by typography emphasis
Now, now, I know what you’re thinking, what are those? These are the font size, bold, italic, and underlined elements you might unknowingly encounter daily. We commonly use these to display text in a more organized way to draw attention to elements we want to emphasize first.
Here’s an example:
Then, this one last.
Then read this sentence second.
You will read this first.
By utilizing those elements, you can direct the reader to a key point you want them to divert their eyes to first. So, give it some thought next time, and don’t just write everything in a 12-point font size.
Speaking of font size, what is the ideal font size for online reading?
12 pt is the bare minimum, but between 14-16 pt is the sweet spot.
Bonus tip: Using different colors is another way to build text hierarchy. Pair it with a bold font weight, and it’ll surely catch someone’s eye.
Tip #3: Text alignment
Imagine if I write like this going forward. Everything is center-aligned, and your eyes keep shifting, trying to find where each line begins.
I write these long paragraphs endlessly while your eyes keep diverting,
you say to yourself, “wait, where am I now? “
I’m not saying you can’t use center alignment; you can, but preferably for shorter sentences. Having the alignment centered all the time can impact readability because each line starts and ends at different points, which can disrupt your reading rhythm. Center-aligned is generally better reserved for titles, headers, and decorative elements.
For long bodies of text and paragraphs, left alignment is the key. Having it left aligned improves readability as it’s easier for our eyes to jump between lines because we know there is a constant focal point on the left our eyes can direct to.
How about right-aligned and justified? Generally, using them only for stylistic purposes and very short lines might be better.
Tip #4: Line spacing (Leading)
Some people know it as line-height. It refers to the vertical space between lines of text.
Does this spacing
look okay to you?
It looks too wide,
don’t you think?
Having the spacing too wide or too narrow can also affect readability. So what’s the optimal value? Here’s how you can calculate it:
As a general rule of thumb, set the line spacing between 120% and 150% of your font size. If you look at your default word processing software, these are displayed as fractions or points.
120% translates to 1.2, and
150% translates to 1.5.
Easy.
Tip #5: Character line length
This refers to the number of characters in a single line of text, including letters, punctuation marks, and spaces. It’s a critical element that also affects readability.
A line length that’s too long can be difficult, as our eyes will travel a farther distance across the page or screen, which might make the reader lose track of the text’s narrative flow. Conversely, if it’s too short, our eyes frequently jump to the next line, causing a disruptive reading flow. A comfortable line length should be followed to maintain reading engagement and understanding.
What is the ideal line length, then?
The generally accepted length for online reading is between 50-75 characters. This range strikes a good balance between reading speed and comprehension. It’s neither too short nor too long to disrupt the reader’s reading rhythm.
Do note that the 50-75 character range mainly constitutes digital media. In print media, it will vary depending on the context and purpose of the text. These types of written materials are somewhat free regarding line lengths due to space constraints and formatting traditions.
Tip #6: Whitespace
This one doesn’t get the attention it deserves. Whitespace is important in creating space between and around elements to impose balance and harmony. Little or no whitespace can make your content look overcrowded and overwhelming.
With enough whitespace, the reader can process the information more comfortably, as they have more room to look around.
By implementing whitespace, we can also guide the user to specific visual hierarchical key content areas we want them to focus on.
Whitespace is not just a blank space. It’s a powerful tool in typesetting to enhance the user’s reading experience. And yes, it doesn’t necessarily have to be white if you’re asking; it’s about space.
Tip #7: Application and homework
Now that you’ve read this article, it’s time to implement these typesetting aspects into your online content. What good is it if you just read it and call it a day?
If your online platform has an analytics panel, and if you know a thing or two about analytics, take screenshots of the data before and after you implement them. Give it a few weeks and compare to see if there’s a change in your reader’s retention based on the analytics.