#btconf Düsseldorf, Germany 08 - 09 Nov 2021

Bianca Berning

Bianca is a designer and engineer based at the intersection of typography, type design and technology. She is Creative Director at typeface design studio Dalton Maag and an active member of Alphabettes, Association Typographique Internationale (ATypI) and the Unicode Consortium.

Want to watch this video on Vimeo directly? This way, please.


Back in 2016, it was announced that OpenType Font Variations, better known as variable fonts, would be added to the OpenType specification. Since then many type designers have created hundreds of variable fonts. The designs have been both experimental and highly functional, testing not only the boundaries of the technology but also improving web performance.

Bianca’s presentation will explore the functional and creative possibilities of variable font technology and will illustrate how this area of type design has developed over the past four years.



[Audience applause]

Bianca Berning:

[Audience cheers]


There are two--

If I look at the regular weight, it kind of repeats itself. You have different coordinates, but the system behind it is the same, and the same for my black weight lower case N.

This is what variable fonts basically do. Instead of using three different files in order to describe outlines that are already related to each other, what they do is kind of link those together.

Instead, I can substitute all of these with one variable font. The file size savings -- this is just an example -- it depends on how many weights you obviously are replacing and what is in the variable font file.

On the top, you can see we are using an extended weight, light, and we are using a condensed weight -- the third one -- and then we have different kinds of weights. We need quite a complex variable font in order to cover this design space. This is what we are looking at here.

This is basically me defining my design space. This is how far I want to push things in my font, and this is how far I need these.

For fun, I also do this in this kind of typeface with italics as well - repeat the same process, but maybe I want to use italics on my website as well.

Usually, we would look at outputting things from this design space, esthetic font files so we have things like a light, narrow, and then a hairline, light, a regular, and a medium - the typical font weights. The beauty with variable fonts is that you can actually get everything in between as well.

I actually got into type design because I was always unhappy with what I had. [Laughter] I think this is me described in three words. I was never happy with the weights that I got. I always wanted something a little bit heavier than regular or a little bit lighter than medium. It never set right.

The variable font specification was written by people who oversee the OpenType specification, so that was hosted mostly by Microsoft, but Apple, Adobe, and Google also input, and then they invited some independent foundries. I was on the board as well to just input a little bit on what the users actually want.

We defined five axes that are available by default in the specification. Everything that is in the specification is also going to be supported by people who support variable fonts. The axes that we decided are going to be important (typographically important to people and are often used) are obviously the weight axis because I think this is probably the most used one. We have everything from hairline to black and everything in between. This is one axis that is in the specification.

The next one is the width axis. Again, something that we just saw as something narrow and something white.

Then the next one is the slant axis. You know this from just using any kind of font. You sometimes have an upright and then you have an italic of sorts. It usually is in the region of 10 to 12 degrees angle. In a slant axis, you can axis it and define the slant that you want for your project.

On the top, for example, we would have a really nice design. It has really intricate details. It has these hairline horizonals and really quite bold vertical parts in the letters. You can use it in really large sizes.

If you were to use this in smaller sizes, you can simulate that. But, just squinting at the screen right now, you will see that all of the hairline elements actually fall away. This is not suited at all for smaller sizes, so what the optical size axis does is compensate for these kind of things.

If you use a font in smaller sizes, you want to beef up those hairline elements, for example. You want to make the ledgers a little bit wider. Sometimes, you want to increase the X side as well just to make everything a little bit more legible when you have it in different environments.

Then everything that is not specified is a lot more fun than that. You can have custom axes that you just define yourself. This one is an example of melt axis. This is a font that we designed based on melting chocolate in the sun. Basically, what it does it just melts away. It has the melt axis.

In this instance, this is a font with these two axes: weight and width. The abbreviations are there. Then the numbers next to it are like the instance on the axis.


For fonts, we are designing specifically for people who ask us to do those. I think most of us would go by effort. So, as a designer, I was trying to estimate how much do I need to put into this and how many weights do I actually have to design?

Yeah, it increases, obviously, if you add more variables to this. In this case, if you add another axis, like the width axis, you would have to draw more instances of the font in order to just hold up all of these tent poles. Yeah, it would probably be more expensive in this case as well.

I have some examples for you. This one is a really lovely one. It kind of uses the idea of the optical size axis but for dark mode settings. If you ever designed an app or a website that you can toggle into dark mode, you know that when you have this white text on a black background instead of the reverse, the light kind of shines a little bit through. You have this halo effect, so the letters actually look bolder than they are because you have light shine through the letters, basically.

The next example is just responsiveness. We talked about this for the last 15 years now, but this is actually a really good one. If you resize your window, why not resize the font?

He used it in AR and filmed the position of the font and himself just moving around it. You can see, on the top, the steeper the angle is towards the text, the more difficult it gets to read because, obviously, you have a little bit of perspective happening there. The letters actually cram together a little bit.

This is something he mocked up relatively quickly just to prove a point, but I think this is going to be quite interesting for things like gaming (VR gaming and AR gaming) and also AR in public settings. If we ever come to a point where we all wear our little AR glasses in the city and want to read the street signs, I think this is quite a nifty feature.

weight with an italic.

Yeah. I think I said everything I wanted to say about this one.

Other data could be noise. For example, I heard the first speaker. I think everyone was very excited to come back to this conference. The first speaker was really welcomed with a lot of applause. Imagine being able to just capture the sound, link it to the variable font, and the more applause you get, the bigger the font gets.

You could link it to voting data. You just voted in Germany, so what if, as the ratings come in, what if different font sizes or weights would indicate who is winning and who is losing at the moment? I think this could be quite interesting in an interactive way, but also kind of fun to look at as well.

Basically, it lists all of the variable fonts (or almost all of the variable fonts) that are out there. Type designers have been really, really busy over the last five years. You can imagine we have been designing fonts in the same way since Gutenberg, really.

At one point, it moved to digital, but we did it exactly the same way. We kind of output the same way as well.

[Audience applause]