Proto Grotesk in use: IStories

Why a peculiar grotesque works well with investigative journalism, how a good reputation brings unfortunate clients, what happened to type and web design over the last five years — in the words of Alexander Gladkikh (Charmer)

August 31, 2021

In the recent months, Russian civil society and (the remaining) independent media have been under unprecedented pressure from the regime. Political opposition leaders are being imprisoned or forced into exile, NGOs, publications, individual activists and journalists are being fined and/or labeled as foreign agents. The status implies endless scrutiny from the officials, specifies countless bureaucratic routines for its objects (such as an obligatory labelling of any posts on social media as such of a foreign agent), and effectively means social alienation for every object. This August, the registry of ‘foreign agents’ was updated each Friday — Roman Anin, the editor of IStories, was first included individually, and weeks later it was the whole publication. Read more about the crackdown in the NYT.


sasha

On Proto

Important Stories (aka IStories, or Важные Истории) is a small independent media that specializes in investigative journalism. The guys wanted something beautiful and distinctive, and gave us full freedom — that is, no clear criteria. A number of references that we were still provided with were foreign media, different both in terms of their topics and visually. It was mostly newspaper layouts, with no explicit references to investigative journalism.

And then we thought — why not put a slight emphasis on detective aesthetics, the atmosphere of a classified archive. We looked through plenty of spy movies posters and covers of spy novels of the 1960s, 1970s — we wanted to make the Web have this analogue feeling, faded colours, nearly tangible textures. So, we needed a monospaced font for small details, referring to a typewriter, a reading-friendly typeface — and something eye-catching, display, not over-exposed in the Russian market.

And that’s how we run into Proto Grotesk.

IStories are published in Russian, but selected stories are translated into English

Inner pages

It has a strong personality. It’s not as if it’s incorrect — though it has eye-catching details that create something unusual. It seemed reminiscent of old newspapers, with slurred letter edges — very disciplined, but giving this feeling of having been printed a long time ago. It fit perfectly well our headlines, cards, and in general supplemented our design wonderfully. Proto could really be used to set the title of an old spy movie — slightly wear it out, making it look old, and it would be exactly as if it was made back then.

cards

The Kartoteka page is where stories are grouped into thematic stacks: The Roman Anin Case, The Case of Russian Orphans, Le Monde Luxembourg Investigation, etc.

cover

The Global Money Laundering Case, one of the stacks in the Kartoteka

Proto Grotesk in highlights and other inset boxes

As for the logo, we wanted to give it an early digital look — with the first letter highlighted as if it was selected in the overtype mode. We have tried to set it in monospaced font, but the logo should have worked in both small and super large formats — so, eventually, it is set in Proto Grotesk, too, though we drew the different letter I, which is more like a monospace one.

IStories and Важные истории are two interchargeable names for one brand. At the launch of the website, the English logo was used, but eventually it was changed for Russian

Images from IStories’ social media accounts

IStories made it clear that they couldn’t spend many thousands of dollars on fonts, which is why we took Proto Grotesk Regular and Bold — and chose IBM Plex Mono together with IBM Plex Serif because of their free license. And the guys liked it all right away.

I am hell serious about pixel grids — and Proto Grotesk has a perfect geometry in this sense. Spaced at 4 pixels, all sizes — lowercase as well as uppercase — perfectly fit the grid, and they are also very readable. That is particularly important at sizes less than 20, where each point varies considerably in weight.

The only thing that is confusing in Proto is the letter G that literally strikes the eye. It is interesting, but I’d like a more conventional version. And the leg of the R: in bold, it has a right angle, while in regular the stroke moves down in a smooth arc — that also jumps out and can be rather irrelevant. But R comes with alternative glyphs, and they really should have done it for G, too.

footer

Both uppercase G and R are present on every page, in the footer

alt

Alternates for R

On Repetition

At Charmer, we are stepping away from this reputation of a studio that creates websites for media — in this niche, we are trying only to take on projects that can turn out peculiar, where we can experiment. That was the case with Important Stories — those guys are one of the nicest customers I worked with.

Quite a few commissions from this field are getting filtered out at a time of request — when we realise that they want from us the same thing that we have already done once. We are trying to convince a potential customer that they don’t need a copy of their competitor’s website, we are seeking to rethink the product. And sometimes we manage to do that. While occasionally we have to do something very framed: nothing but limitations, a certain work inside the box. It is the lack of trust for the designer, that we sometimes encounter — the client doesn’t really see you as an expert, and doesn’t understand that your previous achievements (which they want to repeat) are like that precisely because the designer was heard. Some people are not ready for dialogue.

