Exploring the iFontMaker App - Video Tutorial on How to Make Your Own Font using iFontMaker | Doris Fullgrabe | Skillshare

Exploring the iFontMaker App - Video Tutorial on How to Make Your Own Font using iFontMaker

Doris Fullgrabe, Lettering & Calligraphy, Freelance

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (22m)
    • 1. 1 iFontMaker Intro, Workspace, Library, Export

    • 2. 2 iFontMaker Brush shape, size, scissors

    • 3. 3 iFontMaker Arrows, Zoom, Text

    • 4. 4 iFontMaker Brush, Edit, Shape, Move, Guides

    • 5. 5 iFontMaker Scissors, Undo, Redo, Next

    • 6. 6 iFontMaker Preview, Spacing, Kerning

    • 7. 7 iFontMaker Export and Build


About This Class


In this class, I am taking you through all the buttons and functionalities of the iFontMaker application. I'm demonstrating how to add your own handwritten font, how to test spacing and kerning, and how to publish it.  

You will need an iPad, a stylus (Apple pencil is recommended), and download the iFontMaker app.

I first published this tutorial on my blog, and I want to hear from you if this is something you would like me to flesh out into a more comprehensive class. :-) 

(If you prefer writing with pen and paper, please check out my Introduction to Copperplate Calligraphy class!) 


