Yandex Font - Yandex Sans

April 23, 2016 at Ya.Subbotnik for designers, we announced our own font Yandex Sans. We worked on it for two and a half years and are very happy to finally share the result. In this post I’ll talk about why we all thought of it, how the work was going on, what happened as a result and what will happen next. The post was written based on our story on Saturday.

Why even think about a font?

I’ll immediately apologize to the designers who read this post, because in some places I’ll talk about things that are obvious to us. There are a lot of non-designers among the readers, so I’ll start from afar.

A font is one of the basic “voices” of graphic design along with color, shape, etc. The font affects how the information typed is perceived. In John Maeda, in his lecture on TED, I spied a very obvious way to demonstrate this. This is a story about form and content. Let's take some content and try, having fixed it, to change the form . Let our content be the well-known motto of Yandex - "there is everything."

Here's what it looks like, typed in an Alphabet Headset - the font we use for communications:

That's what Yandex usually says. This is our message, uttered by our own voice.

* * *

But what if we used such a font for the same content?

Agree, it looks unconvincing. Hardly readable. Too designer. There are designers, hipsters and smoothies. But not at all.

* * *


This is a serious statement. This could be suitable for sale at Auchan or From Hand to Hand. Fly, buy!

* * *

And if so?

This is already some kind of lurkomorye, or maybe even the bottom of the Internet. There are all the jokes, free, without SMS.

* * *


This option is more like a wedding invitation. Or maybe on the menu in an expensive restaurant. There are all oysters, truffles and champagne.

* * *

But you can do it like this:

I think this is something like a gas station with a store. There is everything: washing, keys with jacks, and you can have a bite to eat inexpensively.

It turns out that the same content, enclosed in a different form, can convey a completely different meaning. That is why the task of choosing the right font is very important. The font should correctly emphasize the content, help it open without distortion.

And what is Yandex saying now?

Taras Sharov, the head of the prototyping group for new products and one of the authors of the program of our School of Design , wrote phrases that somehow caught him in our products and communications. The result was a very clear selection of our language, our style and our voice. Here, for example, are the typical representatives of our interface phrases typed by Arial:



By the way, Vlad Golovach said that, in his opinion, it is correct to call this font Ariel in Russian, since it was originally named in tune with the character of Shakespeare's The Tempest. But for now, with your permission, I will continue to write Arial.

In general, Arial should be familiar to the reader. And yes, it is this font that we use in our web interfaces today:



Why Arial? Designers should be well aware of its history. The arial is based on the proportions and drawing of the letters of Helvetica, one of the most famous and even iconic fonts of the 20th century. Helvetica appeared in 1957 under the name Neue Haas Grotesk. If for some reason you missed the Helvetica movie, be sure to watch at least this trailer (or better the whole movie, of course):



This is a headset that can be seen at almost any moment, almost anywhere in the world. It is based on the visual language of countless brands. In a word, a living classic.

When Microsoft in the 80s chose a font for their Windows operating system, for some reason they decided not to pay for a license for Helvetica, and instead asked Monotype to make their own version of this headset for them. This is how Arial appeared - “Helvetica for the poor”, as aptly expressed by one of our type designers. I will not go deep into the comparison between Arial and Helvetica. Anyone can easily make sure that they are really very close :


Christian Schwartz's slide shows an overlay of Arial and Helvetica

The indisputable advantages of Arial are the area of ​​its distribution - it is preinstalled on almost every computer - and a huge set of characters containing the letters of all conceivable alphabets and generally almost everything you can think of: for example, the sign of the ruble. Otherwise, designers always had a lot of questions for Arial:

• The proportions and the pattern of letters in some places raise questions - especially in the Cyrillic alphabet, many of whose letters look frankly strange.
• There are no variations in saturation (i.e. the thickness of the lines of letters). Only regular and bold (Arial Black still exists separately). For modern interfaces, this is already not enough, we need different degrees of saturation, light thin styles, bold, etc.
• Poor legibility in small pins. Due to the closed drawing of letters in sizes below 12px, the characters begin to “stick together” and readability suffers. In Yandex web interfaces, we type the smallest inscriptions with open Verdana, devoid of this drawback.

In addition to web interfaces, there are mobile interfaces. Yandex applications work on different platforms, which means that we inherit the visual language of the platform in terms of font:



