Monotype

0:00 [Applause] hello i'm just gonna check the microphone is in the right place so yeah it's great to be here uh um great to see so many smiling faces um so yeah and i'm going to talk to you guys today a very emotional subject helvetica um [Music] you can tell by the laughter that i'm hitting the nail on the head there um yeah and this is actually quite an interesting story a bit of background about helvetica and also the journey of how we took this classic iconic typeface into the 21st century and this story begins at the haas foundry in switzerland in 1955.

0:43 so quite a while ago where edward hoffman and max meidinger decided to design a new sans-serif typeface family and this would be something more simple more neutral and more clear than anything that had come before um and arguably since so it's a bit of a model for what came next and they called this typeface denoia has grotesque or the new grotesque from the house foundry annoyer has grotesque was originally designed as a metal type so to be set by hand letter by letter and it was later reworked for mechanical type setting and then the name was changed to helvetica and it was a hit as we know

1:34 so when metal type setting gave way to phototype setting um helvetica was there and when digital type setting arrived helvetica was of course there going strong and in the 1980s when postscript and desktop publishing arrived neue helvetica was born now it took 26 years for neua has grotesque to become neue helvetica and we've been using neue helvetica for 38 years 38 years that's a digital eternity if you think about how much desktop computing the internet and our digital lives have changed in 38 years it was probably about time for a new version of helvetica right um and helvetica neuer or noyalvedic i should say it was a single master design and what that means we had is we had we

2:23 had one design for use at all sizes and it was really ideal for setting text at like 10 and 12 point in and around those sizes but the original metal type had a slightly different design for every size so it had tighter spacing tighter proportions and really fine details and shapes for large sizes and looser spacing looser proportions and much more punchy and robust shapes for setting text at really small sizes and us typographers call these variations optical sizes so in 2019 with the release of helvetican now the monotype studio reintroduced these optical sizes so helvetica now has a display design that has a text design and a micro design all with slight

3:16 variations suitable for that specific size range helvetican now also reintroduced alternate forms for a handful of characters it also has an extended character set with a host of useful tools for designers and topographers to play with and it also has an extended weight range from thin to extra black so helvetica now was a huge undertaking and it was about four years in the making um and i hope of a whole team of type designers and type engineers behind it but when we'd finished it in 2019 we immediately began work on the next evolution of this type of this famous typeface uh helvetica now variable but variable fonts are new and not everyone

4:04 really knows what they are yet they're pretty fresh so let's take a little bit of a deep dive and a step back and try to understand what this is first so a variable font combines all the members of a font family into a single font file um in a traditional font family every weight and style occupies its own font file and there can sometimes be dozens of font files in a single font family so with a variable font and a variable font technology we can put all those separate styles into one font file and variable fonts work on three basic concepts they work on masters axes and instances so first we have master drawings so drawings for each character at either end of the design space so drawings for

4:52 each character in the thinnest part and drawings for each character in the heaviest part and in a variable font when making a variable font these master drawings need to be completely compatible with each other now when we originally designed helvetica now we had a different master up a different set of master drawings for each optical size so you could consider them related and kind of similar families but quite separate in their conception so with headvatican now the first thing sorry helvetica now variable the first thing we did was to reassess this master setup so reducing the number of masters and increasing the weight range in the in the text and micro spaces to make everything more aligned now this makes

5:34 the design process simpler and it makes it allows us to make a better more efficient more stable typeface at the end and second there are axes and axes are the lines of variation between the masters so the most popular axis in variable fonts these days is is the weight axis and as i mentioned before helvetica now has a weight axis that goes from thin to extra black but it also has two other masters sorry two other axes it has a width axis which goes from condensed to regular width and it has an optical size access which goes from four point to thirty point so quite a big design space um and again when working on this variable font update we took the opportunity to revisit some details of

6:20 the design to iron out some of the kinks but also make it more compatible and more refined so what you see here is a rework of the proportions and the spacing of the display and the text design spaces so that you get a better waterfall to the micro design but also a more consistent relationship between the different optical sizes pretty detailed stuff we're going in deep now and we also took the opportunity to look at really specific character details so what you're seeing on the screen here is an adjustment to descender zones what that means is if you look at the hooks on the two a's this is an organic accent so typically this should be higher shouldn't shouldn't go as low as the

7:01 lowercase g but with the original design and the display masters it did this is it's a quirk of the design process it's a really big project these things get missed sometimes so we took the opportunity to just fix these alignment zones fix these details and another example of that is just really minute details like the positions of crossbars the weight of crossbars the size of ink traps we made literally thousands of adjustments at this level to make this typeface work and i'm now going to go through every adjustment one by one so sit tight sit tight grab a drink see you in two hours of course i'm joking so this process of trying to align the