1. 1 iFontMaker Intro, Workspace, Library, Export: hello and welcome to just pick up a pen. I'm your whole story's full grab it, and today we're going to do something a little bit different. I'm going to show you a screen recording from my iPad Pro Thea up that we're going to work with is called I Fond maker in the APP store. You can see it here on the top right hand corner. I've already purchased it. I believe it costs about $10 so you purchase it and you download it and then you open it and this is the first page that comes up. It's your your documents landing page. As you can see, I've already created a couple of phones. Your page is probably going to be empty of when you first started. And, um, that's okay, because we're going to make a new one now. So let's click on new and I'm using my apple pencil a swell here, which you can't really see. But that's why I'm talking you through it. All right, So starting off then, with a new fund, this is going to be your work area. You can see that the space in the centre already has kind of a great out shadow capital A at the back of it, that is going to be a reference alphabet. All him show you in just a minute how to change that if you want to change it, but that start at the top and then work our way down. So we're looking at a Latin alphabet here. And if you're scrolling through this little library that you will be filling with all your individual icons and lifts that are going to make up your own front, you can add, um, the basic 99 characters in the Latin alphabet are all the upper case and lower case letters , and you're going to have numbers and some symbols as well. But if you'd like your fond to be available and, um, usable with other European languages, for example, you are going to need toe dire critics and all my outs And maybe, you know, a pound sign and the euro sign. And so you have let an accented Cliffs eras well that you can put in and extensions, and you can also access all of those library options by clicking on the little world symbol here. So you see how many cliffs are in each extension, and you're not just limited to western alphabets. As you can see, you also can use kanji and Carell IQ and tie. This export button is for when we're done to configure and build the Fonzo. We're not quite there yet, so we're going to leave that for now. 2. 2 iFontMaker Brush shape, size, scissors: moving to the bottom of the screen. You're seeing the long, um, dark shapes on the bottom left hand corner that is this the size or the shape of the brush that we're going to use. And by clicking on it, you can change this brush. You can make it look a little more varied. You can make it, you know, have a little bit of an edge to it. Actually, I think I might. And you have a couple of options there. You can use an angled version if you want to make a black letter or a Gothic kind of telegraphic piece, and why don't we use this little raggedy looking thing? And then over here, this slider, you can change the size. It is by default, set to 100%. So let's make a little who that's rather large. So let me reduce that, Maybe to 70. Ah, there we go. And then now here I can by clicking on the three lines or by clicking on the percentage sign. I can tell it to apply this stroke way to all the cliffs. And let's do that because we've only just started. So you see how all the strokes that we had made, even though they were a different size, They're actually changing to to that size. And now, since that doesn't really look like an A, we can go to the scissors below it and say clear And then we're gonna have, Ah, a clear canvas again. 3. 3 iFontMaker Arrows, Zoom, Text: Okay, let me just show you walk you through all the different buttons before we get started to give you an overview. So if we're now at the dark gray, um, drawer below, where we just selected the brush and everything, you have the arrow to the left on the arrow to the right, and that is for moving forward and backwards through the alphabet. If you want to, you know you can. I think you can click on it as well if you tap into the drawer up there into your library. But, um, if you just want to move forward while you're down here, you can kick those arrows. Since you're working on on iPad, you have the opportunity, of course, to, um, pension up into to zoom in and zoom out. And if you do that and you want to get back to having 100% work window of your letter, you can click on this magnifying glass with the with the equals sign in it, and then that's going to get you back to 100% the T for a text option. If you click on there, it gives you a popular funds that will show up in the background that you can use as a reference as you're designing your own letters. So you have the San Serif Prince. You have, um, the Sarah of Prince if you want. If you want your fund toe, have thes brackets and stuff and when you scroll all the way to the bottom, you're also going to have a version of a script that you can use as, ah, as a guide. Let me see you gonna find it, Gonna find it. I know that it was only down here. It's the snow around hand, which is very similar to kind of a copper plate style. And, um so it's it's nice to have the kind of guide in the background, although I'm going to say that if you're just starting out for the first time, making a fund your own, trying to make a curse of fund where all the letters connect is going to be a little more fidgety and is going to need a lot of refinement because all the entrance and exit strokes have to be just so so for a quick and dirty kind of example. That's just stick with the San Serif print front. Okay. All right. And, um, I do like to have something in the background to work off of, and I think that's going to be helpful for you as well. 4. 4 iFontMaker Brush, Edit, Shape, Move, Guides: moving on in terms of the buttons. This brush, of course, is the signalling that we our brushes active and that we can now start drawing. As you can see, you look even, um it changes a little bit, depending on how I move it. Very nice. That is the counterclockwise bottom that I just press there to undo. But you probably thought that already. OK, so this is the brush button that we're going to use as we are drawing the letters and then next to it the arrow button and tells you that you can edit a path because this is very much like, um if you're familiar with Adobe Illustrator and creating vector paths in iPhone maker. Also, you have anchor points and basic Kurds. So if this particular stroke that we just made isn't to round for you, you can change the handles and that that will affect just this one path, and you can copy, delete and convert those anchor points as well. I believe you can rotate them. Ah, if you want. But that's probably in the other one. Okay, So which ever path you want to change which of lines you want to kind of go and make a little straighter. You can do that here. When you're done editing your path, you can click back to brush and move onto the next letter, or add some or embellishments to the letter that you have. For example, if you wanted to add a drop shadow, you could change your brush here. You could make it really, really small, and then you can add a line for a for a drop shadow. And then that might be your A. Okay, I know change back to the brush that we had change it back to 70% that we had. So it makes sense to kind of remember those numbers that you had as well. The next button is the pen tool, so let's use that. Let's use that for the B. And to be quite honest, I haven't really used this because I believe it. Only it lets you make shapes. I'm not sure if it lets you make Strokers what strokes as well. So if you if I click the Thea Paul pencil to the top left corner of the B and then to the bottom corner of the B and I drag it out. You see, it makes this kind of teardrop shape so it doesn't really It combines everything on Let's take step back, step back, step back to delete that. Because if it do that here and here and draw another one and another one and another one and then go up again, there's kind of a B. But, um, I'm not sure I'm happy with that, so I tend to not use the pedal. I prefer the brush because it gives me more control over the movement that I make. And it has, you know, um or 100 feel to it, and I happen to, like, handwritten feels moving on to the next. I can hear this crossroads, if you will. This is for scaling and rotating, so you can move the letter around. And that's going to be interesting later when we look at current ing because the yellow cross line where the base line intersects with the vertical um, guide is where the letters are, you know, connected and grounded. And so there's going. You want to make sure that the distance is kind of the same between all of them, and you can also make it smaller or larger again, with the two finger zooming and pinching and pinching out. And then last but not least, we have these layers symbol, and this is where you can fit it with the's guidelines that we haven't that I just mentioned the Yellow Cross, but this is where the guidelines come in. So very quick typography course. The D sender line, the one of the very bottom is where your lower case loops from the J and G and the Y, for example, hits the baseline is where all the letters literally sit on. The X height is the height of a lower case letter. The cap height line is where you want your uppercase letters toe to be, and then the ass end of line is where the loops of your l's and case and bees are going to hit. And you can. While in this layer mode you can move the lines across so you can, you know, top your dissenter lined with the apple pencil, and you can move it up or down, and you can top your excite line and you can move it up or down. So if you're you know, you're not you're not beholden, toothy example that you chose. You can also choose a different example. You can choose a photo that you might have. I don't have any ready right now, so I'm not going to go into my library where you can choose. Let's cancel that or you can choose None whatsoever weren't. If you just want to do a free form alphabet, then if you go to the next letter, you don't have a C there. But I kind of like the example. So let's let's move. Um, with a basic, you know, example that your alphabet and, um actually we can leave the excite kind of halfway if you want. Or you can reset the guides to fit with the example that you have and to adjust it. And then, um, that concludes for the demonstration of the layers. But 5. 5 iFontMaker Scissors, Undo, Redo, Next: that the scissors we've already kind of talked about later. Um, actually, let me show you something else. If we go back to the A. So whenever the brushes active, you're going to see the letter that you already made. So I'm going to stick with the brush now and now, for example, when you clear click on the scissors, you have the opportunity to copy all. And then as we're moving forward into the Latin, accent it once. If we're finding a capital A that has an accent on it, we can click the scissor again, and we can paste so we don't have to rewrite all of those betters. And then we just add the accent on top. Ebola ready to rumble, you know? So let's go back to where we were the next of the scissors. We have the counter clockwise, which is the undo button, and then we have the redo button and the triangles to move through the alphabet of already Shoji. Okay, any questions so far now, moving quite quickly. I'm going to put all the letters and I'm gonna just put the basic Latin alphabet letters in , and then I'm going to show you how to how to export it, actually. Okay. So now you have the option to do all these. You can move through quite quickly and make them whatever you want them to be. Add Maybe a little flare, if you like. 6. 6 iFontMaker Preview, Spacing, Kerning: And now here. When you go on the preview button, once you have all your letters ready, you go in the preview button and you can start typing a and whatever letter you don't have ready yet is going to be great out. So we only have a B C D in the caps lock. So that's two. That's right. Cab. We need the caps. Look, come on, Cab. I can write cab, I can write bad, and those two are already nice to look at in terms of turning. Turning and spacing are two different things. Spacing is from the letters as a whole to one another with the relationship they have to one another, and how far apart, or how close together they are. And Kern Ing is specifically for letter pairs. So sometimes when you have a triangular letter like an A, next to around, let her like a D or an O there. There's a lot of white space in between, and you want to visually adjust the space so that it looks as if it's the same outside the letters as it is inside letters, because that is what makes you know, calligraphy, good looking and we want to make sure that everything looks good. It's not a mathematical thing. It's it's more of, Ah, optical adjustment and we can with iPhone maker. It makes it really easy to kind of play around with it and see if I drag the letter spacing back and forth a little bit. So say, if I wanted it to be a little more condensed, I would go to maybe minus 20 22 and then the word spacing I might to make sure that the difference between cab and bad is illegible and that people don't think it's I'm writing cabin. Um, I might set that to be a little wider, okay? And then you can click onto the current ing's top. And this is where all the different opportunities for the individual that your combinations come out and you can select, um, various options for you pretty attacks that have been pre written, where you can have a look at what what they look like and where you can go in and adjust the current ing. And so we haven't really written that many letters yet, but there is one, um, about the capital letters, a triple a a B a c a. Those are called necklaces. So those are the ones that we're going to look at. And I think the the A's next to one another. Good. But, for example, that a following the B has it a wider space than to be following the A. So I'm going to just tap my apple pencil to that second a and I'm going to move a little closer. So now all the days that will follow the bees will be closer, just like all the A's following. The seas should probably be a little closer and closer to the D's as well. Definitely the efs as well. You get the idea. You can change all of them too, The visually equal to have visually equal distance, actually, maybe. And let me put that the over just a tad. So the bottoms off the letters, the bottom bowl and the stem don't touch aren't quite so close. Okay, And then when you're done, you can have phrases you can have a list. Ah, or you. So this is what they look like in a phrase on this is what it looked like in a list, and you can take a note of thes numbers, and you can make sure that you, um that you apply the same numbers too. Uh, um, toe all options. Going back and hear a pound. Graham, if we had, um if you wanted to add Ah, the more you can do that as well. You have the opportunity here to add specific ligatures, which we haven't done yet. And when you're done with all your letters and when you're done with all your turning, you couldn't click done. 7. 7 iFontMaker Export and Build: And then when you're ready to export it, you go up here and you say configure and build front and then you give it a title that say , uh, big brush test and then you write your name because you are the author. And then I generally set mind to private unless until I'm done tweaking them and testing them. If there's a contact, if there's a license, if there's a U R L. And then you can build it online. And, um, the longer the morgue lifts you have, obviously, the longer it's going to take and it gives you a it gives you a place online where lives inside the app. Let me just take a screenshot of this so I don't lose it. And so 15 41 12 is the pin because we set it to private. If we set it a public, there wouldn't be a pin. But if we click on here and say we open it and then we add the pin, it already copied it Perfect. And we say enter. And then I found Maker gives you this page where it has a bunch of, um, text already ready. And since we don't have a lot of letters. You can't really see a lot. So let me show you one where I have a little more letters and we can do done go back toe documents, and I'm going to show you my script. Able Beautiful. So this is now what it looks like when you have all the letters filled in. And I found Maker gives you, um, text. Actually, let me see. Can I? Here we go. We can scroll over and you can see all the individual letters. You can see what it looks like, but the text that it's made up and so this is what then where? I would suggest you download your fund on you tested in a couple of adobe applications or in a couple of were processing applications and, you know, maybe send it to a few friends of yours and have them write some things out and tell you if there is some you know, some some big mistakes. If they find some letter combinations that you haven't current properly, and then you can go over that and you can go back into the app and fix the mistakes and rebuild it and That's it. OK, I hope you enjoyed the overview of iPhone maker. And when you make your own funds, please let me know and put your hashtag just pick up a pen on it and tag me if you post it on social media, I'd love to see it. Thanks.