Unlock the Fun!

Creating outstanding typographic designs is not just about choosing the right font. It’s about using all the super powers that font technology offers you today.

In her talk, Ulrike will reveal some playful type experiments that show evidence: type is not just for reading but it’s fun and entertaining, too.

You will learn how to tap the full potential of a font, which will enable you to create stunning designs, leaving your clients with a smile.

Transcription

[Music]

[Audience applause]

Ulrike Rausch: Ooh, that’s me. Okay. [Laughter]

So, yeah. I’m a type designer, so I create fonts, and I specialize on handwriting fonts, so fonts that look as if someone would have drawn them with a brush or with a ballpoint pen or with a marker. And since these fonts look so handmade and so handcrafted, a lot of people have a quite romantic idea of my daily working routine.

[Audience laughs]

Ulrike: So, they think that I sit all day at my desk with my pens drawing an alphabet. Well, in reality, I am sitting in front of the computer the whole day producing a piece of software because it’s actually a lot of programming and latest font technology involved to make a font look handwritten.

But, yeah, besides working digital for most of my time, I have to admit that I absolutely love everything that is handmade or hand-painted like here. I don’t know why. I just feel magically attracted to those kinds of things.

I think it adds so much more value to design when you actually have to take a second closer look in order to ask yourself, “Wait a minute. Was there really someone sitting all day long writing the whole text manually instead of just typing it quickly with a computer?” This is super crazy, right?

Okay. Not everyone has nice handwriting, [laughter] but I think even this sign, it has so much more charm than when I’m coming into a supermarket and I see this.

[Audience laughs]

Ulrike: Fonts that pretend to be handwritten, but they’re obviously not. So, you instantly see that this is a font and was not actually hand-painted in the morning by someone in the supermarket, right? But why?

Also, here. Why do you instantly know now that is not hand-drawn? That’s a font. Because letters that repeat look exactly the same. Like if you look at all the different E’s here and the two S’s. They’re identical. I mean even if you would try really, really, hard to draw two identical letters with a real brush on paper, you won’t succeed. Ask Rob outside. [Laughter]

So, they would always look a tiny little bit different. But that’s actually what makes this handmade work so charming, right? All these irregularities and all these imperfections. We actually want that.

Yeah, but, unfortunately, there are a lot of these lifeless pseudo brush fonts out there, which is a pity because, thanks to the OpenType font format, I as a tech designer have the possibility to add 65,536 characters in a font file. That’s quite a bit, right? So, I can add, for each letter, several versions that all look a tiny little bit different, like they would also when I would draw them with a real brush. And all these alternatives in my font can then create the impression of real hand-painted text.

Unfortunately, not all type designers make use of these possibilities. So, this font, for example, is the reason why I can’t go to McDonald’s anymore.

[Audience laughs]

Ulrike: It just hurts so much. That’s why I prefer going to Kentucky Fried Chicken instead because they’re using one of my typefaces.

[Audience laughs]

Ulrike: [Laughter] So, this is LiebeDoris. Well, I’m vegetarian, but I think this looks so delicious thanks to this font. I think it’s because LiebeDoris has actually four alternatives for each letter in order to give the impression of really hand-painted text.

Okay. This is cool. We have now all these different alternatives for each letter, but how do we get them?

If you take a look at an ordinary keyboard, there’s only one key for each letter on it, right? Do we need a huge special keyboard like this one in order to access all the different letters in a font? Of course, not.

So, a lot of characters in an OpenType font are accessible for the user through intelligent substitution mechanisms. These substitution mechanisms tell the software, like InDesign, for example, when to insert a certain character and when not. This happens usually automatically without the user to have them pick manually. These substitution mechanisms are called OpenType features. Yay.

So, a very prominent example for OpenType features is the fi ligatures. In a lot of text fonts, the upper part of the f collides with the dot of the i. So, that’s why the type designer creates an optimize character that contains both letters without the collision, of course. And then the ligature feature automatically replaces the single letters by the one optimized character as soon as someone types f and I in a row. This happens completely automatic because the ligature feature is active by default.

Okay. But for all these alternatives in my font file, I make use of another OpenType feature. This is called contextual alternates. This is actually my favorite OpenType feature. Let’s have a look how this works.

