Developing the Corporate Typeface — Why Is It So Important and What It Took Us to Create It
Hello! My name is Stanislav Ignatev, and I am the Head of Product Design at X5 Group. We are designing interfaces for external and internal services, for example, for our “Paket” subscription service, for our Pyaterochka mobile app, for our digital platform Dialog.X5 for suppliers, as well as applications for our employees. In this article I would like to discuss how and why we created our own font.
How did the work begin
Surprisingly, it started with our rebranding. In 2021, X5 Group celebrated its 15th anniversary and revamped the brand.
During its life, the company continued its development and became the leader in food retail, fulfilling key customer missions related to food.
X5 Group is operating at all stages of the client path and cares about people and the environment. The company sets ambitious tasks, which would be impossible to tackle without unleashing the potential of the whole unified brand. That is why X5 Group pays a lot of attention to shaping the holistic image of the company and its services for its consumers, partners and investors.
The unifying force of the brand can only be beneficial when there is a common corporate identity that can be used by various departments and covers the entire ecosystem of B2B- and B2C sub-brands, services, products and initiatives.
The role of rebranding in interface design
We design interfaces for different digital services — both for our partners (Dialog.X5 platform) and for the company employees (a digital environment for categorical managers, digital products for Transportation, Imports, Real-Estate, HR departments and others). To maintain robust communications with employees, the company uses various channels, and interfaces represent one of the key aspects of such interaction.
Besides taking care of employees, partners and suppliers, which is a part of the corporate strategy, yet another important element of our brand philosophy is the smart use of products and materials.
In the case of design, we are talking about a more conscious approach to visualization of information. We “save ink”, we do not create designs just to create a design, and we always make our interfaces convenient. The uniformity of style helps us achieve a better recognition of the brand and allows our users to feel comfortable.
The brand visual language is based on essential constants, such as colours, shapes and typography. And since the X5 Group combines several brands, we use different accent colours in different retail chains. We will discuss colours and shapes in the following articles. Today I will dwell on the typography.
Let’s get down to the fonts
As part of rebranding, in our joint effort with the Linii agency and Paratype studio, we developed the two fonts — X5 Sans and X5 Sans UI. Their names are similar, like the fonts themselves, but UI in the name of the second one indicates that there are some significant differences between them.
X5 Sans
Modern laconic geometric grotesque
Distinctive features:
- Simple forms
- Semi-closed (near closed) aperture of the characters
- Letters with their own character, such as ‘б’, ‘ж’, ‘м’, ‘у’ (cyrillic symbols)
- font proportions are universal making it well-suited both for small and large sizes
- the font has four face — Light, Regular, Medium and Bold — which form one variable font
X5 Sans is used for the main communications of the company — in large headlines, short messages, etc.
X5 Sans UI
Modern laconic half-closed grotesque
When choosing the right font for our interfaces (which was before rebranding), we sought for uniformity in interfaces, and at that time we were not solving the problem of brand communication. So, we chose Roboto, and when working on our own type face, we had to take into account some restrictions.
The main parameter of the new font was its adaptivity. It was important for us, since, when transitioning to a new font face, we did not want to waste our time on correcting interface layouts in the production. We wanted this transition to be seamless.
X5 Sans was not suitable for these purposes due to differences in the proportions: the text lines would be too stretched in width. However, replacing the font in our interfaces for another one would be a huge and expensive task.
X5 Sans UI is used for texts in products interfaces. This font is as close as possible in its nature to X5 Sans, but at the same time it has the same proportions as Roboto.
Distinctive features:
- half-closed aperture of the font characters
- a noticeable difference between the glyphs of numbers and similar literal characters
- the same width of the em-box for digits to make the work with data in tables more convenient
- the new font is consistent with the previous font used in our interfaces so that the transition to a new one goes as easily and conveniently as possible
- the font has three variations — Regular, Medium and Bold — which form one variable font
Since the font is intended for tabular interfaces (and not just that), we paid special attention to hinting — the process of including programmatic data in a font file to help the software render a typeface legibly at small sizes.
In our work we use the Join design system to design a significant number of our services, so we managed to update the font very quickly:
- We updated typographic styles in Figma’s UI-Kit and in our React library.
- These updates became automatically available to all the dev teams that use our library.
This is why the transition was smooth and painless.
Recommendations
If you also want to develop a new font, then our recommendations might be useful to you:
- Try to be perfectly clear in determining the intended use for the font — thoroughly describe all its possible use cases and gather as much information as possible. The more accurately the task is described, the more likely and faster you will get the work concept of the new font.
- Decide on the necessary set of characters and the font structure in terms of glyphs.
- Provide resources for testing intermediate versions of the font (limited character set, basic glyphs, etc.)
If you have any questions on this topic, please ask them in the comments below. It would be also interesting to learn about your experience of choosing/developing the new font for your company.