Most media that approached us didn’t have a clear, mature, elaborate identity. Each time we came up with it from scratch — sometimes keeping their old logo. But I can’t remember a single time where we kept the elements of old graphics, including typography. It always changes.

On Neo-Grotesques

Our studio has two art directors, Nastya Sokirko and me. Nastya is very much into serifs, while I am very much into neo-grotesque types. In your interview five years ago, I blurted out the term ‘Helvetica-esque fonts’ — and I still work with those a lot.

Along the way we saw more of Helvetica-style fonts fitted with Cyrillic arrive — but not many more. I am still searching for a neo-grotesque that will work for me 100% — each font has its own issues to be unhappy about. The most recent thing that I’d like to have in Cyrillic is Helvetica Now; it has dense, display styles, with proper kerning. But it’s my understanding that we should not count on that any time soon.

Many people use open source fonts — such as Inter or Manrope, — but I feel uneasy about certain glyphs, clearly they were not made by type design gurus. Five years ago, all neo-grotesque fans were doing projects with Graphik — now we’re witnessing the same boom of Favorit Pro, it is already over-used here and there. With it, it is not even letterforms that disturbs me — in alternates one can find a calmer y as well as a regular g, — but I think it is overly airy, it should be additionally densified. We have used it in our projects a couple of times.

Pragmatica is something from the early 2000s, when I started doing design. It didn’t have a web version earlier, while now it lacks styles: sometimes the bold style is too bold, and the regular is too thin. One might need something like Medium or Semibold, but it simply doesn’t have any. But it is still rather nice in terms of plasticity, and it surprises me that the typeface is not really recognised here, in our market.

kino

Pragmatica at the Isskustvo Kino website , designed at Charmer

Suisse Intl — also everywhere nowadays, that is a nice workhorse that can be used to set anything. It is now applied on our website, having replaced Pragmatica.

goal

Suisse Int’l in the Goal online sports publication, designed at Charmer

I noticed that I happen to fall in love with typefaces — when you use a font in each project and it seems to work everywhere. Therefore I came up with a rule that I try to follow — not use the same font more often than after two projects.

On Change

Seems like all media are pursuing video formats — the exact opposite of text setting. Yet still, typography… It became a more important and powerful tool. From a purely functional typesetting, for reading long texts, we are increasingly shifting to decorativeness — I am speaking, for instance, about abundance of typefaces in modern graphics.

Designers use fonts to make their project, their product expressive, more visible — we saw way less of it before. Most contemporary web designs are built not on illustration or complicated graphic tricks, but precisely on approaches linked to typography. If you look at design for designers, they are totally imitating techniques of print: indentions, more complex layouts, larger white spaces, and other tropes that didn’t exist in digital before.

In traditional digital media, I’m afraid, nothing changes crucially — after all, in our smartphones, we always consume information lineally, including while reading large texts on the Web. Nothing could be easier than simply scrolling down. Besides, text-based publications are a very conservative environment, where any bold experiments can potentially entail loss of audience and advertising accounts, which is why everybody is very careful. Generally, experiments are carried out by outlets that have just arrived. Such as the Srsly website — they have interesting solutions that set new standards for readers. Readers have nothing to compare it to, they won’t say ‘The former Srsly was convenient and user-friendly, now it is not’ — and that offers a vast playground.

Srsly, a Russian online publication for teens and young adults, designed at White Russian, set in Favorit Pro

If we are talking not only about the media world, but about design in general — the market significantly changed through the arrival of digital products, plenty of those appeared in the last two or three years. Today most designers are focused on working in product teams. While websites became something if not archaic — they are still needed and will be needed a little while longer — but certainly less popular and less profitable.

I can explain what I mean. In Russia, small businesses almost entirely cover their media needs through different kinds of services — such as Instagram. Also, a small business can hire a freelancer to do a small project on Readymag or Tilda. This niche is absolutely unprofitable for studios such as ours — though there is a lot of room for design beginners. You can do anything to fulfil your ambitions, trying new things, developing interesting small websites.

As for large business, it is shifting to, or even almost shifted from the Web to products — and hires designers namely for this product tasks. Corporations largely don’t need services of design studios — or they need those for a not very interesting work, as the one that an in-house designer doesn’t have time to perform. And a medium-sized business is basically killed in Russia, here you have only various corporate projects as commissions — which are usuallty a far cry from being a creative playground. What remains are increasingly scarce digital publications and government — with which many of us don’t work as a matter of principle, because it is quite difficult from both organisational and legal points of view.

Mentioned fonts