Yandex Sans. A New Typeface for Yandex
Here is the English version of the post. Original Russian version is here: пост на русском
Some of you may have heard about Yandex. For those who haven’t, here is a short introduction. Yandex is one of the largest internet companies in Europe, operating Russia’s most popular search engine and its most visited website. Some people may even call it “the Russian Google” which sounds very strange to us because Google is our direct competitor.
Yandex as a company appeared in 2000, three years after the launch of the web portal yandex.ru. At that point there were only 25 names on the new company’s payroll and all data Yandex processed could fit on a single server. Now Yandex has offices and representations in seven countries, employing more than 6,000 people.
Last April, at a practical conference that Yandex runs for designers we presented our proprietary typeface Yandex Sans. After working on it for two and a half years, we were pleased to finally share the results. In this post I’ll tell you why and how we did it, how it turned out and what’s next.
Why bother with a typeface?
Straight away I’ll apologise to the designers reading this post, because in part I’ll be discussing some things that are obvious to us. But there might also be non-designers among our readers, so I’ll start with the basics.
A typeface or font is one of the fundamental voices of graphic design, on par with colour, form and so on. It influences how the written information is perceived. At John Maedа’s TED talk, I saw a brilliant way to demonstrate this. It’s a story about form and content. Let’s take some fixed content and change its form — say, our content will be “Yandex search”.
This is how it looks written in Bukvarnaya (Textbook) typeface — the typeface that we use for all company communications at Yandex:
That’s how Yandex speaks. It’s our name, said in our voice.
But what if we said the same thing using this typeface?
You can’t deny it doesn’t look convincing. It’s barely legible. It’s too designerly. This kind of search may appeal to designers or hipsters, but that’s about it.
Now that’s serious. This kind of search may work for a megastore or classifieds section in a newspaper. Bargains galore! Grab a deal!
And how about this one?
It’s frivolous and silly; anything your can search for here will not be serious.
Now this one looks more like something out of a wedding invitation or menu in a posh restaurant. Suitable if oysters, truffles and champagne are what you need to find.
Let’s also try this one:
It reminds me of a gas station with a convenience store attached. Here you’ll search for the lot: car wash, wrenches and jacks, even cheap snacks.
It turns out that the same content, in different packaging, can convey a completely different meaning. That’s why it’s important to choose the right typeface. It has to put the right emphasis on the content, helping it to be correctly expressed, without distorting it.
So, what does Yandex say now, and how does it say it?
Taras Sharov, head of product prototyping at Yandex, spent loads of time collecting phrases featuring in our product communications to create a selection that would illustrate our very own language, our style and voice (in Russian). These are some typical representatives of our interface phrases, written in Arial (with English translations on the right):
Arial should be familiar to our Russian-speaking users — it’s the typeface that we use across all of our web services today:
Why Arial? For designers it’s a well-known story. Arial is based on the proportions of Helvetica, one of the most well-known and even cult typefaces of the 20th century. Helvetica appeared in 1957 under the name of Neue Haas Grotesk. If you missed the film “Helvetica”, at least watch this trailer (but of course it would be better to watch the whole film):
This typeface is ubiquitous all over the world. Countless brands use it as the foundation of their visual language. To put it simply, a living classic.
In the 1980s, when Microsoft chose the typeface for its Windows operating system, for some reason the company decided not to pay for licensing Helvetica, and instead asked the Monotype company to create their own version of the typeface. And so Arial was born — “a poor man’s Helvetica”, as one of our type designers aptly put it. I won’t delve further here into comparisons between Arial and Helvetica. Anyone who’s interested can easily take a look at the two together and see the similarities:
Arial’s indisputable advantage is its range of distribution — it’s preinstalled on almost every computer – and its huge set of glyphs, containing the letters of every conceivable language and practically everything you could need. But designers have issues about much else with this typeface:
- The shape and proportion of the letters is at times questionable — especially in Cyrillic, where lots of letters look plain odd.
- It lacks variety in the range of weights available on most computers — just regular and bold (and there is separate Arial Black). For modern interfaces this is insufficient. Different weights are needed—thin and light weights, semibold, etc.
- Poor legibility in small point sizes: due to the closed form of the letters’ apertures, below 12px the characters start to clot and readability suffers. In Yandex’s web interfaces, for the very smallest type we use the more open-apertured Verdana, which doesn’t have this problem.
Besides web interfaces, there are also mobile interfaces. Yandex makes applications for a variety of platforms, which means that in part we inherit the visual language of each platform:
On Android our “voice” is the rather cold-techno-engineering typeface Roboto, while on iOS it’s the very neutral San Francisco, and for Windows the distinctive Segoe, with which there are issues in Cyrillic.
And what about Yandex’s marketing messages? Taras’ selection is characteristic:
This is Textbook New (originally Bukvarnaya typeface), first developed in the Soviet Union in 1958 by Elena Tsaregorodtseva — specifically to be used in primers and textbooks, as the name suggests. This is a friendly typeface, familiar to anyone who experienced a Soviet (and partly post-Soviet) childhood. But it’s a bit incongruous for a high-tech company in the 21st century.
We got by with this typeface up to the present time, but we had long felt its limitations. We realised that:
- Arial and Textbook have expressive and technical limitations;
- we need our own voice when operating on someone else’s platforms.
This led us to think about what kind of typeface Yandex should have.
A typeface for Yandex
We came up with a list of requirements for our typeface.
- It should have its own look, distinct from competitors.
First and foremost, the competitors are Roboto, San Francisco and Segoe — the interface typefaces of Google, Apple and Microsoft, respectively.
2. At the same time, it should be calm, neutral and not too distinctive.
More about neutrality later. Other than serving Yandex communications through user interfaces and other texts, a typeface used across Yandex products would also have to be suitable for content not generated by Yandex. Here are some examples of texts from this category:
As Russia’s most popular search engine and it’s most visited website, Yandex has always maintained neutrality. Whatever content can become available to our users through our search algorithms, it is never edited or shaped in any way by people. From this point of view it was also important that Yandex’s personal typeface didn’t add any extra meaning — it had to be absolutely neutral.
Interestingly, as this requirement in a way contradicted the previous one, we had to find a balance between expressiveness and neutrality.
3. Express our values.
Neutrality is all very well, but the typeface still needed to have some kind of personality. When we tried to list emotions that we wanted our new typeface to express, we would normally come up with something like this:
· open;
· contemporary;
· intelligent;
· neutral;
· local;
· technological, but with a human face.
Which brought us closer to our destination. Despite being a contemporary high-tech company, Yandex has always been perceived by its users as warm and friendly. Not as a soulless robot.
4. Designed primarily for Cyrillic
Most Cyrillic typefaces were first created for the Latin alphabet. The Cyrillic version is usually drawn later. Sometimes this works fine, but not always. In our case, it was important from the start that Yandex should speak Russian with a native accent. For the typeface, it means the Cyrillic version had to be created alongside the Latin version — or even before it.
And, of course, the typeface had to include all the necessary letters and accents used in the countries where we operate, which include Russia, Ukraine, Belarus, Kazakhstan and Turkey; it had to have the rouble symbol, the hryvnia symbol and so on.
5. Readable, legible, suitable for any situation
Yandex’s interfaces and communications appear in diverse environments. Here are some examples of typographical situations for Yandex.Taxi (and it’s far from the complete range):
6. It should match Arial’s key measurements and proportions
This is a technical requirement, important for web interfaces. The page layout had to be preserved when our typeface substitutes Arial. It was also important that the text volume matched that of Arial. The number of characters in an average line had to be analogous to the same number in Arial so that text blocks (e.g., snippets in search results) wouldn’t be cut short.
7. It should have fonts in a range of weights
Here we’re talking about the thickness of the lines:
Even for web interfaces, it’s no longer enough to just have regular and bold. We need a wider range, with steps in between.
We could have looked for an already-existing typeface that satisfied all these requirements. But then our brand wouldn’t have a unique voice. And we’d also have to pay for licensing — hardly an insubstantial sum, considering our products’ audience size and the range of use. We decided to commission our own proprietary typeface.
The team
We needed to find a type designer with experience working on extensive typeface systems — either a Russian-speaker or someone able to work closely with Russian designers.
Ira Voloshina, who was head of design at Yandex at the time and the initiator this project, approached Ilya Ruderman who, in turn, recommended Christian Schwartz, a partner in Commercial Type.
In the world of type design, Christian Schwartz is a superstar. He has worked with Font Bureau (where the dream team includes such celebrities as Matthew Carter, designer of the Verdana and Georgia typefaces) and with Erik Spiekermann. His portfolio includes typefaces for Esquire and Deutsche Bahn, as well as an award-winning typeface system for The Guardian. His work has been featured in the Design Museum in London and the Smithsonian’s Cooper Hewitt National Design Museum in New York, and he was named among the 40 most influential designers under 40 by Wallpaper* magazine.
Ilya Ruderman, one of the most renowned Russian type designers, teaches at the British Higher School of Art and Design in Moscow. He studied type design at the Royal Academy of Art, The Hague, and went on to teach many Russian type designers. He worked on the type system of Afisha magazine, among those of other clients. Importantly, he has long collaborated with Schwartz and they’ve created typefaces together.
Working with Christian and Ilya as a lead designer was Miguel Reyes, a designer from the New York office of Commercial Type, who like Ilya studied type design in the Netherlands.
Mark Record took care of the technical side of things.
We were very fortunate to form such a dream team for our proprietary typeface project.
Many brilliant Yandex staffers also took part at different stages of the process. Irina Voloshina initiated the project. The already-mentioned Taras Sharov was among the most active participants, along with Danil Kovchiy and Sergey Fyodorov, Stas Polyakov, Ivan Semenov, Andrey Karmatsky, Misha Milnikov, Roma Iskandarov, cirrhoz, Настя Ларкина, Serezha Tomilov, Nikita Brovikov, Dima Sereda, Sasha Volodin and many others. Countless designers sent us corrections, comments and requests. I’d like to thank them all, but I’m afraid of forgetting someone, so I won’t try to mention everyone by name.
How we developed the typeface
I’ll cover the process briefly, touching only on the main milestones. A lot happened over the two and a half years of work, and covering it in detail would make this post too long.
Having studied the brief and a large number of layouts of our interfaces and communications, the designers proposed two variations provisionally called Flat and Round.
Flat is sharper and meant to feel more “technical”:
Round is softer and meant to feel more “human”:
After comparative testing and trying them out in interface and communications layouts, Round was declared the undisputed winner.
But the typeface still looked rather spiky, so the sharpness of the terminals was reduced in subsequent versions:
From the very start we worked on two versions of the typeface — Text and Display:
Seeing “Display”, some people might think it’s intended for display on screens. But that’s not the case at all. In typography, Text is for the main body of text, for smaller type and interface elements, where the main focus needed to be on the content, while Display is used in large sizes, for example in headlines. Display is visibly more distinctive, with a stronger personality, more suited to applications where the Yandex brand needed to play a stronger role.
For italic we sifted through a large number of variations of separate characters. Еspecially in Cyrillic. It took a long time to choose the form of the letters г, д, е, и, й, т, ц, ч, ш, щ, f. In the end, after countless experiments, we settled on this set:
We tested the typeface repeatedly, and decided it still wasn’t soft and friendly enough. Sure, it looked contemporary, but lacked the warmth and humanity of Bukvarnaya, for example. After trying lots of variations in the proportions and endings of the strokes, we reached a softer, friendlier version, with angled terminals, more variation is the widths of characters, and looser tracking in Display:
All the while, in parallel a great deal of technical work was under way—kerning, hinting, work on a number of fonts:
The result
The final (at present) version of the Yandex Sans typeface looks like this:
I think we succeeded at the main task of creating a contemporary, neutral typeface that’s distinctive from the main competition and rather precisely conveys the image of Yandex and the voice of our brand.
Here’s the typeface in its natural context:
We are already using the new typeface in the interface of Launcher for Android and on the Company page of our web site:
Now Yandex’s mission and the history of the company can be read in our “voice” — our new typeface.
And here are the examples of phrases from the beginning of this post, now in Yandex Sans:
You can see now that the typeface is quite recognisable and original, while at the same time remaining neutral and not adding extra meaning to the message or distorting it.
What’s next
The most interesting part is still ahead. As is well known, work on a product only begins with its launch. We still have to test Yandex Sans in our products for real. And while the typeface will very soon start appearing in our communications, you won’t see it on Yandex’s main page or in the search results for some time. However, we’ve made a start, and that’s the most important step.
