Master Typography Basics: Anatomy, Phrases, Paragraphs and Logos

1. Class Preview: do you want to master Typography and graphic design in this class will cover the anatomy of typography. Learn important typographic terminology that can help elevate the type of your design. We will explore how to use type with smaller phrases, longer headlines and large blocks of text. You could leverage typography in the design in such a way that you can change the mood, quality and level of professionalism of your design pieces. I will even walk you through a typography based local design process with you and show you how type can make our breakthrough design. So let's learn together. 2. The Anatomy of Typography: typography has a special place in the world of design. I could dramatically impact the way designed feels it could make a design look busy or clean. It could even be the design itself, so understanding the anatomy and structure of typography will go a long way in deepening your understanding of design. This is a simple Sarah font as we know it's a serif font because of those little brackets at the end of each character. Each letter this word is called a character. If you were to draw a line that hugs the bottom of each letter, not including the little tales which are called D senders, this line would be called Baseline. You can also draw a line across the top of these characters, which does not include what's called the A Centers are this little area right here, and you control your second baseline. What is in between these two lines is the very core of your word or character. This helps you find a balance in your wording. We may find that you have more a sending and decently characters in this revelation can help you decide how to balance the slow going type when creating your mobile exam. The line that could be drawn across the top on the tip top of your A singers is called the Ascent Line. The line that could be drawn across the bottom of your D senders just called the D sent line, so hopefully that could be easy to remember. A really good fought. You'll be able to draw these nice straight lines that go across your character's not all funds. Do that grip box like this one don't always follow the same line patterns. Let's expand our typography vocabulary. The tail is the very tip of the character Descend er, as we know now, makes up the entire bottom section. But the tail is only the very tip. This is the example of the stem of the character years or anything that expands outside of side of character, including this gene. Unfortunately, the anatomy of typography is same somewhere. Think human and Adam. So this is an example of a shoulder. Loops are common in certain block tires, anything that has closed inside a character shape. It's called a closed counter. This is an example of a character leg crossbars of the second set. Join two stents together. For example, in this a there are around boarded a 50 other total terms of vocabulary words for describing character anatomies, but we will not review them all. There are many I've learned just by creating this lesson that I was unaware of the right vocabulary word for word. That means knowing some of the basics is fantastic. But don't feel like you have to have all of these terms memorized. What's most important is studying how tight feels, looks and behaves with other characters, words, colors and designs to make our overall pieces cohesive and balanced. I'll go over a few terms that are less no terms in the world of design, many of these phrases in terms or thrown around and client emails and professional feedback you may receive. So these are pretty important. Current ing is the manually created space between each character. Each type has a natural current ng added to it. When you mainly reduce or expand the spacing between the characters using software like the ones will be using For this class, you'll get the term current and local design. For example, I always try to manually Kern type characters because even slight adjustments could make a big impact on how it looks. The default spacing on bonds is not always perfect. Also, Colonel could help balance a logo by increasing or decreasing the space created between characters. Tucking that letter into reduced extra white space can elevate your type in your design. I love playing around with different bond options. When I worked with headlines or logos, some bonds worked really well for my desired effect. Beautiful syrups, tales and groups. But take, for instance, the slots. Notice how they look pretty similar at first glance, but they vary quite a bit when you zoom in and you know what you're looking for. The space created between sentences or phrases is called leading. The amount of letting that it's between sentences and a larger paragraph can really change the look and feel of a block of type. A larger leading or spacing has a chance to breathe and look very clean. Tighter spacing could build pretty cramped. When you're learning intermediate or advanced design techniques, you'll need to know how to manually space and balance your logos headline and custom lettering. When working with headlines. I like to tighten the white space between characters and between words. I took certain words and toe extra white spaces of other words, and that seems to feel right and balance. When I do this, we could do this easily. In Adobe Illustrator, I'm taking a simple three word headline and finding the right space in between the characters and between the words notice the big difference, using the default spacing in the font and then using my own custom version. There's a big difference when I'm able to kind of noodle around with it. Sometimes your main headline and phrases. The biggest focus of the design and having this custom look goes a long way and looking professional. It's also good to combine different bond types and styles for the same headline. It really helps break up the more important words. So in this case, making the and and the other smaller text italics and they script font, and combining that with this really nice gold sand terrifying really works well here. Also, tucking in words and reducing large amounts of white space between the characters and letters makes it seem like a nice, cohesive design. Rest of lettering is very important and branding and logo design. This example. I am taking two types of script bonds, and I'm combining them to make one unique blend. Script bonds can be tricky. When you may not like the capital letter of a certain script bond. You can switch it out for another script brought to see if it looks better and reads better . So in this case, I can actually tell what the first letter is. Now. You could take a regular, typical font and use it as a base fund. From there, you can add something totally unique to and make it distinct brain. 3. Working wIth Typography - Multiple Word Phrases: I'm in Adobe Illustrator, And I wanted to show you a live version of how I work with typography and design, especially multiple word phrases or sentences. So have three simple words here, typography and design. And at what I want to do is kind of play around with the type a little bit and see if there's any really nice white space areas where I can tuck certain characters within each other. So I have this kind of nice place to put the ampersand here. And I'm gonna pick up font that I think really is gonna work. And I think a Sarah font, it's gonna work for this particular piece. So I'm gonna have a little bit of balance with these three words. So I'm gonna make certain ones bigger. I don't really want to emphasize the and as much. So I'm gonna make typography and design a little bit bigger and notice that little spacing right there where the P drops down and there's a little bit of spacing between the D and the I, some kind of tuck in those together so it looks like it. It's like a puzzle piece. The same thing with this ampersand of kind of finding a nice wayto almost put these together. Like I said, a puzzle piece. It feels like they belong together, nestled together. So I feel like I like the font choice. I like the overall look of how everything is talking together. I'm just gonna put this behind a simple maybe a purple background kind of find the right shade. Right color course. I gotta play around a little bit with the shade to make sure I like it. And the great thing about putting on a background you could really start to play with color as a way toe. Also diversify your type a little bit and bring out certain words over others. So now I feel like I can play around with that ampersand a little bit with the color. I'm gonna actually just taken my eyedropper tool and highlighting the purple shade I created. And I'm actually going to just make a little bit of a lighter shade of the background shades, so it has more of a subtle appearance. It's not harsh, and so it kind of fades in the background a little bit, but it's still very readable. So let's play around with a much longer headliner phrase. So I went ahead and found a quote by Dr Seuss. Don't cry because it's over smile, because it just happened. I love this little quote, and I think it's nice and long and will be able to create a really nice stacked design quote design and really help us practice our typography skills. We just learned when you have a much longer phrase like this and you need to make it all readable, large and in a nice designed headline, I usually like to start with the beginning few words, and I cut and paste different words out so I can create different lines. So in this case, I'm gonna start with Don't I feel like that's a nice word to stand on its own. And so Alcoa Head and Copy and Paste don't in its phone, um, kind of area. So I'm trying out a different bold font. I want to do a mixture of sand. Sarah and Sarah fonts also want to make sure I mix my bold fonts and counter that with Cem lighter fonds. So we're gonna be doing that throughout this entire, um, little lesson we're doing here, so I don't really like this apostrophe. So I'm changing that apostrophe out toe one. I think it will be a little bit smoother or nicer with what look we're trying to go for. So I'm gonna grab the because word and create a separate line for that. And we're gonna continue to create separate lions until the entire phrase is created. And the reason I do that is because I am going to shake it out. But bold and light and metallics and I wanna have all this is separate text boxes so I can have greater control over that. So right now I'm speeding up the process by three times the normal speed that this was filmed in just so I can show. It's a very tedious process of cutting and pasting words out of the main phrase that I think will go well together. So I put Don't cry because and then it's over on its own line. And right now I'm playing with the word smile trying to find the right spot. I really wanted to accentuate this because I think that was that. That's the main attraction to this quote is the word smile So now you're starting to see the quote come together as a nice, blocked out design. So I have everything kind of separate. I can start to play around with the font types a little bit now that they're all separated . It's not one big block of text. So good to see me continually play around with this. I've actually spent this up Teoh another fast, three times the normal speed because it does take a little while to play around. And I'm kind of adjusting the because a little bit there's two because words have made them lighter. So that counters all that bold font and you notice I'm trying to experiment. Actually separated. Don't cry in two separate words, so I could try to maybe have instead of having it a big block. Gonna having this nice slow from left to right toe left to right as it goes down the page and actually made cry the same type as smile. And that gave me more opportunity and more white space created by that negative space. I'm able to kind of took some of those other words inside. So if you notice between the why and the I to the left. I'm able to put because it's over in that nice little space and that that really works well , so I'm gonna keep going with that. So I spent another 15 minutes finalizing this. And this is the final version that I came up with, and I ended up actually doing a two toned so I can have it more readable. So I did the don't cry because it's over white in the smile because it happened a little bit darker color. That kind of match is the orange assisted darker shade. So I felt like all of that kind of red Better I tucked in, of course, are Dr Seuss here at the bottom, right. And everything seems to flow from the top left all the way down to the bottom. Right? So hopefully this little project, it didn't about 15 to 20 minutes, just taking one kind of longer sentence and kind of creating this little quote box. This is the kind of stuff that you'll learn how to do over over practice and time. And because you could have a solid foundation of typography, you're gonna be able to kind of put this all together nicely 4. Working with Large Blocks of Text: women in design right now. And ah, wonderful program. Of all the three programs, illustrator photo shop and is designed in design gives you the most control or large, lots of texts. That's why men in designed today. And so we're gonna kind of go over. How do we, uh, manage such a large block of text and has a designer? You're gonna be given way more text than you really need to have. And your job is to make all this text readable, look, pleasurable toe look at and well crafted it designed hyphenation. Zehr important me A very narrow Collins of text. But most of the time, clients do not like to see hyphenation unless they're absolutely necessary. So one of the first things I do and I have a big block of text like that is I just unjust. The hyphenate box. When a large block of text stretches across the entire page, it could be hard to read. You do not want the reader to have to shift their eyes such long distances from left to right, it gets tiring. This is when the use of Collins is very wise. Having the proper alignment is everything it could make a big impact on how your block of text looks Right now. These two columns air set toe left alignment only. But if you play around with your text alignment options and select justify all lines specifically justify with last line line left, the text will be flushed down the left and right sides. Let's go to remove that jagged appearance the right side that the left alignment option has . This could really polish your design and layout, so use this type of alignment often. And when he had more than one column, just make sure your columns at the bottom line evenly. Using headlines to break your big block of text up is a no brainer. Balancing this block of text with larger text blocks not only adds the variety of element but makes it visually interesting and more likely to be read. But more important is adding sub lines or bylines. Toe add additional divisions to the text blocks. This helps the brain break down the text box into much more manageable blocks of information, and therefore they're not overwhelm you will notice. I'm constantly adjusting the leading, which we learned about earlier, so I could have the right amount of spacing between headlines, sub lines and paragraph blocks. I always see headlines with too much leading in, and there appears less cohesive and polished. Find additional ways to break up your text box visually, but I like to do is find important quotes or crazes in my block of copy and make them a bold waiter. Talents. Make sure that your paragraphs are never too long. One way to break them up is to do a pull quote. This adds another visual element without having to use a photo notice the generous, even white space on either side of the document. This not only is important for publication requirements, but it also helps the overall page breathe and feel open. For the majority of my design career, I've had managed large blocks of text given to me by clients. I cannot talk him out of cutting copy. It's my job to make it look great anyway, and sometimes it's a tough job to do so. Understand basic text layout principles so essentially 5. Typography Based Logo Design: I'm in Adobe Illustrator today and 100. It takes everything we've learned from all the previous lessons start to create a little good of a typography based logo. So this is kind of your default logo with people. Spacing are turning between the lettering on the one of the first things I like to do when I have the logo name established in this case, I'm just doing a sample logo test. I like to divide up the characters into each individual text box so I can have complete control over the spacing and the layout of each letter. So that's what I'm doing right now. It's gonna be typing each one out. So you have four characters in total. This is the default spacing, so I can see where we've gone here. We're gonna play around a little bit with the style right now. This is Georgia Font, and I think I want to do in italic and I'm not really feeling this capital L Capital Elle's air. Pretty tough to work with, sometimes on logo design. So I'm actually gonna work with this beautiful lower case l and some thoughts or more beautiful than others with certain capital or lower case letters, So that's when you just learn an experiment. What I'm doing now is in closing some of the white space and gaps and trying to hug these letters just like a puzzle piece and kind of aligning everything properly and maybe making a certain character a little bit bigger to provide balance for the logo. They also want to make sure I keep everything on the same line, so I'm just making a little stroke here. It's making sure that O has aligned properly with the other own same thing with the bottom of this gene going to make sure all these aligned properly to make it feel right so you can already see just by making a tallix and taking each character and creating its own will text box, I'm able to snug things in and really kind of a line this better. So this is default. If I were just type out my logo name and this is just finessing a little bit, you could definitely see the difference. So let's get a little bit more complicated. Let's do a full logo design really quickly here. So right now I have this Georgia fondest basic basic text that I'm gonna use for my love owners, Boss girls is kind of a generic name that I kind of came up with and already have kind of a color palette picked out. So the first thing I'm gonna do, ISS once again, I think I want to have a mixture of a syrup and the san Serif font. So I think maybe for Boss, I'm gonna do a nice all caps sand syrup and for girl, I'm gonna do what we did previous with that logo and do keep it in this nice Georgia plot. So let's go ahead and do what we've done in the last one. I'm gonna create a character or a text box for each character. This will give me complete control over everything with a little bit bigger here, so it can kind of really see what works. Well, now I'm just kind of doing this manually, kind of reducing some of the white space, but to tuck them in, that's a really nice even spacing. So you'll notice the space here is equal to the space here. It's taken kind of season continuity throughout the spacing. You got removed that that doesn't look good There they would go, and I do want to make it breathe just a hair more great. We also want to do our line. Let's go draw box and do a stroke, and that will help me determine everything. Is resting nicely on that line to make sure it does else want to make sure things appear online as well. So you see the curve of the shoulder here of these two characters. I could make this a little bit bigger, but that match I can even make the G bigger to if I want to have a little bit of a balance there. So that is the first section, the logo. And I do think I do. You want to Kana make the g a little bit bigger? Perhaps that's all up to use. Make sure the shoulders kind of line up here. You just kind of tested out. Okay, great. You always do finessing a little bit late. Later, after you're done with the concept process, that's the first word. And so now we're gonna take boss And I think I want to do a nice, bold font here and already have one in mind. I'll see co let's see if I could find it. Cocoa Goose. Let's see if I could find the right type. Wait, I think it was did my book. Demi Bold. Oh, there it is. There's the regular set in my bold or I'll keep it like that. We're gonna make this all caps, so I want to keep the line height the same on the top in the bottom. And I want to combine these words because this is a nice balance here between this bold font and this kind of more slender Kurt curvy font or type. And I want to combine them together very closely. And so I'm gonna reduce the spacing here. Just manually, uh, produced the current me between the text character. So there's hugging just like this one is nice and tight. It looks really nice. And here's kind of a trick. Remember how we do a line right here at the top of our where a sender's our and then our d senders down here we made what's called the X height. If you go back and watch that video, that's what we're gonna create now is I'm just putting a line there. And I can already tell my G if I could get my G a little bit bigger. It kind of be at the top of that line in the bottom. So now the curves of each character rest on this lines, bottom line and all the top of the curves rest on the top line. And if I draw that across, I could line this up and make this the same size. So now these two words fit perfectly in this X height area. No, I I could take it off that this looks like it really belongs together. Really blows very nice in these two words. And I'm just kind of putting some manual spacing a little bit more space in here, Let it breathe, and I can make it a little bit smaller and see how I like it because every logo should look good small, and I would probably finesse the bottom G. If it had a little more time, I would go in. I would actually right click and create outlines, and I would actually find tune that little loop there. So, um, see a little bit smaller and have a little color palette picks that picked out. Thought I'd make boss Green associate with making money and girl with our women in Kabul color and there is our main local feel Pretty happy. I might adjust the G just a little bit to make that this finesse of a little bit and the next for to put our sub line are byline or sub headline. Whatever you wanna call it next. 6. Finalizing Our Logo Design: So I came up with the little slogan that we could use below the logo, winning all the time. Just gotten something funny. Um, and I have this as the default Georgia fought. So let me see if I have the same tracking. It's set to zero. So this is what we have to work with. So there's a couple ways we can kind of incorporate this into the logo. The first thing I would explore is this gate, this little hole that's created with the G that drops down. I would love to tuck this in right here and maybe play around with maybe a bold talents. And I also want to make this a neutral color because you don't want it to be read as boss and then down here if you were to make this green. Now this reads together instead of reading across. So you want to have it being neutral color. We're gonna do a nice neutral gray, and I really want to accentuate also, if I made that bold, made that maybe green or purple, that could look nice to. And so here's the problem. I think I like that. But if I reduce this down to very small, maybe a social media header. How the winning all the time gets lost so we can explore some other ways. We can work with this, um, sub headlines. So there's one thing we can explore that's putting a little spacing between the two letters letters. I'm putting it between the G. So that's an option. It doesn't always work. I always try to get this to work, but in the end, it just I always end up not using it, but it's definitely an option. We can actually try different Bond. Let's go ahead. Filmore spacing between characters and what I would actually do if I had a little time but actually select this G. My create outlines. I'm in Adobe Illustrator right now, and I would actually lower the G. So the dot bottom of the G dips down here bad some time to really redraw this whole tale. But for right now, let's keep it as is. That's another option. Great. It's have lots of options here. Let's stick with this when I want to keep it together. Let's keep it together. Let's try a all cap on. Let's go back to our neutral gray. So I'm taking that. I don't want to use three fonts. I'm trying to use either the boss or the girl thought so. Maybe now that this is bigger, it'll work a little bit better when it's smaller, so that might be our choice here. So let's see how it looks smaller. That's looking pretty good. I wish the spacing was a little bit wider. The Kerney. Let's make that, Yeah, you need a little bit of space to read it when it's really tiny. It was good to have tight spacing, but not too tight where you can't read it. It's all about finding a balance and finding the perfect out, so that's an option. I could even make this a little darker. Make it pop out a little more. So that's an option. It's a little heavy on the left side. So what if we try to balance that out a little bit better Courses G drops down, which is Nique, but also limits us a little bit when it comes to putting text underneath. So you have this be small and just have it be center center aligned underneath. But we have this kind of hole there that doesn't feel natural. So we can always split this into two different lines. See how that looks. That might be our winner. Gonna reduce the letting. That's a nice, tight together unit. I'm actually gonna lighten it. That's an option, of course, that now that's heavy to the right. But that might be OK. It's depending on what you're trying to go for. And of course, it's all about experimenting when we do logo design. Just trying to figure out you know what's what's a good ah, connection. That's kind of neat, kind of a stacked version of the logo. We kind of put these up here so I could make this a little bit larger that now I can even have a stacked on them two lines or three lines. So this has a nice balance because you have it heavy to the left, heavy to the right down here, and you have this kind of in the middle. So it has kind of this nice, almost more of a circular ballads. Here, let me see if I could draw just a circle, show you so it's got It's not too heavy on one side. It's evenly distributed, and this would even look cool in a circle. Now that I'm just doing this is a sample. You can even have this in a circle and make this white so all sorts of options when it comes to this. But now that you have a good foundation of logo design or ah foundation of typography, local design becomes a lot easier. So this could actually be lighter. You see, if I could try this. Oh, that's perfect. That's that's it. Do kind of a light gray. And when we collapse the space in LaGuardia, letting.