7:40 masters to work across these optical sizes it throws up many many challenges and pretty much at the 11th hour of this project we hit upon a pretty big stumbling block so most typefaces that are released and exported today they're exported at 1 000 upm not all but most it's like it's like an industry standard and this works fine for static typefaces but when you introduce variable functionality and variable capability in at this resolution things can go quite wrong just awful sorry about the sound effects they're terrible um but it wouldn't be a good story but without some drama right so there you go

8:27 um but unlike any good story it has a happy ending so after much panicking uh much flapping around chasing our tails trying to figure out what went wrong uh some of our very very clever font engineers piped up and explained that it's actually to do with the resolution so as you update any kind of old data to a new more high fidelity output you need to address issues of resolution so the solution was quite simple really we just increased the upm or the units per m squared in the source file to 4000 upm so that's like taking a video file and switching it from 240p to 1080p and it worked a dream

9:08 [Music] [Applause] [Music] um so this made the transition between the optical sizes much smoother and we got better quality outlines so all of this was to make helvetica now variable variables 18 master weights 18 master styles more efficient more consistent and to basically make them visually better also that the third essential part of our variable font would work and that is the instances so instances are the blends between the masters so they're actually they're just the predefined styles that pop up in the font menu when you access a variable font and helvetica now has 72 built-in default instances but this is just the tip of the iceberg

10:06 and by allowing designers to mix the masters themselves there are literally millions of possibilities with helvetica now variable which is cool but it's kind of actually terrifying also right um what are you going to do with all this stuff um that's up to you good night um but yeah it can be overwhelming and it can seem complicated but variable fonts are actually quite easy to use um so in standard design programs like indesign or illustrator you use them like you would use any font so access them through the font menu select the style you want and then if you want to make adjustments to kind of width or micro adjustments you can use them the variable capabilities to adjust width or weight or whatever

10:47 um so yeah not so scary after all and in css and html you can easily access variable settings and with just a few lines of code and with a few more you can create lightweight fluid type animations like like this so what will you guys do with all this newfound capability does it really matter and does it make typefaces better well imagine a responsive digital experience where the weight the width or the optical size of the typeface automatically adjusts to the screen ratio or to the window size or to dark mode settings or even time of day all this is actually possible now with variable font technology um i think variable fonts are a leap

11:36 forward a massive leap forward i think we're seeing design sorry the dawn of a new phase of typography where we kind of type is coming to life and breathing in a different way and helvetica now has the ability to kind of blend between all these optical sizes i talked about weights from hairline to black and from condensed to quite normal with masters and what it is is it's a kind of a really working of a classic typeface for this kind of dynamic digital responsive age that we're in um and of course television now is the work of many people over many years so i'm here talking about this as if i am some sort of genius i am of course not but we have a team of very dedicated

12:23 very passionate people who worked on this project over six years and i just want to call it a few so first of all charles nix charles nixon is the creative type director who kind of provided the vision and the direction for this project from start to finish i also want to mention uh one of our designers friedrich althousen so friedrich is a very talented systematic designer so he basically took this helvetica now and figured out how to make it variable how to make it work how to make it compatible so big kudos to friedrich and then finally i want to mention inca stratman i think stratman is one of our most

12:57 experienced fountain engineers um she's so dedicated to this project and to this idea that she worked on some parts of it from her hospital bed so she's really quite dedicated so but big thank you to everyone because it's a huge undertaking and helvetica now variable was all about uh bringing this iconic design which is much loved and much hated used everywhere into the 21st century it's a huge responsibility a huge amount of work but in doing so hopefully we've improved it and we've made it available to the next generation of designers who will take it and hopefully bring it to new places so i just want to finish now by talking a

13:38 little bit about how about this project influenced me and sparked a different project so when we finished this project and my involvement in it i started to think about well how you know helvetica now is by taking an existing design and making this classic thing work and maintaining its identity but how designing a variable font from scratch thinking about variable first functionality as a starting point influence design decisions so over the last two years i've been working on a on a project at home during lockdowns um wearing noise shoes wearing socks which has resulted in my very soft feet

14:12 which i now have blisters on from wearing shoes and during that time i kind of did some experiments and developed this new typeface family and these are some examples of teasers we've been dropping out over the last couple of weeks which show this typeface spliced with some videos and images that i've been taking while working on this typeface drawing lockdowns and the various place that i visited actually in croydon believe it or not so yeah apart from the gays one that was taken somewhere else but what i want to show you guys now is basically the full typeface i'm going to give you a preview of the launch of this new typeface it's very exciting for me i also want to call out two of my

14:51 colleagues who are here and i want to embarrass them so ibs and marie who without them this wouldn't have happened um but yeah it's just an interesting kind of point to finish on is that variable fonts are this new thing they're they're going to influence how we revive new typefaces but also how we make typefaces going forward so thank you all for listening i hope you enjoyed it and i hope you enjoy this