How Fonts Can Improve UX

The purpose of any text on your website or application is to help your users accomplish their goals.

You feel yourself more comfortable with an interface where text is readable and fonts in a harmony with other elements. It looks like all on their perfect places.

The internet still consists from about 80% of the text. It’s reasonable to make your text readable.

Fonts properties

Size and line height

The size and layout of your text can make a huge impact on the experience of reading.

People prefer to read a larger text, but we shouldn’t overdo and use the appropriate size for different cases.

I usually measure font size in pixels and usually it’s enough to make a regular text by 16px (for desktop devices). Of course, it depends on the specific font that you use. Sometimes, you can see a big difference in fonts with the same size.

I recommend you orient on Helvetica font. If you try Helvetica 16px and compare it with some other font, then try to reach a similar size of letters in another font that you have in Helvetica 16px. This was my trick some time before I started to do this intuitively in my work.

If you work on design for the mobile iOS app then you can double the font size that you use for desktop devices. For instance, 32px a good readable font on mobile screen. It can be smaller, but not smaller than 28px. This rule works for regular texts. So, headlines can be in 3 times bigger than on the desktop.

Line height should be approximately +10px bigger than a font size and more if you use big fonts. For instance, if you use 16px font, then line height can be 26px. Of course, different fonts have different height and sometimes we should customize line height to create enough space between lines to not overwhelm reader with a bunch of letters.

Long and short lines

We have a basic rule to improve readability of your text. The optimal line length of your body text on desktop devices should be approximately 50-75 characters per line, including spaces.

Have you ever noticed that sometimes it’s more comfortable to read text from your mobile device or tablet with a small screen resolution? This is because of the amount of text on one line. Since, desktop screens much wider and if the website uses almost all space in the width of a body text it’s hard to stay focused on the text.

However, if a line is too short the eye will have to travel back to often. Also, it’s more stressful to read too narrow text fields.

I have not forgotten about mobile screens. It should be about 30-40 characters per line. Again, it’s approximately and you can play with different length and text how it works.

Color

The difference between background color and color of fonts should be valuable. It’s good if font looks contrast, but at the same time it’s bad if it’s burning eyes of readers. So, would be great if we can find a middle way.

Once you’ve made your color choice, it’s absolutely necessary to test it out with real users in natural environments, on every device imaginable.

Serif vs. sans

Serif fonts have small lines at the end of each stroke; sans serif fonts do not.

In classic print typography, common knowledge is that serifs improve readability and reading speed by gently guiding the eye in a horizontal direction.

However, sometimes sans-serif works better than serif fonts. So, it should be tested.

Since, retina screens have higher resolutions that make serifs easier to look at it than on non-retina screens. Thus, typography trick starts working here.

Bold, italic, underlined

Use bold text to highlight important pieces of information. It’s more simple to scan content where we can notice bolder parts of the text to find what actually we are interested in and start read from this point. Or quickly scan all text, make a decision that this is a valuable information for you and start reading from the beginning.

Italic type is a cursive font based on a stylized form of calligraphic handwriting. We can use it in text examples, titles of books, albums, introducing or defining terms etc. It’s also help us to navigate through the text clearly. For instance, I often use italic fonts for quotations in the text.

Underlined texts are used rarely nowadays. We can still meet underlined hyperlinks on some website, but it’s not so common in a current UI design mainstream.

Use fonts as images

Try to look on structure of the text as on images and composition of elements. In that way you can make your content more digestible and interesting for users to read.

Since, dried text columns and paragraphs became more and more not so interesting for today’s spoiled users.

#sketch #sketchbook #illustration #type #typography #lettering #letters #design #watecolors #watercolor #painting #drawing

A photo posted by Digital Artist/ Retoucher (@kate_ignatenko) on


You can get inspiration from print materials and apply this experience in a digital world. The print industry is older than web and mobile apps and we can learn a lot from it.

Structure of a text and specific advices

Try to use a short sentence if it’s acceptable. Break text in many paragraphs with at least 3 lines in each.

Use meaningful headlines everywhere. They are usually bigger than a regular text and attract more attention. Thus, you can break your text on modules and improve the structure of a content.

Different levels of headlines mixed with a regular text make your text work much better.

Get feedback from real users

User test to find out how people react to your design choices.

A/B test to find out if changing your font makes a difference in your conversion rates.

P.S. I'm writing a book on remote work and business for creatives, which you can pre-order now. I have no comments area here, Tweet me your questions if you have.

Link it