on Android, our “voice” turns out to be a rather cold-technological engineering font Roboto, in iOS - the most neutral San Francisco, in Windows - the characteristic Segoe, in Cyrillic which has a lot of questions.

* * *

And how do Yandex advertising communications sound? A selection of Taras again shows the characteristic:



This is Textbook New, aka the Bukvarnaya headset, first developed in the USSR in 1958 by Elena Tsaregorodtseva at the Polygraphmash NPO for typing - indeed - primers and school books. A good font, familiar to everyone whose childhood passed on the Soviet (and a little post-Soviet) space. Own, dear. But somewhat strange for a modern high-tech company in the 21st century.

We have lived with this set of fonts until the current moment, but we have long felt its limitations. We felt that we:

• insufficiently expressive and technical capabilities of Arial and Textbook;
• I want to have my voice in the world of other people's platforms.

All this led to reflection on what the font of Yandex should be.

What should be the font of Yandex

We formulated the requirements for our font:

1. The font must have its own face, be different from competitors

Competitors are, first of all, Roboto, San Francisco, Segoe - fonts of Google, Apple and Microsoft interfaces respectively.

2. And at the same time be calm, neutral, not too characteristic

I'll tell you about neutrality in more detail. In addition to the interface and communication texts mentioned above, the main use of the font in Yandex products is to transmit information, news, data. Here are striking examples of texts from this category:



One of our most important values ​​has always been the lack of editorial policy. News is selected by algorithms, without human intervention. We are the mirror of the Internet, we reflect what is happening without adding our own assessment, position and any kind of distortion. From this point of view, it is very important that the font also does not add any additional meanings, it is extremely neutral.

It is curious that this requirement in a sense contradicts the previous one. We had to find a balance between maximum expressiveness and maximum neutrality.

3. Expressing our values

Neutrality is neutral, but the font should still have some kind of face. If we try to describe what emotions can be embedded in a font, we usually formulate something like this list:

• open,
• modern,
• clever,
• neutral,
• local,
• technological, but with a human face.

The last point is especially close to me. Although we are a modern high-tech company, our products have always been characterized by warmth and humanity. We are definitely not a soulless android robot.

4. Made primarily for Cyrillic typing

As you know, most fonts are first created for the Latin alphabet, and only later they finish the Cyrillic version. Sometimes it turns out to be done more successfully, sometimes less. For us it was immediately important that Yandex spoke Russian without an accent. With regard to the font, this means that the Cyrillic alphabet must be created simultaneously with the Latin alphabet or even earlier.
And of course, the font should have all the necessary symbols and letters used in the countries where we work: Russia, Ukraine, Belarus, Kazakhstan, Turkey, etc., the ruble sign, etc.

5. Very readable, legible and applicable in all modern environments.

Yandex interfaces and communications are found in a wide variety of environments. Here, for example, are some environments in which typography is found in Yandex.Taxi (this is far from a complete selection):

6. Coinciding in basic metrics and proportions with Arial

This is a technical requirement important for web interfaces. When replacing a font from Arial to ours, page layout should not go apart. It is also important that the font does not lose to Arial in terms of capacity (that is, the number of characters in the line of medium width), so that the information in the text block of a given size (for example, in the search results) fits no less.

7. Having several degrees of saturation

That is, the thickness of the lines:



Now, even for web interfaces, there is no longer just "bold" and "non-bold", gradations are needed.

You could look for a ready-made font that would satisfy all these requirements. But then the voice of our brand would not be unique. And we would have to pay a lot for licenses, given the size of the audience of our products and the range of applications. We decided to order our own font.

Command

We needed a font designer with experience working on large drawing systems. He had to be Russian-speaking or to work closely with a Russian-speaking designer.

Ira Voloshina, who started the project on Yandex, turned to Ilya Ruderman , who, in turn, recommended connecting Christian Schwartz .

As a result, we were very lucky to work on the font with Ilya and Christian with his studio Commercial Type .

* * *


Christian Schwartz in the world of font design is a real world-class superstar. He collaborated with the Font Bureau (they generally have a stellar cast, including, for example, Matthew Carter, font writer Verdana and Georgia), worked with Eric Shpikermann. Among his works are fonts for the American Esquire, Deutsche Bahn and a huge system of styles for the British newspaper The Guardian, which received international awards. Christian was awarded the London Design Museum Prize and has been included by Wallpaper magazine on the list of “40 Most Influential Designers Under 40”.

* * *


