User experience

Make your text legible

With illegible text you make your designs harder to use.

By keeping your text clear to the user, you are provided a better user experience. When you think with the UI side of your brain, yes, a lot of times the faint text, or the fancy script font looks nicer. But think of the user when you are designing, and think to yourself "Is this clear". Now here are a few tips to make your text legible when it comes to design.

Don't make your colours too faint

This is a good one, and it comes down to the colour ratio of your foreground colour, in this case the text, when in the context of a background colour. You need to ensure that the text is easy to distinguish, and for this you can typically use a contrast ratio checker online to help you with this.

Let us take a look at a bad and a good example of this.

Personally, if I'm checking for contrast ratios, I use this handy website: https://webaim.org/resources/contrastchecker/

Don't use script or display fonts for body copy

As much as you may think it might look good, or you still think it's readable to a user, it probably isn't. I would recommend that you stick to either a serif or a sans-serif font. Typically sans-serif is better for digital, serif for print.

Experiment with font pairings

Fonts can be used together to bring cohesion when used in a design. Font pairing is where you find fonts and use them together in a design. Typically, a designer would use one font for headings, and another for their body copy, this is to make it distinguishable on the page and give their headings a bit more pizazz.

There is a multitude of free resources to find good font pairings. Take a look at the list below for some helpful resources:

Use fonts weights to your advantage

As I stated in the above tip, sometimes you pair fonts, but what if you like using one font? When you are in this situation, I recommend the use of font weights to act like a different font. You will notice that on this website I am using a bolder weight for my headings and a lighter weight for my body copy.

Ensure font size is clear

I would recommend that you try to keep your fonts at a size that is readable. I find that anything below 14 pixels is typically too small for desktop, and you should never go below 16 pixels for desktop, your design will become hard to use (big no no).

Keep lines of text short

There are lots of studies out there that show there is an optimal length for your body copy, from what I've read it sits at around 45-66 characters, and that does include spaces. This obviously changes depending on font size, so use your eye. What you are aiming for is a comfortable line length, where you can easily go from one line to the next.

Subscribe

If you found this tip useful, consider subscribing with the form at the bottom of this page. If you didn’t find this useful, let me know what I could have done better at callum@uiuxtips.com.