Most handwriting fonts behave like this, that every time you type two same letters in a row, the second one will be replaced by the alternative version, so that you see, now, here two different versions of an o. that’s cool, right? But if I would want to write mama and papa, for example, now -- so, mom and dad -- all the A’s look the same. That’s not good because this OpenType feature actually does nothing because there is another letter standing before all the A’s.

That’s why, for my handwriting fonts, I always program a more complex behavior that doesn’t only look at the one letter standing right before it, but it’s several letters in its surrounding so that now you see four different versions of the A.

The cool thing about programming the OpenType feature like this is that also here, you can’t tell if this is a font or was actually hand-painted by someone because there’s no repetition of identical letter fonts. This was the contextual alternates feature and the ligature feature. Of course, there are much more OpenType features you can include in a font, and I really enjoy adding all kinds of extras and all kinds of features in a font because I think they can really enrich a font and enable the user to adjust the font to their certain needs.

Yeah, so the ligature feature and the contextual alternates feature that I use most are active by default not only in most graphic design applications, but also on the Web. So, most browsers show them automatically so you don’t have to do actually nothing.

If you for some reason want to turn off, for example, the contextual alternates like shown here in--

Come on. Come on. Okay. It doesn’t work, but now there is the arrow. [Laughter] Okay.

Like shown here in the first row, that’s how you could turn off this contextual alternates feature. But of course, you shouldn’t because it’s awesome.

In order now to access all the other OpenType features that could be in a font, you need to know their four-digit layout text. For example, in the second line, smcp stands for small caps, or if you want to turn on the swashes, so all the curly letter fonts, you would do so by activating swsh.

A lot of fonts don’t come with a massive menu or a tutorial that tell you what features are inside the font and what is their four-digit layout tech, and that’s why I want to show you two super useful tools.

The first one is called FontDrop. As the name implies, you can drop your font there. And then you see here all the OpenType features that the font contains. The contextual alternates and the ligatures are active by default. Then you can also deactivate them in order to see what happens to your text if they’re not active, or you can also activate the other features in the font. Of course, you also see all the languages the font supports. Of course, you can type your own text and then apply a feature in order to see what happens to your text.

The other tool is called wakamaifondue. And also here, you drop your fonts. And then it gives you all the information about a font, what languages are supported, all the OpenType features in a font. The cool thing is, it gives you -- so, you can also type your own text. It gives you a cool overview of the OpenType features, but also which letters are affected by a certain feature. Then you can also deactivate and activate in order to see the difference. But the actual cool part here is that you can copy the CSS code you need and then paste it into your website. That’s super handy, I think.

Okay. Let’s come back to handwriting. Yeah. In the last ten years, I think, I specialized more and more into this handwriting font thing. It’s always a big challenge for me to reproduce handwriting as authentical as possible. Last year, I started working on a new font and then I filled all these pages with a ballpoint pen. So, I wrote a lot of sentences and a lot of words. And then I went through all of the pages in order to check which letters would make it into the font and then I extracted these letters and scanned them. And then I had these scans.

The next part would usually have been to decide how to vectorize these images of my letters. So, either by drawing a vector shape along the path, which looks nice and smooth but also a little bit unnatural, or the other option could be to use an outer tracing tool and to have a little bit more rough outline in order to, yeah, have this handmade charm in my vector curse.

But also, this looks not very natural, not to mention that adjusting letter shapes with this massive amount of nodes is a nightmare. But what’s also missing here is all these different shades of blue, all this unevenness of this structure. You just can’t reproduce that with vector curse or vector shapes.

So, that’s why I decided to make use of a quite new font technology and that’s the color font technology, because you’re actually able to store bitmap images in a font file. So, I’m working with font ... glyphs, and instead of having vector curse inside my glyphs file, I added all the pictures of the photos of my letters inside of this editor, so I just had a photo of the letter. So, usually it looks like this, so you have the vector outline and then you can easily adjust the Bezier curves as long as you’re happy with the result. So usually, you’re never happy with the result. [Laughter]

But here, in this case, I only had the photo of the letters, which made it a little bit tricky to work with it, especially because it’s a connected script font. Then the connection to the next letter had to be in the correct position. It had to have the correct angle and the correct length. So, I had to go back between Photoshop and Glyphs, and then back to Photoshop, Glyphs, Photoshop, Glyphs. This was a very tedious workflow.

The other downside was that all these pixel images have, of course, a higher file size than vectors. So, all these images added up in my file size, and I had to limit myself a bit in order to not have a huge OTF file in the end.