Ilya Ruderman is one of the most famous Russian font designers, a teacher at the British Higher School of Design . Ilya studied font design at the Royal Academy of Arts in The Hague, and later many Russian font designers studied with him. He worked on drawing systems for Posters and many other customers. What is very important, Ilya has been collaborating with Schwartz for a long time, together they have made more than one font.

* * *

In a team with Christian and Ilya, Miguel Reyes , designer of the New York office of Commercial Type, who, like Ilya, studied font design in the Netherlands, worked as a leading designer .

Hinting and font assembly involved Mark Record .

We were very lucky that we managed to assemble such a stellar team for the project.

From the Yandex side, a lot of great people worked on the font at different stages. The project was started by Irina Voloshina. More than actively participated Taras Sharov, whom I already mentioned in this post, Danil kovchiy Kovchiy and Sergey Fedorov, Stas plkv Polyakov, Ivan Semus Semenov, Andrey karmatsky Karmatsky, Misha Milnikov, Roma Iskandarov, Andrey Los, Nastya Larkina, Seryozha 3apa3aTomilov, Nikita Brovikov, Dima Sereda, Sasha Volodin and very, very many others. An infinite number of times an infinite number of designers sent edits, comments and suggestions. I would really like to thank everyone, and I am very afraid of forgetting someone, so I will not list everyone.

How they worked on the font

I will tell you here very, very briefly and only about the main milestones of the work. For two and a half years, there was a lot of things, and the post, it seems, is already getting too long. Ilya and Christian are going to write their posts in the near future, in which there will probably be more details about the process.

Having studied the brief and a large number of layouts of our interfaces and communications, the designers proposed two directions with the code names Flat and Round.

Flat - more contrasting and sharper, characteristic:



Round - more friendly and soft:



After trying on the layouts of interfaces and communications, as well as after comparative tests, Round was the undisputed winner.

The font, however, still looked rather “scratchy”, so in the next versions the finishing touches were softened:


cdn-images-1.medium.com/max /800/1*XWqkkUy888GRSMI2NsgD_Q.png »alt =" image "/>

From the very beginning we had two font versions in work: Text and Display:



Having seen the word Display, you might think that this version is for screens, but it’s not. In typography, Text is used for the main set, small pins, and Display - for large, for example, for headings. You can see that the letters Display are more characteristic, elaborate.

In italics, we went over a large number of variations of individual characters. For a long time they could not choose the form of the letters r, d, e, u, d, t, q, h, w, u, f . In the end, after countless trials, we settled on this option:



The font was tested again and again, but still seemed to us not soft enough and kind. He certainly looked modern, but he lacked the warmth and humanity inherent in, for example, Prikvarnaya. Having tried a large number of variations in the proportions and endings of strokes, we got a kinder version, which was taken as a basis:



In parallel, all the time there was an endless amount of technical work, selection of kerning pairs, hinting, work on several styles:

What happened as a result

The final (today) version of the Yandex Sans font looks like this:


I think we managed to solve the main problem - to make a modern neutral font that differs from the main competitors and quite accurately conveys the image of Yandex and the “voice” of our brand.

And here is the font fitting in the natural environment:


Yandex Sans in the layout of the search results. Author - Danya Kovchiy


Yandex.Music interface concept with a new font. Author - Danya Kovchy


The Yandex homepage concept with a new font. Author - Danya Kovchiy









Right now we are already using a new font in the interface of our Launcher on Android and on the About page :



Now the mission of Yandex and the history of the company can be read in our “voice” - our new font.

And here is what the examples of phrases from the beginning of the post typed by Yandex Sans look like:







Here you can also see that the font manages to be quite recognizable and distinctive, while remaining neutral and not adding additional meaning to the text without distorting the source material.

What's next

Many people ask if we plan to put the new font in the public domain. Now we do not plan this. Yandex Sans is the voice of our brand, the same as the Yandex logo. Therefore, it will be used only in our products and communications. Apple and Google distribute their fonts openly so that iOS and Android application developers can use them. We don’t have such a task right now, therefore it is not planned to give the font out.

We have the most interesting ahead. As you know, with the launch of the product, work on it is just beginning. We have yet to truly test Yandex Sans in products. And if it begins to appear very soon in communications, then you should definitely not wait in the near future on the Yandex main page or in the Yandex Sans search results. However, a start has been made, and this, it seems to me, is the most important thing.