How Fonts Can Improve UX
The purpose of a text on your website or application is to help your users go through journeys and accomplish their goals.
You usually feel more comfortable using an interface where text is readable, and fonts are in harmony with other elements. It instantly feels like everything is in its place.
The internet, even these days, mostly consists of about 80% of text information. So it totally makes sense to pay attention to text positioning, formatting, and font or a combination of fonts.
Fonts properties
Size and line-height
The size and layout of your text can make a huge impact on the reading experience.
People prefer to read a larger text, but there is always a balance between too big fonts that don't fit screens or specific areas and small letters and paragraphs that is very hard to read. Of course, font size depends on the use case, and you might want to consider several options you can utilize in the design.
I usually measure font size in pixels, and as a rule, a paragraph text of 16px works well enough in most places and screen sizes. Sometimes, this base size depends on the font itself because some fonts can look smaller at 16px, and some can be larger than those common with this and similar parameters. You can easily see the difference in fonts if you try them in the same size and side by side.
I recommend you to Helvetica font as a default example. 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 16px Helvetica. I use this trick when in doubt that the font size is correct for my needs. But after a long time and lots of trials and mistakes, I mostly make this selection intuitively.
If you work on designing a mobile iOS app, then try to double the font size that you use in desktop views. For example, 16px can be a nice and comfortable size on desktop screens, but if you multiply it by, let's say 1.5 or 1.25, then 24px or 20px might look and perform better on mobile screens.
I've chosen 16px as a base because, actually, it's a starting point in CSS and HTML by default, and it's based on the 8px grid system. So if you do coding at least a little bit, you probably know about scalable values like em and rem.
So if you don't change the default base size in your layout, you pretty much can use values like 1em, 1.25em, 1.5em, and 2em. Of course, these are just examples, and you can totally change this if you feel it's right in your particular case.
Line height should be approximately +10px bigger than font size and more if you use big fonts. Also, you can use percentages and make line-height change automatically if you change the font size. Some design software allows to change line height to percentages, and I usually choose 130-150%, so the text has a perfect gap between lines.
For example, if you choose to use a 16px font, then the line height can be 26px or 21px (line-height 130%). Similar to font size, different fonts can have noticeably different line-height ratios. Sometimes, we must compensate for this by doing custom tweaks to create enough space between lines and make a reader's life easier.
Long and short lines
There is another basic rule that helps to improve the readability of 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 in one line. Since desktop screens are much wider and if the website uses the full 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 and forth too much. Also, it's more stressful to read super narrow text areas.
As for the mobile screens, the length of lines should be about 30-40 characters. That's a common recommendation that you can use as a base value and change it if the font you're using fits better if you have shorter or longer lines.
Color
A contrast of elements is important in design, but a contrast between text and background has one of the top priorities.
The level of contrast in your text can significantly impact the whole User eXperience. You need to make sure that text color looks sharp on the background you've chosen.
It's good if you can achieve a nice contrast value by choosing the right color for your font, but at the same time, it isn't good if the color combination is burning the eyes of readers. So, it would be best if you could find a balance.
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
Letters in serif fonts usually look more interesting and complex at the same time; 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. Also, it helps to recognize letters and quick read better if you're familiar with them.
We've been reading from screens for a long time already, and it was always easier to read texts with sans-serif fonts. Mostly because of small screen resolutions, we couldn't use all the benefits of serif fonts.
When retina and high-resolution screens became popular, we saw more serif fonts coming back to digital products such as websites and apps. Smaller pixels and sometimes higher refresh rates of modern screens make serif fonts easier to look at. Thus, this old typography trick can be used again.
There is no one solution that works for anyone, and in all use cases, so it should be tested.
Bold, italic, underlined
Use bold text style to highlight important pieces of information. It's easier to go through the content to see bold high priority information to find what could be interesting. So you can skip the non-essential part and start read from the point of interest. Or quickly scan all text, decide if it has value for you, and start reading from the beginning to get the most of it.
You might think that this way, nobody will read your precious words that you generously published in your blog, but if you think about it from another perspective, it's better to post stuff that people want to read one or the other way. It's better to read highlights or small parts of the text than see a huge wall of text, start feeling overwhelmed, and leave it to find more structured content.
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 websites, but it's not so common these days.
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 artistic, digestible, and interesting for your visitors and regular users. Of course, it depends on the format of your product or platform.
You can get inspiration from print materials and apply this experience in digital design. The print industry is older than web and mobile apps, but we can still learn from it.
Structure of text
Try to use a short sentence if it works for you. Break text into several paragraphs with at least 3 lines in each. It's much easier to read complex texts like scientific studies if you add some air (gaps) to your text.
Use headlines everywhere you can. They are usually bigger than the regular text and attract more attention. Thus, you can break your text into parts and improve the structure of your content.
Different levels of headlines mixed with a regular text make your text work much better. Also, you can easily create content as a list of headlines.
You can have several levels of headlines, which will help make your text even more digestible.
Get feedback from real users.
Test your content design using analytics tools to find out how people react to your design choices.
Try A/B testing and see if changing your fonts make any difference in your metrics like conversion or bounce rates.