But yeah, nevertheless, I’m pretty happy with the results. So, this is LiebeHeide, another color font that creates natural ballpoint pen writings. And I’m actually super happy with the result and to have finally a font that quite authentically reproduces handwriting in such a degree that you almost can’t tell it from real analog writing.

So, each letter is represented by a photo. I did not use JPEGs even though JPEGs would have a smaller file size. I added PNG because PNG, as you know, can have a transparent background because you also want to put your text not only on a white background, but on a photo or on a graphic or an image. So, otherwise, with a JPEG, there would be a white square in the background and that’s not nice.

The most exciting part about color fonts is that they also support OpenType features. I edit a lot of alternative versions to my favorite contextual alternates feature. So, I have now several different versions for each letter in order to make the font look more authentic and a lot of ligatures for a more natural writing flow. These two features, as I said, are active by default. So, when you type, you automatically get all the alternatives and ligatures while you type.

Oh, it’s November already. Sorry. [Laughter]

Yeah, and each letter has several different versions with different connecting strokes and then an OpenType feature takes care of inserting the proper letter with the correct connecting strokes. So, some letters want to be connected on top like the O, but for some letters, the connection has to come from the bottom. Some letters don’t want a connection at all.

Then the ligature feature replaces also some certain characters by a ballpoint pen emoji. So, when you type, for example, colon, hyphen, parenthesis, or colon, hyphen, capital T. [Laughter]

A less and a 3 turns to a heart. [Laughter]

And then different styles for the arrow.

But my favorite feature is the strike-through and the underline feature--

[Audience laughs]

Ulrike: --in order to get the full handwriting experience. That was to wake you up after the lunch break.

[Audience applause]

Ulrike: [Laughter] So, in case you wondered. Yes, color fonts are also supported by most browsers. Yes!

So, for this typesetter on my own website, I use the subsetted version of the font because it’s quite heavy in file size. But here, I reduced the character set a bit, so it’s only holding 300 characters instead of 500-something. It only holds the low-resolution images in order to, yeah, not have super long loading times. [Laughter]

Okay. When I say low-resolution images, that’s because you can actually store several resolutions for each letter. So, you have different layouts with different solutions and then the software, like InDesign, for example, only -- or the Web browser -- only picks the resolution it needs for a specific font size. So, it’s not loading the big images when all you need is a tiny preview of the letter.

I really enjoy this effect of having multiple resolution layers. I thought, “Hmm, that could be also fun,” so I made some fun experiments. So, I made a color font with different colors so the letter shape remains the same, but then the color changes on each resolution layer. When you use the font, the smaller the font gets, the smaller the font size is. You have an almost seamless gradient between purple and yellowish.

Super long. Okay. You get the idea. [Laughter]

Then I did another experiment with this color font. Okay. This looks super cheesy. I know. But the cool thing about this color font is that it has optical sizes. On the high-resolution image on the left, you have all the details, like a curly swoosh and then this loopy connection and ink blobs and everything. Then in the low resolutions, you have a more reduced letter shape. When you use the font, the smaller the type gets (like at a certain point), you get the more reduced letter shapes that are better legible in small sizes. When you turn the volume up again, you get all the details. So, it’s almost like a variable font.

So, back to LiebeHeide. So, the color font LiebeHeide has no optical sizes. Sorry. But I’m currently working on a vector version of this font because it’s just so much more pleasing to work with vectors instead of pixel images. It’s also easier then to add more weights to the font like light, regular, bold, and black.

But also, yeah, working with vectors has another advantage. Vectors can be interpolated and, therefore, be variable. [Laughter]

[Audience laughs]

Ulrike: Thank you, Bianca, for this awesome talk yesterday that spared me some slides here now on my presentation because you all know the details about variable fonts now. Just as a reminder, variable fonts allow you to access interpolation axis and to seamlessly select a weight between light and black, for example.

Of course, there is not only the standard axis like weight, width, or the slant axis, but you could also create your custom axis. So, Bianca, yesterday, showed this melting axis. I don’t know if you remember. That reminded me of this drippy axis. This is a font by a colleague of mine, and I really enjoy this drippiness in this font. So, it’s a cool Halloween font, I think.

