How to Make Your Web Text Unreadable

Posted on 18 January 2017 by ColorWiki

In this blog post, we explore some of the ways that you can make your website text more unreadable, in order to capture your user's full attention.


Read without style

Readability is one of the most important factors when designing a web page. Having readable text greatly improves user experience and makes your site much more comfortable to use.

But why would you want that? Following web standards only serve to diminish your uniqueness. In this post, we'll be examining some of the ways to make your text look more unique and your content more immersive, and at the same time make it harder for users to understand and process your content. Because only those who are truly passionate should be allowed to view your writing.

Contrast

Contrast between colors is one of the main factors that affects the readability of a text. If you want to make your text difficult to read, choose poorly contrasting colors.

Black on white text is one of the most readable configurations. It's only the most common. White or light text on darker backgrounds is also readable and is often used on sites with a darker theme. In order to get the most unique look possible for your website, both these standards should be avoided at all costs.

Both of these examples produce rather readable text. In order to make your text truly unique and unreadable, consider some of the following styles:

  • Light text on light backgrounds
  • Dark text on dark backgrounds
  • Pick colors with awful contrasts

Typography

There are many readable web fonts available for free on sites such as Google Fonts, but why would you want to use those? Everyone does that. To truly show your originality as a webmaster, use fonts that aren't common.

To make sure your text truly stands out and captures the attention of the audience, pair fonts that don't work well together. Switch up your font styles often, so your user doesn't get bored while reading.


Font Sizing

If you really want to make certain terms pop and wow your users, you need to play around with font sizes.

Certain paragraphs carry more importance. It's a good idea to make these paragraphs extra large, so that your user does not miss them.

As for other paragraphs that you do not like as much, feel free to leave them in small font sizes, so that your user may feel the urge to skip them.

To really bring this technique up a notch, alternate between font sizes randomly. Without rhyme or reason.

The use of appropriate font sizes can make your text much more interesting to read. Don't worry if the user has to strain to do so - that's what zoom was invented for after all.


Line Height

A normal line height is easy for users to follow, as they are probably used to reading with proper margins. In order to make your text difficult to follow and read, don't conform. Set the line height of your paragraphs to arbitrary values. This allows you to better control the white space distribution of your website as well.

If you wish to make your text even more difficult to read, mix up line heights across paragraphs. This shows creativity and will keep your user more engaged.

For optimal effect, consider going with either extremes. Using an extremely low line height such that words in different lines intersect can be a sure fire way to make sure that your text difficult to read and users need to fully concentrate in order to decipher your text.


Letter Spacing

Using the default letter spacing makes text look boring. Using a wider letter spacing or a more narrow letter spacing makes your text stand out.


Text Styles

Certain text styles look fine when used in moderation, but it's easier to bring your point across when you use them excessively. Bolding, italicizing, and underlining text can be a great way to bring across your point.

To truly present your point to the user and provide an immersive reading experience, use text styles randomly. This causes the reader to pause at awkward intervals and disrupts their flow of thought, allowing what they just read to sink in. Consider combining multiple styles to ensure that the text becomes even more immersive.

Line height, letter spacing and text styles are some things that work well with defaults. In order to achieve a more unique look, play with all three properties a little. Mix it up, see what works best.

Link Text

Another way you can make your user stop to scrutinize every bit of your content is to mess with expected standards. One prime example is changing link text color. Making your anchor text color the same as your normal text color can make it difficult for users to identify links.

If you really want to bring your user in circles, change your link style such that even on hovering over links, the underline style disappears. To really bring it up a notch, even remove the pointer icon that your mouse changes to by default:

<style>
.hidden-link
{
 color: #333;
}

.hidden-link:hover
{
 color: #333;
 text-decoration: none;
 cursor: text;
}
</style>

This may result in your user accidentally clicking on (unknown) links. This is alright, because after all, you know what's best for them.


Using a variety and combination of these methods can allow you to make your text much more interesting to read. In the age of short attention spans and video content, employing some of these methods can make your web page all the more engaging for the user.

There are many other methods that allow you to make your web text more interesting to read. Experiment with colors, font sizes, and whitespace distribution to find out what works the best. What may work for one site may not work for another.

Do you know of any neat tricks to improve retention and make your site more unique? Share them in the comments below!