Yes. The majority of text content on the screen should adhere to usability best practices. No questions asked.

But. There are times when you want to add text purely for decorative purposes, and that’s all good. We don’t want all of our designs falling into the realms of bland-land.

It’s OK to pop in the odd element purely for decorative reasons as long as not having that element there at all would affect the user experience in any way.

When using decorative elements that are purely visual and not important to the user experience make sure to call on those ARIA Roles such as aria-hidden=“true” when it comes round to Development.

Using the aria-hidden attribute.

Buttons. Notifications. Two separate but essential elements in your UIs.

If you can, always try and make sure that your users can tell them apart quickly and easily when scanning your site or app.

Buttons, in most cases, will take priority, so make sure they’re the most prominent item on the screen and easily distinguished between other elements (i.e. notifications).

We all love a good drop-shadow from time-to-time right?

They can serve as subtle but powerful visual cues within your designs when used in moderation.

But. Subtlety is the name of the game here.

Shadows in the real world are, the majority of the time, almost unnoticeable, and so you should mimic this kind of behaviour in your UIs.

Lay off the heavy and dark shadows, and dial down the opacity to achieve something a little more subtle and lifelike.

Using All Caps in moderation within your designs is all good.

Applying All Caps to certain text elements can help you achieve some variety, and contrast between other text elements in your design and enhance the overall visuals you’re trying to present.

If you decide to style things up with a handy dose of All Caps, try and make sure you choose a suitable Typeface with a tall x-height and in a heavier font-weight to enable optical clarity for the user.

Breadcrumbs, breadcrumbs everywhere.

Used frequently on content-heavy sites, but not always shown the love they deserve.

With the smallest of tweaks, you can make sure that the user can quickly pinpoint where they are in a site and where else they may need to go.

This is especially useful if they’ve jumped to somewhere deep in a site via the use of Search for example.

Always try and make sure that the last item in the chain is visually different from the rest. And the links, well, try and make them look like so.

Give breadcrumbs some love.

Highly saturated colours (brilliant blues, reds, greens etc.) can look great on a site, but when overused, they can be tiring for the user’s eyes, mainly when used with text-heavy content.

Use them in moderation when you can, and try to combine with muted colours (a tint or shade variant) of the saturated colour to avoid that dreaded eye fatigue.

Using this method can also direct attention to the saturated colour and make the most important content front and centre, with the more muted colours taking a less prominent role and giving your user’s eyes a little rest.

Always remember though, that readability and accessibility should be the top priority when choosing colours.

Don’t forget to reach for a WCAG colour contrast checker such as Contrast when you’re looking at trying out colour alternatives.

When adding icons to your designs, try and choose an established icon that represents the action that’s about to be taken.

Choose an icon that conveys the correct meaning and functionality, as anything else invites confusion and becomes a cognitive obstacle for the user.

Don’t be too rebellious with those icons.

Among the many tried and tested Design Principles available (Contrast, Space, Repetition etc.), there is one that is key in helping you produce clearer UIs for your users.

Proximity.

Proximity is simply the process of ensuring related design elements are placed together, signalling a relationship between one another, which helps speed up the user’s cognition when scanning through your Site or App.

When working with Type, using a 4pt Baseline alongside the ever-versatile 8pt Grid can bring a much more harmonious vertical rhythm to your designs.

You need to align your Type to a Baseline Grid of 4, using a line-height value that is a multiple of 4 (16, 20, 24, 28 etc.)

Why 4? Well, I’ve found that scaling in multiples of 8 in the past is just not as versatile when working with specific text sizes.

4pt Baseline Grid + 8pt Grid = Sweet Vertical Harmony.

As opposed to the long-form body text, which needs ample line-height for increased legibility, headings are usually much shorter, so you can ease back on the spacing a little.

The recommended line-height for headings is usually around 1 to 1.3 times the size of the text, and the larger you go, well, the less line-height you need to add to the mix.

Go line-height-light with your Headings.

Analogous colours, also referred to as adjacent or neighbouring hues, are among the most harmonious of colour schemes and can help you greatly if you’re having trouble picking colours that play together nicely.

A set of adjoining hues consisting of primary, secondary, and tertiary colours can help you create a simple, bulletproof colour scheme quickly.

Go Analogous when you need to bring colour harmony into the mix fast.

You can achieve clarity and usability within your designs by maximising the signal and minimising the noise, which in turn produces a high signal-to-noise ratio.

You can accomplish this by ensuring that relevant information (signal) is presented efficiently, and irrelevant information (noise) is reduced or removed altogether.

Cut out the fluff. Make things clearer. Increase your signal-to-noise ratio.

Using a heavier font-weight and caps can come across a little formal and shouty occasionally.

Try choosing all-lowercase and a lighter font-weight.

Using something like all-lowercase copy can present a more informal, and approachable message when working on specific projects.

Always remember though to use some kind of colour overlay between the image and text to achieve a stronger contrast.

When working with type, elements don’t need to scream “Look at me!” all the time.

But they do need to have a balanced hierarchy in place.

Just subtle adjustments via weight, size, and colour are all it takes to achieve this.

Doing this allows the user to scan and find essential elements, avoiding any confusion in the process.

When setting dark text against a light background, you can, occasionally, opt for a lighter font-weight.

When it comes to the reverse: light text > dark background.

It would be best to look at fattening up the font-weight a little, especially for long-form copy.

Aim for the best legibility, and avoid straining your user’s eyes.

Try to choose the appropriate typeface for the content you’re presenting.

Users are savvy and have an intuitive sense when content is talking to them and when it’s not.

The correct choice of typeface is vital in making your content speak to them directly and on an emotional level.

For me, I try to stick to the 1 Typeface rule whenever possible.

If the project demands it, I recommend maxing out those typeface-combos at 2.

No more.

Combining typefaces well can be tricky for the inexperienced.

Go easy on yourself, and don’t just add another typeface just because you can.

Using a maximum of 2 and a combination of weight, size, and colour can bring instant visual harmony to your designs.

Are you working with short lines of text in all-uppercase?

Well…

It’s a good idea to increase the spacing between those letters to achieve better legibility for the user.

Doing so makes the words easier to read and process because the letters are more distinguishable from one another.

Just small increases in spacing between letters are all that’s needed to improve legibility and add a touch of polish to your uppercase type.

Thanks for reading the article,
Marc Andrew.