Foto: Typo Labs Flyer / Monotype
Bernd, Olli, first of all we want to know: Which typeface did you use for the event’s identity? Is it an orchestrated gif bluff or an honest variable typeface?
Olli: We had a couple of different starting points and variable fonts were one of these. After taking in account where the TYPO Labs identity will live, we thought it would be best to have visuals that are flexible enough to run in all channels and on every device. What started as a logo that occupied the entire width of a landscape flyer as well as its height, developed into a typeface and became one of the main elements of the Labs’ branding.
Bernd: Obviously we needed some language support, taking into account that the conference visitors come from all over the world. The title typeface was planned to perform animations in the header of newsletters and on the website, rather than being a nice headline face for postcards. As a contrasting element to the lively aesthetics of the title typeface, we picked a text font that references coding in its design. So we’ve chosen Viktor Nübel’s FF Attribute as a perfect communicator for a type tech conference. Its clean, monospace and techy appeal make it ideal for this context.
Usually, you start a type design from a zero point and then develop the extremes. Here you seem to have gone the other way around?
Bernd: Absolutely. The design was never meant to be seen in static styles as a family. We went to the extremes early on. The design space was defined while creating the layout for a portrait and a landscape flyer. We wanted to fill the maximum space of each version, resulting in a ridiculously compressed as well as a condensed version. If we were planning for a static family there would be a need for at least one more master in the middle.
Olli: When typesetting the name tags we noticed to our surprise that these extremes weren’t extreme enough. We needed wider styles and even more compressed styles, so we added more masters to the design space.
So far we’ve seen your animated banners on the website, newsletters, Twitter and Instagram. As the variable font support is not supported by most of those channels, which technology did you use for your TYPO labs fake news?
Olli (smiles): We used Drawbot, an application for writing and executing Python code, in which we wrote a script for generating the interpolation animations in the various formats. The advantage of Drawbot is that it supports variable fonts and exports mov and gif files. Everything went hand-in-hand: type design, scripts and the layouts were all developed simultaneously.
Bernd: Additionally, we wrote a script in Glyphs that generates a ligature out of an input string and an input format with x and y dimensions. The script calculates the width of the font to fit into a pre-defined document format. This is what we used to create the changing headers for the TYPO Labs Newsletters. The headers keep the same dimensions and the words change.
Olli: For the website, we implemented a variable font interpolation as a fall-forward for the early adopters of variable font supporting browsers–like Chrome62. As fallback there is a svg interpolation animation based on Erik van Blokland’s responsive Lettering and as a fallback to that, a gif of that svg animation. We built an HTML page for laying out with variable fonts. It was the only way to rapidly prototype an idea with variable fonts, because Illustrator and Photoshop did not yet support the new font format.
OT Variations and responsive lettering, combined with current web development technologies, empower designers like never before. On the other hand, the question arises: Did we miss any similar technology in recent years?
Bernd: Interpolatable fonts is nothing new. We have seen that in Adobe’s Multiple Master technology and with TrueType GX, both developed in the 1990s. The big difference now is that we have one shared standard with the OpenType spec on which all big players agree. This way we can use the same fonts across different browsers, applications and systems.
Olli: Technology nowadays offers a lot of possibilities to use variable fonts in an interactive way – just think about AR/VR or mobile devices with dozens of sensors. We think this is what makes the new standard so interesting for everybody. The compact file size of a variable font is another plus, because it keeps data traffic low.
Bernd: We think that variable fonts will make us design in different ways. Instead of thinking about type being a range of static styles, we can think about it as something responsive, something animated and interactive. We are very curious to see what designers come up with and how we rethink type family planning. Static type was designed for its purpose: static text in books and newspapers. If we think about the possibilities of responsive and interactive design, we might come up with a different family structure. The TYPO Labs headline font is a perfect example: it doesn’t need Regular or Bold – just extreme widths and weights to serve our animations.
Which piece from the identity is your favorite?
Bernd: I guess it is not a single piece of the identity that stands out. The simplicity of the identity is what makes it powerful.
Olli: Our design is pretty strict. I like the absence of colour. We wanted to keep everything simple, with just 2 basic ingredients: animated type plus a font that references code – Viktor’s FF Attribute.
Thanks Olli, Thanks Bernd!
About Bernd Volmer:
Bernd works as Font Engineer and Type Designer at Monotype in Berlin. He goes back and forth between tech and design, and explores and revives old technology with his Pen Plotter Lab.
About Olli Meier:
Olli studied Communication Design in Münster, Germany and Edmonton, Canada. Before joining the Monotype team he worked as a freelancer for a couple of design agencies, such as Meta Design and Stan Hema. He also taught typographic basics at the FHD in Dresden, and his passion obviously lies in design and typography, as well as coding.
–
Link to the font:
FontShop: FF Attribute
