How To Make A Custom Font Using Fontself

[Music] seven reasons why you will love hypocracy you guys gonna love this episode we're gonna get a little crazy I'm gonna do something I've never done before I'm going to encourage you to make wild custom personalized typeface stick around [Music] we're gonna get into how to make your own custom fonts this episode is sponsored by fot self the question you might be thinking to yourself right now is does the world need another poorly designed typeface and the answer is a little bit more complicated because normally I would just say outright no I've opted they're all only recommend a handful of typefaces for people to use so am i doing at about-face just because we're getting paid to do this nope that's not it at all so my answer is maybe Navy and I'll talk about that now the founders of font self these guys I like going through this catalog in a little bit they're on this mission and they think typography is this untapped self expressive form of design of creativity so they believe that everybody should be able to make their own font as a form of self-expression so they call it type aa cracy its typography and democracy hypocracy you guys get okay hypocrisy well here's the thing if you were like me you might be a little reluctant to jump in here for a number of good reasons I can think of three at least and the challenges that we face in this is really summed up here from Greg Lindy he said that the first 90% of the job is great and it's fun this is true about all creative things not just designing your own font but the fun part is the creation and all the possibilities it's that last 10% where it becomes really tedious and he's a well-respected world-renowned font designer among other things so the image of The Tortoise comes in where it was fun at the beginning and now things are starting to slow down and doesn't get fun anymore well that's about to change well the three challenges that I see that are one it's very complex you're talking about learning new software dealing with kerning pairs and just tedious hours days weeks worth of drawing utter forms just so you can see something and use it so back in the day there were only a handful of programs and they seemed very intimidating hence the reason why in start and - as naturally things that are complex take a lot of time to do and one of the things that I'm doing today which takes a lot of time but not aware of is I have vector drawings of letterforms and I literally copy and paste and arrange them one at a time so you can imagine if I'm trying to do this at any scale it's gonna take forever again probably one of the reasons why I use a commercially prepared font and number three as we've mentioned is it's difficult and tedious it's hours and hours staring at your screen learning new software that you don't already know how well all that's gonna change with this software font self so here are five reasons that I put together as to why you might want to consider designing your very own font okay here we go number one it's prestigious you think about world-renowned designers the thing that seems to separate the average designers from the upper shelf designers is that they've been able to create a font and we know and love and use their fonts and we know their name in in some instances like Helvetica or Futura with Paul Renner we remember their name four decades after the creation of the typeface itself that's pretty cool so it's very prestigious to I've noticed that some design and branding firms actually release a custom version of a typeface that they either had commissioned or drew themselves they could have modified a commercially available one or just drawn one from scratch and I'll show you some examples in a little bit so in a way being able to say that you designed a custom font for your client for their exclusive use that's pretty cool don't you think it's free rather than cutting and pasting either bitmap or vector graphics together to create a usable word now you can sit there and create a font in the time that it might take you to arrange one word you can create the entire font family you can share it with your co-workers you can share it with your staff and you can share it with your clients pretty awesome for guess what in this super hyper personalized world if you make your own font and you don't distribute it to the world which is your choice you alone have the exclusive use of that typeface that you've designed that's pretty cool in it of itself and last but not lease is that I'm gonna mention two people that I know at least two who make passive income from the fonts that they've created and shared with the world that's also really cool so a lot of you guys have seen us talk about creating a passive income business model well if you're a designer you might sit there and think what can I do that's a value to the world well here's your answer so you guys want to stick around for the remainder of this episode because we're gonna get into some design theory about what you need to know just some fundamentals and a little kind of peeking around as I draw three typefaces let's see how it goes okay before moving forward let's start with the Masters of typeface design max manager and eduard hoffmann the designers of Helvetica the most ubiquitous typeface in the world I love it and if you're paying attention you can see that I'm using it right now so there's no news there then there's Giambattista Bodoni which I also love as a typeface Viktor Largent who designed Times New Roman Paul Renner Futura which is the namesake of this channel I love futurus so much I called this company the future the food tour then there's Adrian Frutiger who designed fruit agar and a veneer and that's him right there holding a type specimen book I think and then there's cloud Garamond the designer of Garamond well these names you may or may not be familiar with but if you're really into typefaces and type design you definitely know who the Masters are but we're here in the future so let's talk about some present-day superstars in no particular order there's Greg Lindy who I mentioned Jonathan Hoffler who you may or may not have seen on abstract the Netflix series Susanna lick oh and Rudy Van Allen's for emigres Erik Spiekermann and Tobias frere-jones here are some of the examples of the typefaces they've designed mrs. Eve's one of my favorite serif typefaces is designed by Susanna lick oh and I love it for all the little characters that she's created a classic typeface beautiful serif typeface and here's some from Greg Lindy from his his company Lux typo and look at this typeface that he created called sudafed sans and this was for Johnson & Johnson comp and it was a way of using a custom typeface for the entire marketing and packaging efforts to keep everything super consistent I think that's a rad idea and then Jonathan hofler and Tobias frere-jones they worked on knock out together and Tobias is known for also the much beloved Gotham typeface which has been used on so many different branding pieces from Saturday Night Live to the Tribeca Film Festival last but not least there's Erik Spiekermann who designed Mehta awesome typeface now looking into design firms world-renowned that have used custom typefaces I could think of none better than Michael Beirut and pentagram this packaging that he did and he presented this on stage for nuts calm I thought was really cool it's bright it's fun it's colorful it has a very personal feel and he shared the story about how he took out a brush and started to draw a bunch of these word marks nuts calm then he turned these letter forms into a typeface which allowed him to create entire identity and branding package for nuts calm and according to him after they started doing this on very eco friendly materials and adding some personalization with these cute characters sales skyrocketed not convinced yet I have another example from Michael Beirut for walk NYC and here he was really looking for inspiration from his design mentor Massimo Vignelli and looked at the subway station signage and these little dots that are synonymous with New York City subway so what he wanted to do is take the classic cut of Helvetica and change one aspect of it and refashion it as a custom typeface for his client so here's what he did he took the tittle which is that squared dot above the eye and changes into a circle these are the clever little things that Michael likes to do to make sure everything is custom and bespoke for his client so that one round dot is connected to what Massimo McNally had done that's it that one little dot now he renamed it new Helvetica dot with three weights regular medium and bold and used it throughout the wayfinding system and he also went so far as redesigning the icon system to reflect the characteristics of the typeface itself the skirt of the are matches the leg of the are the shoulder of the C matches the roundness of the bus and so on and so forth the thickness of the tires matched the stem of the R now I mentioned earlier there are a couple of designers that I really look up to who do quite well for themselves selling fonts and Ian Barnard talks about this that fonts have become his primary source of revenue of passive income and he has a bunch of typefaces if you to go onto site and check it out here are a couple and then there's a good buddy dustin lee who you guys may have recognized as one of the voices behind our episode called passive income business and dustin talks about a lot of different things but for the sake of this conversation i want to focus in on fonts in particular so here are some of the fonts that he offers as part of the retro supply company this one really caught my eye called block print which is somebody literally cutting out a linoleum block and printing this that give it that super cool feel last but not least their sam parrot who's used font self to design a couple of typefaces and he too is doing quite well this one's called opulent it has a really beautiful brushstroke look to it one thing that you notice here is it has transparency it has grayscale so now with the use of new font technologies we can include bitmap images as part of our font not just vector and we can also include color this is really cool look how he's using this typeface so it's called avalon OpenType and it's an SVG font which allows you to use color and a bunch of other tricks so there it is there's my pitch to you if you're a designer if you're interested in design or even just having a bespoke element in your design give font creation a shot okay so you have no more excuses but to get started now alright this next segment I'm going to talk about fundamentals that you need to know just the basics so we have a shared language with what good fonts look like and the anatomy of typefaces so we'll start off with terminology and Anatomy a typeset this word typography and I want to talk about some of the terms first up is the baseline this is where your characters sit on except for the descenders and I'll explain what that means in a second and at the very top is the cap line for the capital letters and it's hitting the cross bar of the tee and that's it's on top of that and next up is the x height and X height is named after the letter X because typically that letter ax has flat serifs on the top and bottom where as you'll notice the Oh overshoots the x height and the baseline so that's why it's called X height and lastly is the beard line sometimes referred to as the descender line and you think like why is it called a beard line and I think it's because typefaces of typeface and a lot of the terms are based on human anatomy and you think of the bottom of the face is the beard and that's what that's sitting on so that's where the the center of the P is sitting on the beard line okay so now I've colored all the parts that I want to highlight and of course when you dig deeper into this kind of stuff you'll see conflicting terminology and what people call things I did the best to my ability to be able to call out things based on cross-checking many things so let's dive into it so first up from left to right is the bar of the T and then right next to that is the beak of the T it's dipping down so it's called the beak and then the vertical stroke is called a stem the bottom of the Y it's kind of like a cat so we'll call that a tail it's wagging its tail and these little things on the left and the right of the letter P are called serifs and serif is French I believe it means feet so serif so with feet it has those things on it this is called the counter it's the closed part that's the white area that's trapped the negative space that's trapped inside the O on the top of the lowercase G is called an ear that the little thing that sticks out it kind of looks like in the air or nose but they call it an ear and this is a two-story G and it has the top story in the bottom story and the thing that connects at the top and the bottom is called the link and of course the bottom is called the loop so there's essentially two oval shapes and what connects them is called link and the bottom is called the loop now if you look at the lowercase R this is referred to as the bracketed serif there's such a thing as unbranded and bracketed serif and I'll talk about what that means in the next slide so here as we zoom him there's two different typefaces here so one it Sun bracketed where the serif has no transition to the stem whereas the bracketed Serra it transitions so there's a curved drawing that connects the serif to the stem next up is the terminal it's the dot that finishes at the top of a and then you have the belly or the bowl of the a so it's a bowl and that's what you're looking at and this little thing on the right side some typefaces have this part and some do not so this is called a spur some letters do you just finish straight up and down and don't curve out like this it's called a spur and you think about the spur of a boot that's how you can remember that the stroke that's that falls below the baseline that's called the descender and naturally the thing that falls above the Exide is called the a sender and the thing that connects this strokes on the H this little part is called the shoulder and that's what that is the shoulder and that's it for type anatomy and terminology I'm hoping that now with a little bit more of understanding of what these parts are called you'll start to become more aware of them as you look at other typefaces here's a quick recap the review with all the terms up on one page so if you want to you can screen capture this and just save it for your reference next thing I want to talk about is called unity of design and is this principle that makes typefaces what they are all well design typefaces display the principle of repetition and variety so there are things that are same and some things that are a little bit different this was what makes it feel like a family unless you're doing that ransom note kind of typeface ok letters can be clustered into four groups according to the contrasting property so here we go first letters that have a strong vertical element like the EF h IL NT next are letters that have curb forms primarily the co the Q and the s and they share lots of common meets with each other and then we have the ones that have a combination of straight lines and curbed the best example I could think of is the letter D and the letter B as in baby and then last but not least there's the obliques the ones that have a diagonal line as part of the character so here it is in review the four different groupings the clusters are vertical curved combination and oblique now if we step in a little bit closer we can also see that there are commonalities between certain letter forms and this is a really cool part because once you draw one letter you can reuse parts of that letter to generate many other letters so if you draw the D which is a combination a vertical and a curved according to the clusters that we just talked about you can see there that the bowl the D the bowl of the D is mirrored in the C the G the O and the Q so it's not as hard as you think to design a typeface if you just draw one of these letter forms you can use parts and pieces so if you're experienced typeface designer you already know this that you keep certain elements separate so that you can cut and paste and move them around okay I want to take a moment also now to talk about something that some people miss which is curved letter forms overshoot the cap line and the base line so when you draw the letter O it's not supposed to sit inside those two grid points it's supposed to overshoot it goes above and below those two lines next we see the diagonal strokes of a B W and M also share a lot of common parts if you look at the letter A and the V the V is essentially the same as a but just turned upside down and it's missing the bar the crossbar again the W has shared elements with the V as does the M okay here the F the E and the B in February also share common components as you can see here the B R K and P share common elements as does the ATF and are in the lowercase version of this typeface okay enough of me talking it's time for us to go and make something so here's my plan and if you're paying attention you can tell this is an SVG font because actually has color inside I'm gonna do three different types three different fonts for you one I'm gonna do a hand-drawn one which I'm gonna do in the studio in just a second I'm gonna take an existing typeface i'm gonna modify and save it so that i can have my own custom version of a typeface and i'm gonna convert an existing drawing into a usable font meaning there are vector elements already so i'm not gonna do this from scratch it's gonna take a very long time and i'm gonna show you how easy it is to convert an existing vector drawing into a font that you can use that's it so let's go and drop i'll see you guys back in a little bit so hang in there all right it's another day that's another opportunity to make some typefaces so i brought along with me two markers a one has a chiseled edge and one has a blunt point and I think this could actually create something of an interesting look because it's gonna be inconsistent it could be streaky and I want to have some fun with this and I encourage you to do the same so I'm gonna start off by drawing just a few letters I've never done this before so let's see how this works out let's see what kinds of things I'm gonna learn in the process I'm just gonna draw the alphabet right and I'm gonna draw a few letters to give myself some options later on that looks pretty good B I'm just gonna do all caps some letters are not as interesting to me I just spent too much time drawing goes once I'm done with this I'm gonna have Jonah photograph this I res and I'm going to convert them into artwork I can auto trace or I can keep it bitmapped so it has some of the variations as you'll see cuz the ink does not dry smoothly they the GMO I'm struggling with here back to vertical letters simpler so I'm writing this kind of like the way I normally do my whiteboard sessions so we will have a very usable font that is custom totally unique to base based on my own handwriting style which is really cool because you could do the same and I have to admit it's a little less nerve-wracking to do this I'm actually not writing anything and thinking at the same time usually when I'm doing the whiteboard sessions it's hard to write and talk at the same time and spell correctly and if you're nervous about doing something like this you could have some practice letters about where I was - what do you think do you think you can do this that is neat I don't think they want my father well maybe they really will want your font because it'll be very unique now one thing that I'm not paying attention to and sometimes this happens when you draw an angle your letters start going uphill or they start getting bigger on the right side because of the distance hopefully that's not having too much there we go so that's one that I'm gonna do some numerals right now so let me do some numbers you can even draw alternate characters for example the one I might want to do one like that I might want to do an alternate to the 7 I think that for the most part these are pretty good try to do one more the inside of the six is clear okay oh I forgot punctuation so I'm going to do quote apostrophe period exclamation let me do that again colon semicolon what else am I missing oh yeah what's your question I'm just kidding mmm minus symbol plus symbol / short underscore long underscore tilde surprised even though that is all slashes backslash oh the divider okay I think for the most part we have a pretty complete alphabet and you guys now we're gonna take this and I'm gonna jump into the computer and I'll see you then net I finished drawing my letter forms in the whiteboard I'm going to jump on to my Macintosh computer here and open up the file in Photoshop which is what I have right now thanks to Jonah I was able to get a pretty straight flat photograph of the letter forms but as you can see here there's some lighting changes here you can see that there's a little bit of vignetting so the first thing I'm going to do is I'm going to adjust the levels and I can do that by pulling up the levels and then making it go whiter in the highlights but I noticed I can't get rid of everything around here so that's good enough for what I'm trying to do right now so I'm going to take the marquee tool select this in preparation will hide this for a second command shift I to invert the selection and do the levels again this time I can really push it far oops what am I doing wrong here levels here remove the black permit there we go okay so that's pretty white now I'm gonna invert that selection again and then do another levels here and see what I can do with this so I want to make it darker and the mid-tones and then make it wider elsewhere and I'm gonna just keep adjusting this until it looks right to me and that's pretty much it now with this I'm already noticing some problems and perhaps why it wasn't a great idea to draw this on a whiteboard after all so you can see if I pull some rulers out I'll do that if I pulled some rulers out you'll notice that my letter forms aren't sitting on a base line or on a cap line this is gonna be problematic for me I could see also relatively inconsistent letter forms if I'm create a new layer here I'll show you what I mean by draw a box here and color that so then if i duplicate that down and snap some guides here let's do it to the baseline here and pull the guide down right here and then pull the cap line here you can see that this a and the B is much much bigger than the rest of these letter forms it's gonna cause a problem I can see that now and in hindsight would have probably been better off to draw a baseline and a cap line even an x height line even though I don't have any lowercase letters here and then draw that this is why it probably makes a lot of sense to be drawing this on tissue paper aka tracing paper that way you can draw the lines underneath and then have a clean piece of paper on top this is also critical if there is an angle which you're drawing the letter forms to keep the angles consistent versus it rotating around and not being a consistent angle so whatever live and learn I'll have to fix this inside of Adobe Illustrator okay I'm gonna jump in Adobe Illustrator right now and I've placed my scanned and cleaned up text in here and like I said I could spot some problems and I'm gonna see already I have a lot of stuff to fix in here but what I need to do is go and do a live trace on this and I have mine docked right here but if you don't know where that is you go to window and you go to image trace image trace and I'll pop up a window and the window look just like this now the default settings are pretty much what I think I need which is to do black and white and I'm gonna click on preview here and it's gonna warn me all the stuff and you're gonna click OK because you know what I live dangerously so let's say okay now we zoom in here this is the preview and if you were to slide the threshold it'll give you more or less detail I feel like this is pretty good if you want to get really into it you can control the number of paths the corner is the noise etc and I'm pretty good with this so I'm gonna go ahead and convert this now and hit trace so it should be done and let's go to preview it's not done yet so what I have to do is go to in betrays where are you image trace it's right here under object I'm gonna image trace I'm going to expand it up there we go expand and that's pretty much it because it's nice and clean to begin with I don't have too many things to fix now what I have to do is I have to separate these because there's a white layer black layer I don't understand but if you ungroup command shift G I can then delete this part of it and now I'm left with the clean letters now what I have to do is establish a baseline and an X baseline x height and cap line so I'm going to go and draw that let's say that the letter let's say the letter B this letter B looks pretty good let me start working with this okay so I'm going to hit command or pull out some rulers I'm a snap and baseline in there and I'm also going to zoom in here just to see that and I'm gonna drop in a cap line and some are usually a little bit above the middle but you know what I'm gonna do Center I don't have any lowercase letters to deal with right now so I'm gonna draw a box like that fourth dimension you want to go and turn off snap to pixel that's gonna mess you up so make sure you turn off snap to pixel okay I can already tell because it was creating some problems for me let me grab this and let me fill it with some color so you guys can clearly see what I'm doing here but I'll bring it right next to the bead that I think I wanted to use you can see it's a little bit off I'm gonna just snap it to the guide and then drop another ruler right there so I know that's the center and I also have to establish a horizontal with a stroke and I'm gonna look for something that I think looks pretty good let's say the letter I oh no this e let's say that we're gonna use this e right here this e looks pretty good so I'm gonna steal this e for right now and I'll move these other B's out of the way this is off okay bring this e in here and lo and behold it is I have a little extra something here what is going on there's some extra stuff there's some extra stuff I didn't get rid of this it's all there huh okay we have some extra bits here I'm gonna have to clean up where are my guides I need to lock these guides okay getting into this so delete that bring a seat down here and I'm gonna make sure this sits on the base line right there move it right up log all right there okay okay I got pretty lucky with this cap line and base line and that's the middle so what I want to do is establish a vertical stroke width and a horizontal stroke width so let's say this one seems pretty to be pretty consistent I'm gonna bring it up here I'm gonna pull it out so you can see it yeah that's about right and then I'm gonna bring it down here feeling pretty good about that and then I'm gonna do one in the middle I'm grab a by the center Anchor Point and hit that middle line right there theoretically that's the center and now I can snap some guides here here here and right here this part is pretty tedious but once we get going it should be pretty quick the last thing I want to do is take this and rotate it now you guys should know this if you're paying attention to the programs that we the videos that we produce the vertical stroke needs to be thicker than the horizontal stroke so as reference I'm delete these right now and we know this is exactly the same so if I bring it over here you'll see that it is a little bit thicker so I'm gonna move this over and I'm making a little bit bigger than that okay let's say that that's a stroke so I'm gonna leave these off to the side so that we have those as reference okay so the vertical stroke is going to be thicker because it needs to be for optical saying otherwise it don't make it feel too thin okay so those are there we're good to go now I want to show a couple of the things I need to do and then we can get really going here a couple of things I need to do is I need to label this this guide baseline and this one cap line for font self to recognize it and that'll be significant later so I'm gonna go into my layers and twirl this thing down and figure out where the heck that thing you have so I'm gonna unlock the guides I'm gonna select this one and let's see where is it there it is it's right here okay this is the one we want this one we want to call this baseline okay and then turn this one on this one will be called cap line okay and that's it no I could turn on everything else that's one critical thing took me a little while to figure that out but later on you'll see why that matters okay so now what I'm gonna do is I'm going to move everything off of this area select all of this stuff and move it off because I just oops I need to lock that back up which is command option semicolon on the Mac I don't know what it is on the PC apologize you guys that use pcs okay now I can start assembling all letters that I need so I'm gonna grab the B put it here so you have some options this a looks pretty good to me I'm gonna drop it in I'm not gonna worry too much whether they line up or not I just need to get this thing going now this C has kind of an unusual quirkiness to it that it's not quite as symmetrical as this C but I think that's okay because there's no point in me making a typeface that winds up being perfect so I can see that I have problems cuz my letters are all over the place I need to bring these letters out of the way and see what else is here I'll get rid of all that let me do command Y to make sure okay you always take these things back put them right back here okay and I'm not gonna make you guys watch that because that is boring I'm gonna just do this and then we'll jump forward when I have all the characters lined up nice and tight a couple of quick notes a couple of quick notes here okay you want letters that finish sharp like a horizontal or a sharp vertical to hit the cap line and the base line or as you want things have curves to overshoot like this one or hear it you want it to overshoot the base line so you see there's a little bit of a gap difference there and we want to do the same thing with the top so I need to take this I need to bring it up sort of overshoots now you'll see I got all kinds of problems and I need to fix this so I'm gonna use my direct selection tool move things around and now you'll find that it's a little bit more difficult to manipulate letter forms like this because there are too many points let's switch back to my pen tool get rid of that and then start drawing this adjusting it so that it still has the characteristic of the original see that I was looking for but doesn't have as many points the points will kill you it makes it very difficult to adjust the letter form alright so you can see that this process is gonna take some time now when it went to live trace this thing image trace it I mean just this here you can see that the points here should really be connected like they shouldn't be independent where you can adjust both parts like this the easy way to fix that is use your pen tool and hold down option on the Mac and then draw it out like this and then now you see that two handles are connected as they should be because you want this curve to be nice and smooth in transition down there okay and we have extra points we just click on top of it turns to minus sign and that you could adjust everything else you'll see that it's a lot easier to draw on control so I wanted to make that note about the overshoot on the top and the bottom I can see too that some of my letters are leaning left or right or whatever so I want to go and fix that so I'm just gonna rotate these a little bit to try and get them kind of straight before I make additional adjustments I can also see that this really should come down farther here so sometimes just tapping on the keyboard will get me there okay I got some problems I'll need to fix here got nothing but problems on this alright I move this up and another point to note here is I'm gonna I'm gonna grab the red here and you'll see something that the bowl of the be the first-floor bowl versus the second one its protrudes beyond this edge and it's supposed to do that otherwise it'll feel top-heavy like it wants to fall over but I can see here I got sharp points where I don't want them I want to smooth them out a little bit and throughout this process I'm gonna have to make a lot of decisions about how perfect I want this letter form because at some point it'll start to look a little too perfect and lose some of its personality but I also want to observe good proportions and rules in drawing letter forms so I don't want to create some kind of bastardized version that just looks terrible when you typeset something okay all right now I can see that this it's not really a serif but it's like where I drew the B from how it went past this I want to retain that so I have to just nudge this up to kind of like where it needs to be and then I need to fix all this stuff so I think I need to bring this down it's gonna take me a little while to fix all this stuff then smooth this out a little bit maybe it doesn't need this point yeah that's a little easier to control you see how getting rid of points allows you to do that now what I want to do I'm going to get my brush tool here make just a little bit smaller oops I'll make it smaller there we go switch to color switch to color to be something like red I just want to make sure that one draw it feels like it's connected stroke there so I can tell right now that this is not feeling like that because it feels like it went down so easy way to fix that is just bring this up so it creates the kind of imaginary line across and I can tell here this line is too low and it's going too high so we want to just draw that across like with our eye okay all right and these little things these little nubby things I kind of like now I wanted to line up with that possibly here so I'm gonna bring / like it's the end of that stroke and I overshot that line a little bit okay once we're done we'll create all the 26 characters for the alphabet and then we'll do our numerals and get those all nice and tidy so I'll jump forward to that right now all right we're back inside illustrator I realized my file got a little bit messy so I cleaned up every single thing and you can see with a lot of tweaking I got this thing to look pretty consistent I'm sure there's still some little funny things here and there but I realized in the last demo I didn't do a good job of drawing the baseline and the cap line for you and it got a little confusing and I figured out a better way to show you that so what you do is create a new layer I'm gonna zoom in here again and I'm gonna do the eye because the eye has the nice straight there for me to work with I'm gonna San Abbott outline I want to make sure again good snap to pixels off and then I'm gonna bring this one up here so that's pretty much what the computer needs to see for the cap and baseline so what I'm gonna do now is in here I realized that I need to draw something on this layer there once I have something drawn I can then I'll twirl this down and see the two guidelines so by double clicking on this let me double check to make sure that's a baseline it is I'm gonna call this baseline cap line and I'm gonna tell you something that you need to do that's critical for this to work cap line okay that's done now what I can do is delete this oops delete those two things and unlock the guides which is command option semicolon I'm gonna grab these two and I'm going to duplicate them while holding down option down here so let's say it lands right there okay so now I have cap line baseline and now I can select all of these things actually I think I could just grab this and move that red dot down so now they all they all need to exist on the same layer for font self to recognize it so this is how you avoid this which is too many layers for us looking at come on move this up out of the way I'm gonna click on a different panel so I could there we go will juice up a little bit so you can see so you see there's too many pads in there of course okay a couple of things I want to tell you about and is that each one of these letters needs to be its own object it's really important that if you had a lowercase I with like a exclamation point like this that they need to be grouped together and the easiest way I know how to do that is actually just use a pathfinder and unite them and there's some options here if you want to look at this the option that you want to do is let's see here Pathfinder options is you want to remove redundant points you want to remove the redundant points okay so it gives you a nice clean thing now some of these drawings have more points than you normally would want but I'm gonna say that it's okay and if it bothered you all you have to do is go in here and use the pen tool and click on that and click on anything you want to get rid of yeah there's a lot of extra points there okay that's all you would need to do but I think some of those weird things that when you're drawing out trying to draw a like a beautiful perfect font you'll probably need to clean up and make it super optimal but for the sake of this demo I think it'll be okay okay now what I'm gonna do is I'm gonna do my old Oh what happened to my guides I think I accidentally deleted him I'm gonna do get the guides back there we go I see they're still stuck on this layer so I need to grab these two and move them down here alright don't need that okay now I'm gonna lock the guides command option semicolon will toggle that I shouldn't be able to select it now okay anyways what I like to do is zoom out and hide the guides which is command : and just squint and see if there's some inconsistencies or irregularities that I'm still seeing and hmm it's not perfect like I can tell this part of the Oh is a little thick on the top I'm gonna zoom in there I want to fix that see so when you see it from far away for whatever reason I'm able to see it a little bit better then when I'm zoomed in that whole zoomin zoom-out thing okay I think that's a little bit better now this parts problematic for me that's because there's not enough points here I don't have three points for a circle and it really needs four gives me just enough control to be able to bring that down a little bit okay that looks pretty good this part looks a little thin here right and there's there's no rule as to how perfect or how clean you have to make this it's entirely up to you I say depending on your levels of anal retentiveness you may want to adjust that all right let's pretend like this is perfect and you can work on this for days months and years if you want but for me and for this demo I think I'm good with this and now what you do is you're gonna go up to window you go to extensions and you're gonna launch font self right there this is I'm running version 3.5 it's got some new features to it that were just released I think I'm gonna be excited about what we're gonna do here so I'm gonna click on the A to Z a couple different ways you can do this you can drag it in and then it'll tell you which one do you want it to be a DZ characters etc I'm not gonna do it that way I want to just use this right here so I'm gonna click this and it'll generate all the uppercase letters it will respect the baseline that I've created I can make adjustments here and if I do this I'm gonna type in with the classic sentence every type sends a quick brown fox jumps over a lazy doc if I hit period I haven't defined the period yet so that's some weird thing that's gonna recognize okay and what do we see here I think for the most part looks okay the t looks a little low I don't know why or maybe it's the H it looks a little high let's push H down a little bit and I think it would adjust this dynamically the e is high push it down make sure it sits remember curved letterforms need to overshoot a little bit so I'm gonna use to use my high right now [Music] here I'll create the numbers so again I'm gonna do this and hit Europe it's 9:00 and I think we're good there you make some adjustments again and I'm gonna create the lowercase letters by hitting this since I don't have lowercase letters ok now that we have that done we can hit save and the way that you want to save it is you want to hit the word or the button install this is for illustrator use only basically it creates a font and only Hillis trader can recognize and I like that because white board okay and we can select this typeface in a little bit and we can open it up in the Browse insulation folder and remove it if we need to but that's okay I'm gonna close that now I want to try out the new smart kerning function here so I'm gonna click on this button hit smart it's gonna say okay go ahead and hit smart space and Kern its gonna do its best job and it looks really good already out of the gate I can see that there's still some problems I think this is the old T it didn't adjust that so I'm gonna type in the new T it looks pretty good quick brown fox jumps over the lazy designer okay now if we want to go and make some other adjustments we can go to advanced and look at these kerning pairs and there's quite a lot of them there let's type in the how does that look that looks pretty good Danu it also looks pretty good darn okay so it's it's a made all these adjustments for us already so we don't have to do any of this so I'm gonna go back home and I'm gonna hit install so it'll save it basically and when you're ready to export this to be used with other programs you're going to want to hit save and it'll create an OTF file for you and then you can save that anywhere and use it within other programs but I think I'm kind of done with this and let's just double check I'm gonna use this let's say we have a new whiteboard session about how to skip school or skip the degree let's call that skip that degree how to avoid living debt okay so if I hit command T which will bring up my type panel I'll type in whiteboard and I've been working on this so I think that's the one I need so I'm gonna scale this up and now you can see it skipped a degree now if you don't like the way that the default kerning works you can change that so the way that you do that is you go over here and you increase the line space or the letter spacing so I'm gonna increase it by just a little bit open it up a little bit and I'm gonna decrease the line space by a little bit and once I hit install it should update and this should change hello there goes okay so I can type oops copy this again delete this there we go so I want to make it even tighter than not that feels really open to me you know maybe it's like that skip the degree how to avoid living in debt and that is how you create a custom typeface now the I want to create two more typefaces and show you a little bit I'm not gonna go through the painstaking process of doing this all over again yeah and up next okay there we go now I have a custom font that nobody else has and I think that's a pretty cool thing so just to make sure I'm going to go ahead and save this font now I'm gonna call it white board V - let's call it zero one I'm gonna save on the desktop hit save and now you can open that up it has basically you can jump in Photoshop you can use it dude for do it with it whenever you want okay that's it for this part I'm gonna come back and I'm gonna convert some other fonts I'm gonna talk to you about how to do that and we're gonna wrap this up okay so if you're like me you're able to download different typeface drawings and things like but then actually official fonts off the stock photography sites and I have such an example here called facet and you see that facet is colored and it has a drop shadow so it's got some things going on it even has a stroke on the letter forms and font self can handle all those things and it's got no problems at all and one of the things that I notice too is like if you hit this hamburger menu on the fun stuff menu and go down to font template it'll generate this file for you which shows you the complete characters which you'll need to build to have a complete and usable alphabet and a typeface a font if you will and I also notice here the naming convention here at baseline descender x height cap height ascender so I'm gonna use that when I go to name my guide somebody don't save on this I'm gonna go over here which I've already got a file set up here it's ready to go and I've created a cap height and a baseline you can see it right here cap height and baseline right over here okay so I also realized that it has to be unlocked and be selected when you are doing this for it to recognize it I guess that makes sense okay so what I'm gonna do is I'm gonna select all these letters and I'm gonna go over here like before and I'm going to hit a to Z and it'll generate it and it should come in perfectly where everything lines up what we'll do is we'll check the s if the S dips a little bit below the baseline which I can't really see here but I think that's gonna be what we need I'm hit a to Z for the lowercase letters and don't generate those and now I have both upper and lowercase there's no difference here on a font that you draw you'll probably have upper and lowercase to use all right so now that that's done I can use this typeface once I hit the word the button install and we're gonna call this facet I mean okay it's great it's ready to go and now I'm gonna test it and I'm gonna type in some words the quick brown dog jumps are lazy designer oh there's a problem here oh I see I have my two letters inverted here I didn't even see that you see the M and then here closer in the wrong order so I want to select this letter with this space line and hit the letter N and I want to do it for the caps and / kicked in the lowercase it's gonna replace it and I would also don't replace it with the lowercase and hit great glyph I should take care of it replace and I'm gonna select the M with the base line again chef M gray clip replace porque su replace now I may install I should update it there we go it fixed it so now my spelling is okay so the quick brown fox jumps over the lazy designer and I want to make some adjustments here I want to open up the letter spacing a little bit because it's such a condensed typeface let me type in the same expression over here copy/paste all right over here it looks really open but over there it does not sure what's going on I'll also want to decrease the line spacing and then I'm going to hit smart turning so smart space and kerning so just all that stuff and I think we're pretty good now so if I hit install it should update this it'll take us okay now it's making the letter-spacing really tight for me it's done a pretty good job but you can see here in the LNA it's too tight so I want to go back in here and open up a letter spacing now and hit install and see what happens okay I'm gonna do it a little bit more install there we go okay and you can play with this for as much as you want again this is pretty cool two three four five six seven eight nine which has everything with zero and exclamation question mark all the good stuff it's all working okay later on I want to make a semicolon and a bunch of other things but that's working so if I want to save this I want to be able to hit save I'm gonna call it facet and replace the other one that's fine replace it well good okay I have one more demo to show you and why this is super helpful I'm sure your your mind is racing with ideas and possibilities I'm gonna rejoin you in a second all right and for this last example I'm going to take one of my all-time favorite typefaces Petera and those of you guys have been paying attention to the channel know that that's one of my favorite type bases in fact it is the inspiration behind the name the future so there we go all right now you know okay anyways let's just say like you're a big shot and you want to be able to modify an existing typeface well you can't currently edit existing commercial typefaces but what you can do is you can convert them to an outline make modifications to them and then save them out and kind of have your own custom version that you can use I'm not here to answer the legal question of whether or not you can do this or not or whether or not you can distribute it but I'm gonna make the assumption that you can for personal use and something I've never been fond of are the quotes and the apostrophes from fedora I just they're not pretty to me and it's sometimes hard to tell if they're going forwards or backwards or anything like that so in this case here I've borrowed quote marks from a different typeface and I'm going to use them to replace these so I'm gonna outline this typeface I'm gonna ungroup this command shift G and select these and delete them and move those in here and I think they're gonna look better to be the knees yeah this might be sacrilegious for some of you and for those of you guys I feel like I'm doing some crazy thing here it'll be okay well I'll survive right you're allowed to do whatever you want and I'm not hurting anybody just doing some stuff with type so as soon as I use this version of the quote marks with Keturah people are gonna notice people who really pay attention to type will notice like hey you did something different there and I'll never tell there we go and you and I everybody else watching this video will know the same thing that we know okay the whole point is to show you what's possible a lot of times people get caught up with like well I would never do that that's not that's not proper you should never do that well sure you don't have to but I will I noticed this goes a little bit above that someone just create a little line there and bring this one into the same alignment as that make it go a little north of that cap line okay so now I can build my typeface hopefully I was able to type correctly jl p q r s t u v w x y&z perfect i'm gonna create something new get rid the old one so i'm gonna do a new font not a new style and i'm gonna select these letter forms and i'm gonna drop them in just like we've done before okay now we got that and i'm going to do the lowercase letters again it's exactly the same I'm just like these ones here and do 0 to 9 generate those those also work beautiful beautiful I'm a happy boy right now I'm gonna delete this word quote because I don't need the word quote or don't and M I just need the glyphs that come with it tell me okay so I'm just like this okay now that's done I'm going to hit install I'll call it ffv Torah for the future for Torah there we go okay now all I need to do is to use the type tool and let's give it a try that's lets use a quote and hello world let's scale this up so you guys can see us this is our typeface now let's Gotham I'm sorry let's pull up good Torah and there it is well there we go how cool is that now we need to fix the kerning here because of Kearney looks terrible and I'm gonna go in here and do the smart kerning and like letter H I don't know what that means I'm gonna sconce smart Curnutt okay hit install it'll update and save this thing and hopefully everything will look a little bit better look at that and I just solved that is that cool Wow okay so just like that we can have a custom typeface and that's it for this I'm super excited to see what you guys are going to come up with and we're gonna review those alright as I mentioned to you guys before this video is sponsored by font self and its easiest way to make your own fonts they have excellent tutorials on their site in both video and blog style format so I would highly recommend you guys check it out and here are some of the things that make it so cool you can convert any shape into a character you can drag and drop fonts in seconds and you can create both OTF and SVG type fonts it runs both a Mac and PC and it has new intelligent kerning tools which I can't wait to share with you you can even create custom ligatures and alternate characters especially if you're working and the language like Spanish where you need alternate characters and like I said you can create color fonts now which I'm gonna show you in a little bit there are two versions that you can buy and the really cool thing is there's no new tools for you to learn except for the plug-in and it's designed in a super simple way so if you want the Adobe Illustrator version it's $49 if you want it both for AI and Photoshop for the raster based bitmap images once you can use this and it's a combo so it's 79 bucks I also want to showcase some really cool typefaces that other people have designed now since founding this company in 2015 it was kick-started there have been now over 300,000 custom fonts made by users Wow I guess their mission to make typeface creation and font design easy is coming to fruition check out some of these fonts wow that's cool right that's neat oh man this one's so cool look at this one here we are now that you see me do it and see how easy it is to do not only is it easy it looks like a lot of fun once I got started I can't stop so here's the challenge for you design your own custom font you could do any one of the ones that I talked about or do one on your own but here's the thing if you're stuck for an idea just do your own handwriting draw a couple of characters with a sharpie make it super easy scan it in convert it to vector and play around with this font creation tool you're gonna get hooked that's it if you liked this episode you want to see more content like this don't forget to Like comment and subscribe and hit that Bell notification and see you next time

Channel: The Futur Academy

Views: 252,410

Rating: 4.9521217 out of 5

Keywords: the futur, chris do, how to, design tutorial, how to design, diy design, tutorial, design, newspaper, typographic, tips, type, typography design, graphic design, typography tutorial, how type works, typography manual, editorial design tutorial, graphic design typography, art direction graphic design, really good type, great typography, typography rules, how to make your own font, how to make your own typeface, typeface, font, fontself tutorial, how to make a font

Id: axy8ERDptMw

Length: 61min 18sec (3678 seconds)

Published: Thu Feb 13 2020