 Hi, good afternoon, my name is Anna, and this is Ricardo, and together we have a design studio called Mufatura and Pined. In this talk we will try to explain a bit about a series of workshops that we started in 2013, and since then we've been doing them in different places, and each time iterating on the process of what we do during the workshop. So the workshop is called Type Bits, and what we wanted when we started building this workshop was to do a workshop where people would design a font together, that it would be open to anyone, so it didn't have to be a designer, and you could be there and learn how to design a typeface, that we would go through all the steps that are involved in font creation, and that in the end we would have a finished font that you could use. And we thought about this kind of workshop because we had our own experience of doing type design workshops where we would spend a lot of time discovering new things or exploring type font editors, but we would end the workshop without having produced the finished something, and also our own experience doing type workshops before, and the problems that we had to deal with, and so that's how we started. And we had a set of principles for the workshop, so we decided to go with a grid-based typeface design because we wanted the workshop to work for everyone, either designers or not designers, and vector outline fonts are harder to design, so designing within a grid is a good constraint, also a good constraint if you want to get, if you're getting creative, and you have a lot of decisions and possibilities to explore, and the grid helps you focus a bit more on what kind of thing you will do. So we went with the grid and we decided the workshop would be aimed at designing bitmap fonts. They also make it easy to understand the different parts that compose typeface, like the x-height, the descendants, the excendents, and this is also part that can take up quite a large chunk of a type design workshop, which is introducing type design in general because it's a very complex subject, and by going with this kind of approach we were able to make it much quicker. Yes, because I also forgot to mention this workshop usually has a duration of three to four hours, and in that very short amount of time we start from scratch and we end up with one or more fonts depending on the number of people that are participating. The grid is also a good restriction to to have consistency in the typeface because it's easy to maintain the width of the lines and the curves, and that's really important when you're doing a typeface together with other people. So we start using only pen and paper, and that's also a very important thing we found because if you go into the computer then you have all sorts of things that you can get distracted with, so we just have paper and pen and everyone starts drawing individually, and we go from there. Paper also makes it very easy to share the designs that you're doing. You can just show the paper and it's pretty easy. You don't need to send files or connect your laptop to to any kind of device. Paper also was our way to deal with with version control because when you have a lot of people working together in the same project you need to have some kind of system to organize the collaboration and to organize the process. So with paper we were able to create this kind of analog version control, and it was also a good way to introduce people to things like gits. It's a very soft way to let them know how to pick a letter that they want to draw and not having anyone else drawing the same character and also knowing who is doing what and what's already done and what's missing. So that's how we do it. We go through several quick rounds of drawing. We start with people drawing individually, and then as we go we have to make decisions on directions until we get to a phase where we put people together in groups and then they develop a single typeface together. So we start with people drawing letters individually. We pick some directions and then from there we try to consolidate on a direction. It's really hard to make decisions because it's not very objective what would be the best choice when you're presented with a set of possibilities that people just draw very quickly. And so we have some discussion with the participants where we see what each person has done and why they decided to do something or not. And then in most cases because we have large groups, me and Ricardo take the paper of the benevolent dictator for life. So we take the responsibility of making the hard choice and we say to people when we can't reach a consensus quickly which direction we will take. And we have no problem with that because it's the goal of the workshop to go from scratch to finished font in very short time. And we know that in the end the font that we published is an open font. So anyone can go back to it and do whatever they want that they didn't have the chance to do in the workshop. And it's something that comes from free software which is a field that we're close to. So we just borrow this methodology. We have people drawing together in groups as we go through the process. And it's really nice because they can show each other what they're drawing on paper and discuss. And from there we go through all the steps. So after drawing everything on paper we go through the digitizing process, then spacing, publishing the font, doing the font log, having the license. And then if there's time also working on a type specimen which is always a very red-fine thing. And so these are some photos of the letters. And in all the process we use only free and open source tools. We will go into further detail a little bit ahead. And the fonts that we that we do in the workshops they're always released under the open font license. While doing these workshops we also in a way went through this pad of trying alternate font editors to design in typefaces. So from our experience before we had a really hard time installing software in everyone in all the participants' computers at the beginning of a workshop. And that would take quite a lot of time. After that we decided to drive our tool machines. We had a good experience with it. But it was also a bit hard when it come when we come to the part of sharing the files that each person is working on and how we do that. And so in a way we came to this idea of working with a text editor. And it's been a really good experience because people are very familiar with this kind of interface. So you just explain the rules that they need to follow when they are digitizing the drawing of the character. And there's no interface scaring you or pushing you into trying something else because you just have this very specific and very clear task. And it was a line that we really liked and we continued on exploring this idea of designing typefaces without a font editor. These are some of the fonts that we did over the years. Well of course because our motto is really early, by the end of the workshop it needs to be out. We know there will be bots. We know it won't be perfect. And that sometimes is really hard when we have a majority of designers participating in the workshop. But we force people to just go ahead and deal with the fact that it's not perfect but it exists. And that's already really nice. Okay so I'm not going to move towards the more technical aspect of how we go from the paper designs into the digitizing process and the font generation. And where we were led to after iterating over the years on different ways of working. So everything that I'm going to talk about and also most of the points that Anna made are actually on a documentation website that will share the URL with you in the end. But where it all started. So this was one of our starting points for our current toolchain which is the Graphicware Bitmap Font Building Framework built by Lasso Fister who is over there and who we couldn't yet thank enough for coming up with this nice with this fantastic library which is pretty much a new font. I don't know how new it is but with a particular font format where each glyph of a bitmap font is described in a text file in ASCII art. So in that format like dots are empty spots the hash characters are the field spots. And each one lives on its own text file. And additionally it comes with a really useful generator that picks these text files if you've laid them out correctly and took care of the metadata which is still a bit complex but we'll get to that. You can actually generate several weights so not only can you build like the usual like the free as in freedom so that's like the simple output with little squares as the pixels but then you can come up with these fantastic variations. And this this was a revelation for us to begin working around and building our pipeline around. So one of our problems as well in this workshop so we started using this but we always needed like half an hour at the end of the workshop to get everyone's files put them on our system run the build command hope that everything gets built and then push it back to put it online documented by hand and that was kind of a bit of friction in the process that we tried to solve. We all also used git in our own computer we would pass out a sp stick so that people could copy their text files and then we put them we would put them together this this was really I mean it worked but it was really stressful because then you had really anxious people wanting to see their files and you're like sorry I mean this will take a bit so we refined our process and came to something that we are kind of really happy about and wanted to share. So again in this line of we would really like people not to touch a font editor. So we tried our hand at using GitLab which for its various features became a really useful tool for us. So a font repository comes with a folder with the glyphs and each text file is a letter and the cool thing is like GitHub and GitLab have this browser editor you can edit text files directly there so you can actually edit the characters in the browser itself which was excellent for us like I mentioned we were struggling a lot with getting people to use to be able to run a font editor that took a lot of the initial time even with virtual machines which were a really great tool for workshops because they make sure that everyone is running the same thing but first you have to get people to download the virtual machine software whatever it is to download the virtual machine itself or pass it around and by means of it being at least two gigabytes in size it takes a lot of time in the beginning of the workshop. Right here then everyone just needs a laptop with a browser and they can actually work on the on the time. So what we do is we create a skeleton empty repository but then people go in and fill out as you see like it's the glyphs slash the g.txt file so they just go through each one and it's really easy to explain this way. So one of the things that we recently like last year took to make was documenting all this process and also the technical framework and one of the things that we are also working on is documenting the font format itself which is getting there and it's still a bit of a work that we need to do but if you're curious about it we are documenting it besides the documentation that you will find in the original package but we use a lot more we like using went beyond just using GitLab as a version control system because we realized that another source of friction was generating the font files and then we commit them to the repository so people can download them. That's fine but it requires manual work so we would have to run the program like the generator we still had to do that. Pull the repository at the end of the workshop run everything hope for the best and then recommit that. So we solved the problem of the USB sticks but we still had the last minute dependence on ourselves to finish things but then we started reading about this really cool thing called continuous integration which I see cringing from part of the audience but it can be a huge field but basically and the very layman's explanation is if you have a Git repository on every commit do something usually that's done to test your software package like to run tests every time someone makes the changes to make sure that nothing broke or if something broke it just emails you right away instead of you finding about that a year later but you can use it to build like packages from your website build the binaries but essentially you can run anything on continuous integration pipelines so basically you can you can put in whatever collection of tasks and things to do that you can that you want and GitLab I suppose GitHub has similar stuff but we're sticking to GitLab. They are pretty okay with us posting like a docker file and again we're thankful enough to have friends who understand docker because we certainly don't. Well actually it's not that hard terrible to understand so this is basically a docker file for GitLab to tell what the continuous integration look like so what we do is basically it creates a new computer and GitLab server installs the dependencies and runs stuff so we decide okay so it installs all the dependencies it like font for which is used behind the scenes to generate the font and then it generates the font itself in GitLab's computers not on ours anymore and it does that on every single change so someone changes a letter and they click okay on the GitLab interface it gets committed and it gets built immediately into a font file and so yeah you get like this terminal from the GitLab interface that's running your pipeline and in the end you get what they call artifacts which are the generated files so not only do we generate the TTF, SFD and OTF file but we also make like this mini specimen with font forge I think it's called font image program that shows you the whole characters and that brings us to a really nice automatically generated reading that comes with like this tiny specimen the font downloads that link to the canonical links of the artifacts they have like a fixed link and so as they get generated everything gets updated to to the most recent version and I'm pretty much about to end the last thing that we have been also working on in this on this pipeline well so far this really makes our work completely painless because now we don't have to generate anything we can just keep going until like the last minute of the last minute of the workshop and we can still insert new stuff and it gets built by GitLab in a minute and then the font is unloadable and this is a pipeline that we're really excited about it took a few years to fine tune and a lot of support by by friends and organizations who invited us to to do these workshops and test these principles and also helped us like for the docker stuff and so now what we the most recent one was there's actually a specimen page so we included a html basic website with CSS and all that finishing and it also gets built with the pipeline so as soon as you start the font and start working on it actually if you fork our fonts and you'll find them on the URL that I'm showing here right now if you fork them you get all of this for free so you can actually go in there fork one of the fonts that I was showing changing characters and your fork will generate all of this for yourself which we found as we were showing this was pretty precious to have such an autonomous pipeline for building fonts again we're not designing fonts for I mean these are bitmap fonts for teaching for educational reasons like an outline and we're interested more than producing the tight faces with all the checkboxes tick we're really more interested in how can we still design tight faces but avoid some of what we think are the kinks in the type design process namely in this case specialized software to to make tight faces so yeah this is pretty much it so this is our documentation website which we are still building up but you can find more if you're interested in the little details so there's stuff like I didn't talk about like the template for a new font if you want to generate it there is a command line tool that you can just run so it generates the base of the font and you can just do a workshop like we did and a lot more stuff so if you're curious about the the process behind the workshop behind beyond what you mentioned that's the website and that's uh thank you for your attention