But, yeah, for the vector version of LiebeHeide, I added several parameters so that you can adjust a handwriting that fits your personality. You can have different sliders. For example, if you’re more the forward spending writer or the backward writing type, so you can also decide how expressive your writing is, how eccentric it is, and then you can mix all the different parameters in order to create your custom personality.

Then another example because, when I released the bitmap font LiebeHeide, someone told me, “Yeah, it looks super authentic. It’s super nice, but people will instantly know that I haven’t written that because my handwriting is shitty compared to this super beautiful writing style.” So, yeah, here you go. You have a sloppiness axis.

[Audience laughs]

Ulrike: With that-- [Laughter]

[Audience applause]

Ulrike: With that, it’s up to you to decide how legible your handwriting is.

Okay. These font experiments would not work with a bitmap version of LiebeHeide because it contains pixel images and these can’t be interpolated, of course. But what I haven’t told you yet is that color fonts cannot only store bitmap images, but also vectors.

This is not a color font. This is a layer font. So, we could have multicolor text also before color fonts. It worked like this so you had different layers.

Usually, in this menu, you would see light, regular, bold, or black. But here, you have just different decoration styles, and then you write your text, copy the text frame, assign a different decoration style, and then each layer gets a different color. Then you put them up on top of each other in order to have a multicolor text. It looks super nice, right?

Also, this is a layer font and maybe you can also sense the problem here. I mean it looks super, super, cool once you’ve put it together. I mean it’s a pencil font. Who does not want to have a pencil font?

[Audience laughs]

Ulrike: [Laughter] Yay. But yeah, imagine you spot a typo now in your text or your client wants you to write a different text.

Yeah, you have to stretch out all the different layers again and then go through all the different text strings and change the text or the one character that is wrong. And especially here in the middle, you can’t tell which letter this is, so it’s especially hard to correct the typo in this text. So, wouldn’t it be cool if all these different layers would come merged in one font file so that you write the text and you instantly get the pencils without having to copy-paste the whole text strings and give different colors, so that you write it and it’s just there? Like this? Yay. Yeah. [Laughter] That’s now possible thanks to color font technology.

The cool thing here is not only that it’s so much more easy to correct the typo. It’s also nice for the BAP, so I don’t know if there’s a crazy CSS hack in order to layer different text strings on top over each other. I’m not sure. But this way, it’s of course, much easier to have multicolored text on a website.

The only disadvantage here with color fonts is that the color is fixed, so you have to rely on the good taste of the type designer. Yeah. Unfortunately, as a user, you can’t change the color, so the color table is not accessible for the user. Not yet at least. I heard that’s in the making. It’s still a quite new technology and we have to wait a bit until everyone adapts. But the thing that the type designer could do is to add different color pallets to the font and then you can just select from these different color styles in order to pick the one that fits best to your design.

Since I’m super excited about color fonts, I want to show you another project I was working on. So, this is the Tipoteca Italiana. It’s a type and printing museum in the north of Italy. If you happen to be in that area, in the north of Italy, you have to go there. It’s an amazing place and the people are absolutely lovely. I went there (like two years ago) in order to digitize these beautiful wooden letters. So, I just made a regular monochrome font out of these letters.

But just for the very first time, I saw these wooden letters with stripes in the background. I imagined, “Wow! This would make such a great color font.” So, imagine the stripes in the back in a kind of rainbow sequence like this. And then, no matter what you type, you’ll always get the perfect rainbow in the back.

Yeah. It turned out, so I did some tests, and it turned out it’s not going to happen as easily as I initially thought because all the letters have different amount of stripes in the back, right? So, the I has only 4 stripes while the O has 10, and then the W has 14, I think. If you want to have a perfect rainbow with eight colors, let’s say, it would not work because not all letters have eight stripes in the back.

So, it would look something like this. So, just a messy array of colors. Just random color blocks. This is not a proper rainbow. I’m pretty sure all the unicorn people here would also not approve that as a proper rainbow, right? No. So-- [Laughter]

So, yeah, that’s how I wanted it to look like. So, a perfect rainbow sequence with a correct order of the colors. Yeah, at the end, I achieved that also by making use of my favorite OpenType feature, the contextual alternates. So, I edit a lot of alternates. So, eight versions for each letter.

[Audience laughs]

Ulrike: [Laughter] No big deal. And then each of the versions has a different starting color. And then I wrote an OpenType feature that would automatically detect on which color the previous letter ends and then picks the version of the letter with the correct color and coding. And then when you type, you always get the perfect rainbow no matter what you type.

