 Frida Medrano, studied graphic design at Universidad de Monterey in Mexico. Her journey in type design began with a school assignment that produced Calnia, her first typeface. When variable fonts emerged, in order to explore the technical part of the process, she designed Jabin, a variable font with two axes that control the weight and swash of the black letter. With this project, she participated in Tipografia, Mexico, 2017, a type design conference that analyzed the variable font format. She worked as a branding designer in Anagrama, making custom logo types. And with a web design background, her main goal is to combine technology with typography to explore different design perspectives for branding and web. She currently collaborates with TypeMade and works as a digital designer. Now, it is our great pleasure to introduce you to Frida Medrano, the recipient of the 2018 Soda Catalyst Award. For the award, for the association. And I'm going to share a little bit about what I've been doing and a little bit of the process, too. So my introduction to type design began when I did my first typeface school assignment. I didn't know much then, but a teacher instruct me about calligraphy, lettering, sketching, and the basis of type design. And later on, my boss at my web design job at the time, Santiago Roscoe, thought me about kerning, metrics, interpolation, and technical parts of the production process. So my three-month assignment became my two-year project. And I learned a lot about software. And I met a lot of people going to workshops and conference like this, where I could end up in this typeface. This is Kalnia. It's a display typeface. It has, well, it's inspired in the fat faces of the Victorian era. And it has four weights and a Latin one character set. This is more image from that. So while in college, I did a concentration in information design. And it was mainly about icons. So I started doing them as icon fonts. These are some examples of them. So to do the icons, I got based on the typography that I'm going to use and just take the color and the grid to kind of have an overall consistent look. So at the end of this, I thought, great. I finally figured out the process of making a typeface, but then variable fonts came out. And I thought, OK, I have to learn again the process. It's not that different. But at the time, there was not that many information online. So I started to do this typeface. It's called Yavin. It was like a thing that I did to know how to make that process. It has two axes, one for the weight and another one for the slash. And it take out the slash completely and then put it again. In the uppercase letters. I got inspired by George Shelley's work of black letters and the Gotenberg Bible. This is my interpretation of that. What I wanted to have is that the lower case letters to have a very kind of like a structural look, but the uppercase letters to have a more carved and ornamented part way. So that's the slash part. So I released it for free for personal use, so you can download it in my website and check it out if you want. So I learned about programming and design, like to separate things. But variable fonts help me to know about how can I kind of like combine these two things. And because at the moment, I was making a logo ties for Anagrama, a design agency in Mexico about branding. I start to make projects to know how can variable fonts affect brands. So these are some main problems that I saw. First of all, print and web are two separate environments, like you have to make first your design for prints and then redesign it for web. Then the information can be seen. So if you update one file, you won't necessarily update in the other files. And you have multiple files because there are multiple extensions and you end up having a big heavy folder of all of your files. And lastly, the animation needs like separate from the files, so you have to animate a double or even more sometimes. So I realized that variable fonts can help us to create a flexible and dynamic branding that can move effortlessly between prints and web. It can be like a bridge between these two environments and right now, there are a lot of things about responsive types. So that's something that we can use to have responsive logos on an animated brand. We can store like the data of a visual identity with the advantage of the variable font format. Animation, responsiveness, multiple style and compression. So I did this branding with code scale. It's called for all of the image that you're seeing here I've made as a font. And this is how the font works. I store the data that a brand needs to be a brand like the logo, icons and pattern in one single file and in one single axis. So the logo goes from the extended and compressed version and the other things just have that smooth animation. And this is the web. The patterns are the icons rearrange themselves when they go to the mobile version and also the logo goes from the extended to the compressed version. And one thing that I wanted to point out in here is that you animated just once for the whole page. So you have like two three lines of codes for all of the animations in there. So when I start to read about type, I heard that Jasmine Rossum said that fonts were like software and Peter Bob Loughlin talked about how code we can use code to automate design. So those type of ideas help me kind of like to match code with type. And I realized that letters are like variables. This means that you can assign any value to any letter. For example, in my case, I assign parts of the pattern to each number and even the space matters. So some of the numbers up there doesn't have any graphic but it has a specific metric. So everything is good in here but to make an actual functional pattern, you need to store letter combinations like the combination of numbers to have the arrangement of the pattern. Things like names, dates, text are also letter combinations and these are more variables. So to make this, to store all of these values, I did a database and to be a little bit more graphical about this, this is a video. I made a site using Flask. It's a framework in Python. And in there, you can just like put all of your information. It's like a form and like this is how you store information to the database. So you don't have to know programming or anything, you just need internet. And I assign like a password so you can log in and update or delete the information if you want. So you can have like the access to the information in there. And I made a function. So every time that I knew your search, it's created. It creates like a random number, a big random number and the typography translate this number to a pattern. So the background that you see in there is a custom pattern for each user. And it's like a store in that database. So for example, in this home, it's a custom home webpage for the user. And one of the challenges that I said before is that there is no relation between print and web. So in here, I am doing the print versions in Python like in Drobot, this is a model of Drobot. I take the interface completely and it creates a PDF with the business cards with the information that you just added. So it's there and you can see that the pattern is like a custom for each user. And you can also open this in Drobot if you need the interface, if you need to see like the actual image you can open it in there. And there is the information that I just added in the other video. So it's in, and other thing in this part is that you can actually take the PDF file and open it in Illustrator and edit from there. So the interface is there if you need it, but it's not like necessary, like softwares are more like add-ons. This is because the interface sometimes are very heavy because they are loading tools and presets and things like that. And sometimes you don't need them. So by taking only the things that you need, the file is really compressed. This is part of the code. I don't want to kind of like get involved a lot in that part, but for example, you can see that I am calling the logo, the user pattern and the position and names as variables. And these are names that are shared between print and web. So like this, I'm creating a kind of like bridge between web and print and I am using typeface to do that. And because for variable fonts, we use Python in print, I am using Drabot that uses Python and Flask that is a framework in Python. So like this, everything is open source. I make sure that everything is open source so they can all communicate in the same language. And the database help me to kind of like communicate the informations and the graphic information. Like in this case, the information are like names, address, cell phone, things like that. And the graphic information is like the pattern, like the numbers of the pattern and logos and the graphics are the actual vector graphics. Yeah, so everything is connected at the end. And in here, I'm showing how you can update the information just like you did, like you just entered it and you can actually create new content too, like an article. In here, I am just doing like putting the fields that normally in editorial design you use like title, abstract content and things like that. It creates an actual article in there and it has all of the animations of the typeface that is the same as the homepage. So it's the same code, I am not doing double code. And you can actually see this thing in the print design too. In this case, I'm just gonna show like a social media post because this is great for that specific format because for social media, you need something like quick. So in this case, it creates this post that is like a gif, it's animated. There you can see it. And it's with the title that I just put in. So everything needs connected. This is part of the code of that. What I just wanna point out in here is that the numbers that you see in there is the pattern. The typeface is the one that translates that number to actual graphics. So the zero that you see in there is just spaces, is just gives the space and the numbers it gives the actual graphic in there. So this is great because at the end you can edit a file three ways. Like in a third level, you don't need to know about design or programming. You can be, for example, a project manager and you can edit the information, delete information so you are not depending on the design team. And this is great, for example, for large business that have a lot of staff and people. So you don't have to create all of the business car manually or things like that, they create automatically. And in the second level, you can be a design expert and you can edit the file in Illustrator. And in the first level, you can be a programmer and edit the files in the code part. Well, this is a database that I've been talking about. That is the part of the posts. So that is the information that I just added and the users are in there. In here, I also put the company information like the address, the logo, the telephone and things like that. And what I'm showing there is the custom pattern. So every time a new user goes in, it's created automatically and it's stored there so every user is going to have that part. And these are the UFO files. Yeah, I created two masters at the beginning, like for the logo, to have the compressed and extended version. And then to have the smooth animation in the other element, like the icons, I needed to have at the end two extra masters at the center of it to kind of have that animation in the icons, but not in the logo. In the logo, I just want to have the responsive logo. So at the end, I am putting all of the assets in the typography. And it actually helps a lot to have everything connected between print and web file because at the end, all of the things that I show, including the mock-ups at the beginning, the ones that has the tote bag and the boxes, everything of that is one megabyte in the folder. That in contrast of having the assets that is how normally we do it, the assets in one part and the print and web are not connected, it's 18.5 megabytes. So it's a huge part in compression. So in summary, the benefits of this is that you just have to make one update and everything will synchronize. Two is compression. Three is that interface is there if you need it and that is also part of compression. In four, you have the global vision language and this is thanks to the typeface too because all of the assets are in there. Then the animation is in the typeface so you don't have to animate it many times so you just do it at the beginning. And this is scalable. It means that you can keep adding icons or things like that to the typeface and everything is going to upgrade itself. Because fonts are actually very good at this because everything reads them. Every software, every application reads them so it's really great in that part. And if you do, for example, a rebranding, you can just uninstall the font and install it again and everything is going to be sync. So I'm not saying that this is a way that we should go but I want to know how can we use variable fonts to create new solutions for different environments and how can we use them as a tool to this. So yeah, I just wanted to share how I see type as also a tool and the projects that I've been doing like my typefaces, these type of projects. Normally I do like little projects and then like a big one over there for all of that. And I am working right now as a web designer. I am also doing typeface for TypeMate and I help organize now a typography of Mexico that is a Congress of type design. So thanks a lot. Thanks a lot for sharing. Thank you.