How to present text on your website

In the current world, you can have a website set up in mere minutes and modify it to your heart’s content without even uttering the word “designer” or “developer,” for that matter. I am all for independence and the ability to tackle things on your own if you can. So, let me give you a few tips on how to treat text on your website because that area seems to activate misguided creativity and, in essence, destroy the much-coveted user experience.

Should I centralize the text?
For text longer than a line (10-15 words), the answer is no. First of all, the copy becomes hard to read. Then, when it is scaled to a mobile screen, it becomes even harder. It can add additional scrolls to the length of the page, which might result in a higher drop-off rate. In English, users read from left to right and subconsciously expect each line to start on the left-hand side. It creates a familiar flow that is easy to track. Uneven lines throw users off, and even reading the most inspired words becomes laborious.

A centralized copy belongs on posters, invitations, obituaries, menus, and one-liners that are tactically placed to deliberately break the flow.

Should I justify my text?
NO! Never on the website! We read text differently on the screen than on paper. We have been conditioned to certain patterns when reading, and if we experience a mismatch, we either lose interest, or we work our way through, noting that it was a bad experience. Additionally, there is no viable way to justify copy on websites. Your text will inevitably end up looking like a mess with vast amounts of blank space between words.

To correctly justify text, you need to have control over many factors like letter spacing, line length, hyphenation, and a few others. Code will never provide the same control, especially considering how dynamic the web environment is. Web text must be flexible because it is being reformatted for each screen. This means the lengths of lines and the size of fonts, among other parameters, will change according to the device. Justified text belongs ONLY in print.

How many fonts are too many fonts?
The simple answer is, the fewer styles you use, the more consistent you look. The more consistent you look, the more professional you come across.

I am a huge proponent of finding one large font family that will allow for all sorts of treatment. If you want or need to use more than one, keep the count to two at most with a set of rules for how and when to use them throughout the page. Consistency improves legibility, and that, in return, improves the user experience. Overusing font styles will result in a communication mess and increase the bounce rate. A plethora of font styles belongs on font foundry pages.

What colour should I make my text?
It will come as no surprise that, again, we are going to look at what user data is saying. I am not going to name colours you should avoid but will ask you to pay attention to the contrast between the background on which the text is laid and the text itself. The better the contrast, the easier it is to read. Good contrast also means you will be able to reach people who have trouble reading.
Colour can send a message as well, so I would be careful using green, red, and amber without good context.

What is the best structure for text?
Keep the lines short, ideally between 15-17 words per line. Create distinct headlines, subheadlines, and neat paragraphs. Be concise and clear in your message, and avoid overloading the page with content. However, if you are dealing with a substantial amount of copy, ensure it has space to breathe. Break it up with occasional images or a relevant quote to maintain reader engagement.

Previous
Previous

Design in vogue

Next
Next

Logo Insights: Separating Fact from Fiction