Aww. [Laughter]

[Audience applause]

Ulrike: [Laughter] It’s also cool because it works over multiple lines because the lines connect seamlessly with the next row and so on.

So, can it get even more fun than a colorful rainbow color font?

Yeah. Let’s add another OpenType feature that gives some animation to the font.

[Audience applause]

Ulrike: I think this works so well this light bulb arc. Right? Can we have it flashy also? [Laughter] No? Okay.

[Audience laughs]

Ulrike: [Laughter] Okay, but this works only while I type. So, I made an OpenType feature that makes use of all these different versions for each letter. So, the OpenType feature says, “As soon as someone types a new letter, the first letter in the row will be replaced with the next starting color. And since the first letter changes, all the following letters change as well,” because there’s this other OpenType feature taking care of the correct color sequence. So, we have this Las Vegas-style animation while we type. Yeah, but this happens only while we type. So, I’m adding a lot of spaces, backspace, space, backspace. [Laughter] It only works while I add something or delete something from the very end of the text string.

But I was wondering. Can I have an ongoing animation in my font, something that also is working without having to constantly type something? I was imagining color in animation inside of these stripes, so a fluid billow color fade, so that would constantly fade from red to blue, for example.

Yeah. Unfortunately, there’s no such thing as a color axis that I can interpolate along, like from a red master into a blue master. That’s not possible, yet. I heard some rumors that this could happen, maybe in one of the future color font versions. Fingers crossed. Yeah. Maybe someday it works, but I wanted it now.

I wanted this color animation, yeah, this animation happen somehow anyway. So, I wrote an SVG animation with an animated color gradient, and then I embedded that into my font file, and then I exported a Web font, and then I thought, “Well, maybe now I can have this color gradient animation.”

Yes!

[Audience laughs and applause]

Ulrike: Oh, I could watch that forever. Yeah, so I was really excited about having this SVG animation inside my font, so I made another one. This one. Aww.

So, I’m basically writing my signature with a font. So, this is a font. You can actually type it. But just a short disclaimer at this point. Don’t try that at home.

This is not a common practice to produce fonts. As Roel pointed, it’s--

[Audience laughs]

Ulrike: It’s more nasty than it’s brilliant. So yeah, don’t do that at home. But yeah, I don’t know. I just like experimenting a lot with font technology, and I actually really love this image here. So, the person who made this, thanks for picking this image. I think it captures quite well this process of experimenting and trying something new and figuring out what is possible with font technology and what is not. You’re just like, “Yay, I want to do it. But now it’s not supported, so why should I do it anyway? It’s completely not useable, but yay. I want to do it anyway because it’s so much fun.”

Yeah. Let’s come back to the ground now [laughter] because the important and essential question is, can we have colorful text that is animated, something that is actually working and supported and not nasty?

Of course, because there is color font technology and variable fonts. Color fonts can be variable or variable fonts can have a color table. So, we already have super cool possibilities to add more variety to typographic designs. The cool thing about variable fonts is also that the axis of the variable fonts are animatable with CSS.

So, you might wonder why should I use a font for that. I mean, you could as well do an SVG animation and put that on your website or an image, a graphic. Well, I don’t have to tell you it’s always better to include text on your website as a font because, like this, it’s easily readable by search engines and, of course, also by screen readers, which is more important, of course.

So yeah, always include text as a font. If you’re as excited about variable color fonts as I am, you should definitely check out this website by Arthur Reinders Folmer. He’s just the absolute craziest variable color font designer on planet Earth. So, you should definitely check out this website and get amazed.

[Audience laughs]

Ulrike: Just a reminder, these are all fonts.

Okay, these are fonts. This is not a font.

[Audience laughs]

Ulrike: [Laughter] But I like it anyway. So, if you haven’t already, go and let yourself paint a beautiful poster. Not much more time left.

So yeah, having a multicolored text on your website that is maybe even animated, and that is still text, that is probably something that you won’t find too often on websites yet. So, if you make use of these technologies in your projects, I’m pretty sure that this will impress your clients pretty much.

Okay, coming to the end, I hope that you all agree with me that type is not just for reading, but it is so much fun and entertainment too because font technology offers us so many fun and useful possibilities. We just have to unlock these superpowers by using them more often in our projects. Thank you.

[Audience applause]