Customizing type for logos

Key Takeaways

in today's video I'm going to take a somewhat boring and simple font and turn it into a premium logo in just 15 minutes using Adobe Illustrator but before we get into any customization I want to go over why we customize type in the first place for me as a designer two things really stand out the first is that it's just too easy for any brand or any business out there to go and download exactly the same font and use it and they'll end up looking just like you when you use just a font you type it out and you use that as a logo it's too easy for other brands to imitate you and so what we're doing is we're making these intentional customizations to make sure that you are inevitably unique it's not just a font It's actually an intentional crafting of typography that's going to make that brand stand out and that logo a little bit more memorable the second thing is I'm using typography to tell a story about who this brand really is and while I'm of the belief that a logo shouldn't do all the heavy work for a brand it definitely needs to convey a certain look and feeling to an audience in order to tell the story about what they can expect from this brand and so every little customization is an intentional move towards giving that brand that feel and making that logo the perfect fit for that client so with that in mind I'm going to jump straight into it and I'm going to talk to you a little bit about the brand that we're going to be designing for today the logo I'm creating for today is a premium Safari and travel specialist brand called in xera meaning Journey they focus on designing personalized out of the box Wilderness experiences for adventurous spirits and those looking to connect with something bigger than themselves so they really need to portray a feeling of Wonder balance and quiet luxury the typeface I've chosen to work with is called Source serif 4 from Google fonts and I'm going to see if I can take this relatively plain and forgettable font and turn it into something distinct and premium so that it's going to be the perfect fit for zero I've gone ahead and created myself a mood board which is really going to help guide my creative process going forward secondly I've also gone ahead and done some sketching in my iPad where I've just let myself imagine what I want this logo to look like and this is really a pro tip from me you want to do sketching beforehand even if you're going to be customizing an existing typeface this is because when you go about choosing your fonts you want to already have a style or an idea in your mind to work with before you start pulling around anchor points this is going to help you know carve down the amount of time and work that you're going to need to put into customizing that type if you start with a good base then you actually have to do less work and it's going to look a bit more natural and it's going to look a bit more refined right from the get-go so what I did is I spent some time sketching out my ideas playing with letter forms playing with the widths of various texts and basically exploring what I'd like this logo to possibly look like from there I jumped into Google fonts to see if I could find a font that would be a really good base for me to work from so with that being said let's jump into illustrator where I've now pulled those sketches into illustrator and I'm going to go ahead and actually start customizing this typography and seeing what I can create I'm going to take you along for the ride now that I have downloaded and installed the font and put it into illustrator I can actually start working with this piece of type and start adding my customizations I'm going to use four of my favorite customization tools when dealing with type the first is my direct select tool which is going to allow me to select individual anchor points and manipulate those as I wish my second tool is going to be my pen tool for creating those perfect curves and anchor points and having a little bit more control over my line work the third tool is the pencil tool which is going to give me a bit more flexibility and the chance to really add that Flair to the typography and the fourth tool and definitely one of my my favorites when working inside illustrator as a whole is the shape Builder tool which is really going to help me create custom compound paths and shapes and create something really unique for this typeface so let's jump straight into it and I'm going to go ahead and start customizing this type and really the first thing that I'm going to do with this logo is expand it now when you're customizing type it's key to remember that you want a copy of everything that you're working on something I learned the hardware early on in my design career is not making duplicates of the work at every step it sounds a bit ridiculous but you always want to be able to go back and make changes to the step or two or three or 15 before the one that you've just made and if you keep designing over the same typeface or the same design then you can never go back a step because there's only so many times you can undo something so the first thing I'm going to do is actually make a duplicate of this type and then what I'm going to do is start the timer and get in to customizing the typography so let me just expand this out so you're going to go to type and you're going to go create outlines and that will create a vectorized version of the typography that I can now start customizing alrighty what I'm going to do is set myself a 15 minute timer and then we're going to get into customizing the type right so we have got 15 minutes on the timer let's get started so I'm going to pull this live type version just over to the side so that I can always come back to it if I need to now that I've got the expanded version of this typeface I can actually start looking at what I'm working with and it's usually really interesting for me when I've expanded type because I can start seeing how people have like created various shapes so the first thing I think I'm going to do is take this and I'm actually going to use my pathfinder tool which is this little guy over here and I'm going to join these all together because then I'm just I'm not dealing with some weird outlines and things like that the first thing I'm noticing when I compare to my sketches and I'm I'm really focusing at the moment on this sort of style over here I really want to create this ligature between the r and the A and see how I can do that and then see if I want to do something with the Z I want to see how it actually turns out and then I also want to see if I can play with a slightly simplified version which is maybe more along the lines of this little guy here where all the other letters are simple but my RNA are customized I've also got another idea of this a but we'll see how much time we have the first thing I think I'm going to do is I'm actually going to try and create this ligature between the A and the r first considering that that's the primary focus for the design I'm also noticing that my serifs are probably way too exaggerated and then I'm probably going to need to do some customizing over there but we won't fuss with that right now so the first thing I'm going to do is I am going to ungroup all my letters so that I can play with them individually and doing that I just clicked shift command G to ungroup otherwise you can always go up to object and ungroup over here if you've got all of your selected so the first thing I'm going to do now is take this R and I'm actually going to get rid of the original stem and I'm literally just going to do this with my Eraser and with the letter selected I can now just erase and they have gotten rid of it what I'll probably do is then go in and have a look at some of these anchor points that are left behind select the ones I don't think I need and just delete them now another tool that I really like to use but I don't use all the time is the smooth tool which really allows me to then just smooth that line back out again and make sure that I'm dealing with a proper shape now in reality what I would really do is make sure that that's a perfect curve but for now and for the sake of time you get the idea the next thing I'm going to do is because in my sketch I've got quite a pronounced R what I'm going to do is actually make this little shape over here a little bit wider I'm just going to grab those anchor points and use my arrow tool to pull them out what I'll probably do is I can already see that there's a little bit of a glitch happening here but I'll probably come back to this at a later stage the next thing I want to do is sort of prepare the a for this and the same thing I'm probably just going to use the Eraser but what I want to do is just quickly show you another way of doing this and I'm going to use the pen tool for this so what I'm going to do is I'm going to create a shape that follows the outline of this a and I'm going to create a shape that covers up that middle bar then I'm going to select the A and that middle bar and this is where my lovely shape all the tool is going to come in I'm going to hold down alt for minus and I'm going to just drag over all of that which is then going to get rid of that middle stem and it's going to give me just this outline to work with now I can already see that this a is way too far away from my R so I'm probably going to bring it in a little bit more just to sort of match the spacing here and I'm really going to just eyeball this and I think this is key with time your eye will get better at sort of recognizing kerning and tracking and spacing and working out how to actually position letters alternatively you can turn on your grid and use that as a guideline but right now I'm just going to eyeball this the next thing I want to do is create that shape and now typically what I would do is give the pencil tool a try but because I want a far more controlled curve I'm going to use the pen tool and one of my biggest recommendation patients here is to start with a curve so what I'm going to do is before I even click I'm going to hold down shift and I'm going to drag out a curve then what I've got is I've got a curved line already ready to be used I'm then probably going to drop down to the middle of this a and drag again and hold down shift and when dealing with a pen tool one of the biggest tips that I've learned in any case is that when you want perfect curves deal with your anchor points in either straight up and down or straight left and right vertical or horizontal and you'll just get a little bit more control over your curves so I'm going to do that here if you need to edit anything whoops then you're just going to hold down Alt and you can click and drag an individual Anchor Point so that you can change it right the next thing I'm going to do is just add another curve here I'm going to change this to an outline quickly I'm going to drop this down here and see usually what I do is I just put down the basic shape first and then I can start editing from there I'm not feeling too precious about anything at this stage and I'm not looking to get it like exactly right the first time I can always edit so what I'm going to do is I'm going to now start pulling and shaping my anchor points and really my focus for this is to just get the curve right and then from there I will probably look at adjusting where I put my a and I already know that from my sketch I want quite a wide almost the shape of an infinity symbol and I can already see that this is literally nowhere near that so what I'm going to do is see if I can get it a bit closer so the r probably needs to drop slightly lower than that and I probably need to do some work on this guy over here so I'm going to spend a couple of seconds doing this right guys I've got eight minutes left let's see if I can pull hold us out of the bag can I do this or not please forgive my terrible singing right so we're going to pull these anchor points I'm just going to spend a minute or two doing this all right so we are getting there I think we've roughly got a shape that we can use so the next thing that I'm going to do is I'm actually just because they're they're distracting me right now is I'm going to remove the stems off of the a as well and I'm just going to use that same trick with the pen tool and I'm just going to try and create these lines so that I can cut off these little stems here because they are distracting me terribly right now um and I can't see what I'm doing so and I also don't want them in the final shape so I can always add other ones back in um so I'm just using my shape Boulder tool again to create these shapes and then just using alt and minusing out the text um or the shape should I say to just get rid of those whoops let's make sure I select the right things alrighty Okay so we've got a little bit more clarity here the next thing I'm going to do is I'm going to quickly add a bit more stroke to this to see how we can work with it I think I'll start with it a bit narrower what I probably have to do is move the a over just slightly because I'm going to have to deal with this curve now let's see if I make this a tiny bit smaller then it matches up there and I can always take this and just put it over there and extend that curve slightly and we I've got a much better shape happening over here okay the next thing that I usually like to do is actually use the width tool to create a little bit of variation and so this is this little funny looking guy over here and I'm just going to start the top make it a little bit wider and probably make it a little bit thinner at the bottom not by a huge amount I don't want it to be too dramatic um but there we go we've got something that's looking all right over there now I just want to have a look at this design okay so it definitely looks like what the a is doing is tilting a little bit so now to tilt or skew text you can actually just transform it but for the sake of this video I'm just going to leave it and what I might do is move the a across so that oops so that actually what's happening is this curve is going right to the bottom and I'm going to line this up with the bottom of the a so that it's going into the A and creating a really cool shape over there like that okay so we've got the basics going on there now I have only got four minutes left so what I'm going to do now is I'm actually going to start adjusting the rest of the anchor points of the letter and then I will decide if I want to do something to The Zed so now what I'm going to do is I'm going to go into each of these letters and I'm going to decide okay based on my sketch I've got some slight little serif hints there and they're not they're definitely not as pronounced as these ones so actually what I'm going to do is here's my direct select tool I'm going to go into these anchor points and I'm actually going to just push them in a bit and just see if that looks a bit better I'm not totally against the edges but because this brand is a little bit more romantic I definitely think I need to soften out those serifs so just to quickly show you how I would do that is I know that I want a little bit of Edge on that and I'm probably going to remove this edge here and take it away like that then when you've got your direct selection tool you can see here that I've got this little dot over here which basically is telling me I can turn this into a curve so I'm going to pull on that and you're going to see it's going to turn my letter form into a bit of a curve so basically I'm now going to repeat that on all of the anchor points and see what I can create so I'm going to try and match these oh my goodness this is what happens when you're rushing whoops so I'm going to try and match that let's first try and get basically all of them aligned in the right sort of width and I'm just going to eyeball this for now again I'm not trying to be too precious about it right now it's really just about getting the idea right okay so let's jump into here and here and take those off okay and then now we're dealing with an interesting thing here let's pull that and pull that and then we've got a cool top of the in let's see if we can do the same thing here these aren't even let's push them in a bit further they've got to go in a bit further that's not even now of course I recommend you measure this because you know you do want it to be perfect but just for the sake of this video oh I've forgotten to delete my anchor points anybody who got really irritated with me then I apologize okay let's grab those and pull okay we're getting there we're getting there we've got our n is not looking too bad let's delete out that guy and we're gonna pull the Zed same thing here drop drop drop drop drop drop drop drop drop drop drop and I'm just using my arrow keys really uh for the most part to do this and then I'm going to pull that to curve awesome now same thing with the eye now I already know that once I shorten these stems on the eye I'm probably going to have to rearrange the spacing of the letters and I'm running out of time so really I'm just using much the same tools the whole time that I'm doing this because you really don't need that many tools and what I'm thinking is is that because this brand is premium and it needs to convey that sort of feeling of being luxurious and balanced and all of those great things this is why I want these soft curves the edges are just not going to say the right thing to the audience and it's just not going to put the brand in the right light so already you can see that the softness of those curves and that customization is working way way better now often I will use my rulers so I'm going to go command R and I'm going to bring in a ruler just to check the layout over here and I'm going to make sure that I'm putting the anchor points in the right place and then basically what I'll do is just to hide them again I'm going to hit command and then the little semicolon tool which is going to give you basically that smoothness okay I have got a few minutes left so we're going to just quickly pull together this last corner and these last few Corners over here in fact I actually think I'm going to run out of time as far as I know I've only got like a minute huh foreign okay let's do this last corner and then we can see where we're at first delete the Anchor Point and then add the Curve okay and zoom out and let's see what we're working and there goes the timer okay so we are sitting here with a much more customized version of the logo and actually what we can do now is pull in the original font and just have a quick look at the comparison so already we've got something that is way more custom and feels totally more refined now could I have found a font that has exactly these sort of serifs absolutely but the fact that we could take this font and turn it into this bottom one here is just a testament to how well customizing a font actually works you've got full control over how much accentuating on curves that you want to do and how much sort of effort you want to put in to creating those special or just that special look and feel for the brand now I'm going to spend just a couple of last minutes customizing the spacing and just working with the kerning just a little bit and seeing if I can get it really refined and then we'll take a look at the before and after all right so after a couple more minutes of customization cheating a little bit with an extra few minutes here and there we've got the final typeface or logo type four and zero the brand and I've actually gone ahead and added their tagline as well just to see what that version of the logo might look like and I've popped it on the color from the mood board and so we've pretty much got a finished logo type here now of course I could fiddle with this until the cars come home and I turn blue in the face but basically I think it's key to note that actually sometimes you don't have to do much you just have to do some subtle customizations keeping in mind the tone and the feeling that you want to give off for the brand or the logo that you're creating and you really don't have to do much to create something that is totally custom and unique the best tip I can really give any designer who wants to start customizing type for Logos who just want all who somebody who just wants to improve and get better just start start doing it start working with fonts start customizing whether you just do a bit of practice here and there that's fine or actually just start doing it for Logos but keep in mind that every customization has to be intentional and it really isn't just about adding things and taking away things just for the sake of it you really want to think through what you're doing on these logos so from changing a serif to adding a curve to blending letters together make sure that it is intentional and that you're thinking through the impression that you want to give with your logo designs also another tip is make sure that you understand the basics of typography and make sure that you keep learning about how cuning works and what tracking is and what makes a good letter form and all of those things so that when you're doing customizations you're not drastically breaking any major type rules but instead you're making them work for you and if you want to learn more about choosing the right fonts or working with Google fonts we've got some free resources for you on the flex Academy website so check out the link in the description below and if you enjoyed this please leave a like and let us know what else you want to see in the comments below thanks for watching I'll see you in the next one [Music]