This article is about how to properly work with typography when developing websites and interfaces. In my work with Junior and Middle designers I often come across the fact that guys make very simple mistakes when working with text. And today I will try to show by examples how not to make these mistakes.

Main topics:
Font as a tool
Choosing a font
Contrast
Accentuation and typesetting
Line length
Vertical rhythm
Caps and Axes
My top Cyrillic fonts

Font as a tool

The problem with choosing a font is that very often the font and the grid drive the designer into a corner and instead of being a tool with which the designer realizes his ideas, the font becomes a dead end. In fact, to deal with understanding why you need a font, you need to understand why you're using it. Typically we select images/fonts/icons and other design elements based on what we want to convey, what the final product needs to convey. When we use typography, it can have very different meanings. And more often than not, we choose typography to do some sort of stylization of the layout.

If you know you want to convey an emotion - you choose one font, if you need to tell about a movie - another, if it's an article - a third.

Sometimes you can take as a basis someone else's layout and choose the same font as the author. For example, if you make a poster for a movie, you can safely take the font from the poster suitable for your theme, if it worked well. In case you don't like it on the layout, you can always compare other fonts with it.

My main point on how to pick a font is to compose questions to the result I want to get:

What emotion the design conveys
What era it's from.
what it's about
product characteristics
The function of the task

Very often designers either insert a font as-is, or are afraid to move away from Helvetica, or want to jump in over their head and do something unrealistically cool. This is not a good practice, it is much better to take a mockup, think, analyze and make a design for a specific task (although it takes more effort and time). Do not overdo it, look for special ways, most of the good design solutions have already been invented.

Also an important point about stereotypes. In our head and in the head of most people there are already established patterns and stereotypes about many things, which allows us to play with their perception and select the appropriate fonts and designs. For example, if your project is about technology and devices from the 80s, you can use pixel fonts to enhance the immersive effect.

There are times when we don't need to express an emotion or an era, we can operate on form or plasticity. We can take the metaphor of lego shapes or some other abstract shapes, geometric and beyond.

Or we can score some special typography if the task of the layout is primarily functional. The main task of such functional fonts is to make sure that the end user does not pass by.

You have to realize that most of the time people used antiqua, because there was no alternative in the past. All print media, newspapers, articles were written in antiqua. Grotesque fonts appeared at the very end of the 19th century. Accordingly, if we have a desire to show that the product relates to mythology, historical affairs, that the product can be relied on because it has existed for many years, we take antiqua. It also works in the opposite direction, if the application we make should be associated with modernity, with innovation, then it is necessary to take the grotesque and do not resort to the use of antiqua.

Choosing a font

When choosing a font, the main mistake is to use these theses:

I choose a font to do something cool
I already have a cool font I will stick it in some layout
I sit on one font and it's fine
I'll take this font and see if I get lucky.

When we redesign a product or make it from scratch, we always have a field where there are people who have done this or something similar, or an entire industry (clothing, oil, computers) that has done something similar. And we already see that there are designs, there are fonts for this niche and in a good way we should take these ready-made solutions and ask the customer "what are we doing". Should the product be similar to the others or do we want something new, unusual, radical.

Conclusion. Two basic questions, after which you can proceed to the choice of font:

How others do it. Just need to find the projects of other designers, lay them out at least in figma, analyze, pick something for yourself.
We need to understand the strategy. Do we do like everyone else or not like everyone else. We are normal or strange.

Contrast

The next attribute of working with typography is contrast.  There are several contrasts, there is a contrast that relates to the letters themselves inside the headset (one stroke is thin another thick). But this term - completely useless knowledge, we are interested in a completely different kind - the contrast of typography on the layout.

In the contrast of typography on the layout a significant role is played by the mass of elements, in our case it is fonts. An important note is that the mass of an element is not the size of the element. That is, if in the layout there is a headline typed 100 pt font size and it is gray and to the right of it the headline typed 50 pt font size but it is graphite-black, their mass will be the same, although the size and significantly different.

The basic rule of contrast says: Big contrast - headings, small contrast - text. What it means. If the layout has a large contrast, people will read the headlines, and if the layout has a small contrast, their attention will fall on the text.

Accentuation and typesetting

Designers' pain. For some reason 70% of designers really either don't know or don't pay attention to one very simple thing. There are people who make fonts, type designers, when they make a font they usually have the option of making an accent font (which will stand in headlines) and will have a lot of features because of which the font may not read well in a small size or the option of making a set font, which will be much less complex in its form, much more readable and easy to use. And it's the designer's job to understand one simple thing: for headlines, an accent font, for typesetting, a set font.

And here I also want to point out that there are two fonts that, as soon as you see in the layout, you want to close and not look at, they are Montserrat and geometria. The most hackneyed fonts of all possible, remove them from your layouts, so more chances to get to good studios.

It is extremely important to make people's lives easier and for text to use typeset fonts, so makes life easier for users, gets some form of layout.

You can break the canons and make cool designs, but the problem is that most designers do not break the canons, they do not know what they do and for what.

Line length

A short thesis, but a very important one. Few people pay attention to the length of the line, why it is very important: because the length of the line is the length of your text block and it is considered basic that 6-7 words in a line is comfortable for reading people from the screen, because you do not have to run your eyes.

Vertical rhythm

Also lost knowledge. The basic thesis is that the text and text styles do not jump around the layout. That is, you choose 3-4 styles of headlines, 2-3 styles of text and use them in the layout, so that a certain rhythm of typography is created. Vertical rhythm is like a modular grid, this tool is always used at the very end of layout creation.

Switch and axes

Axes are invisible guides that are read in the layout. Part of the columns of a modular grid are usually axes. When we have axes, we can layout either by placing objects to the axis with the left edge, or right edge, or in the middle at all, or the so-called jestified (when both left and right).

If we talk about text block designer not Junior does not use the button jestified, it is always manually adjusted to make everything work nicely, so that there are no more gaps between words or letters.

My top Cyrillic fonts:

Favorit Pro
Akkurat LL Cyr
Bitum
Formular
Forma DJR
Golos
PT Root
Giorgio Sans
Grafier
GT America
GT Pressura
Inter
Trolla
Navigo
RF Dewi
Stolzl
Vesterbo
Suisse int’l

Why? Most of this fonts – accidental. I love PT Root it's the most interesting font, highly recommended. These fonts are all Cyrillic, they're all different expressiveness. They're all paid. But I always pursue the policy, if you work with a client, you need to make him pay for these fonts, and if he refuses, try to convince him that his site needs its own identity, at the very least change all fonts for free. I'll explain why - people do this work, they create fonts, few people pay for them, it's a rare job, why not pay for it.

In conclusion:

pump up your skills, read more about fonts, watch the works of famous designers, analyze. Then you will succeed too.

Typography in UI/UX Design