Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Brand 3
  • Overview
  • Transcript

3.3 PROJECT: Choose and Format Brand Type

Hi guys, in the last lesson we look at how choosing the right type faces can give your brand a really distinct personality, we picked out an a font and b font for the brand. And we made these choices based on both the kind of personality that we wanted these type faces to bring to our brand. And also on the fact that the two of them have qualities that make them work really well together. In this lesson, I want us to put together a typography master for our brand, so why do we need a master for our typography? Well, there's really no point choosing a great A-font and a perfect B-font if you don't tell people how they should be used. There's also a world of difference between a font in a condensed weight and that same type face in a bold weight. But how will you or your colleagues or employees remember that it's one and not the other that should be used in your headings. A style master is going to lay down the rules for how typography should be formatted in all of your brand communications. So for the project this lesson, like we've done in previous lessons, you can either use two fonts of your own choice for your own unique brand and create a style master for them. Or follow along with me and create a style master for the Buzz brand, using the fonts that I selected in the previous lesson. Okay, so for this project lesson, I want you to open up Adobe in design. So go ahead and do that now, pause the video and I'll see you in a moment. Okay, welcome back. So here we are in design. Let's head up and create a new document such a File > New > Document. Let's make it a standard portrayed a full page. Dislike facing pages and we just need one page for now so set that to 1 great and click OK. There's a reason I want you to create the style master InDesign. Compared to Photoshop or Illustrator, InDesign is going to give you lots of really specialized tools and panels for formatting of typography. And it's also perfectly suited to formatting types, so it's a good all round choice for this kind of job. Okay, so let's create a one page master that breaks down the two brown type faces and sets down the rules for how they should be used. So let's head over to the tools panel and choose the type tool or just hit T on your keyboard and then drag your mouse on to the top of the page to create a text frame. Let's type in the name of the brand plus typography style master. And then, I want you to get really familiar with the character formatting controls panel, which is here running along at the very top of the workspace. From here, you can make all your typography adjustments, including the basics like font. Font weight, font size lending and other more advanced adjustments like tracking turning and baseline shift. Let's start by formatting at this header, so let's set the text you are A font for headers. You want to make sure that all your texts from now on complies with your brand rules. If you make an error in your star master, that's going to open up a whole kettle of fish. So you want to make sure that it's really perfect. So that Linotte and semi-bold for the weight. Increase the font size to 18 points, And then, switch to the paragraph formatting controls panel by clicking on the paragraph icon here and set the text to align center. Let's bring in a bit of color too. So the colors that I'm using for the text are lifted from the logo and if you like you can create these for yourself in the swatches panel which is docked over here on the right of the workspace. So we've got an orange CMYK process watch, which is Cyan 9%, Magenta 76%, Yellow 95% and Black 1%. And I'm also using off black more charcoal colored CMYK, swatch which is Cyan 69%, Magenta 59, yellow 56 and black 65. So multiply the orange swatch to the brand name and then pull out the rest of the header in this nice charcoal black. Okay, that's looking really good. Okay, I want to establish a more generous tracking as part of the branding which is going to make that font really ultra clear to read, so let's increase the tracking from up here to 40. And finally, let's pull this text out and upper case by highlighting and clicking on the all caps button up here on the control's panel, great. Okay, let's create a subheading using the type tool again and type in a font. And just to clarify what this will be used for, I also type in headers in brackets. And format that again with your brand font, so Linotte, semi-bold. This time 15, 1-5 points in size, 40 tracking as before, that charcoal swatch, and the first part of the heading in all caps, right. We're ready now to create a sample of our A-font. So let's create another text frame with the type tool and type in Linotte. Setting the font to Linotte semi-bold, 12 points, all caps as before and 40 tracking as before, as well. And let's use that nice orange swatch greats. Okay, so one thing you'll see in a lot of brand guidelines documents is a sample of all the characters in a font. And what this allows you to do is to see all the glyphs that are available in that font and how they look in a particular weight. In the industry, this is called a font sample or font contact sheet. And in design, you can view all of the characters in a given font by opening up the glyphs panel. But first up, let's make two paragraph breaks in your text frame, switch the color to the charcoal swatch and type in SEMIBOLD and a hyphen, okay. Now we're ready to create a sample of the font. So your cursor is still in the text frame, head up to window on the top menu. Type & Tables and then choose Glyphs. [SOUND] Okay, that's lots of glyphs. We don't need to provide a full sample of all the glyphs that we have here. There are lots that would never need to be used. Anyway, we can filter this down to just the basic Latin and Latin one characters. Okay, this is more like it these the characters that would be more likely to be used. Punctuation marks and letters for English and of the Latin languages. You can either double-click and manually insert glyphs onto your sample, or like I prefer to do, just use this as a reference and then just type out the characters. So first, a full set of English language characters in upper case to match the style of our headers. And then a full set of numbers. And then a selection of some of the most common punctuation marks. Include things like currency characters because it might be likely that you want to advertise pricing on things like outs and quotes. So you can include as many glyphs as you like in your sample. Particularly, if you think your brand will need to be adapted to multiple languages. But really, you only need to include the characters that you think will be the most commonly used, it's just to give people an idea of what it will look like. Okay, so once your contact sheet is ready, you can start to clarify the rules for using your A-font. Before you start writing up your rules, open up your sample text document from the previous lesson. Remember this? So this is a great place to play around with your text. Remember, there'll be some things that will remain that will be more flexible than other elements. That'll include the font size which will vary depending on where thing you use. But you can't set something's in stone and let people know that there are typographic rules that always have to be followed whenever they are using the A font. So have a play around with your A font sample here. Adjust the case to what looks best, the tracking. Can you make the text more legible by increasing this and when you have multiple lines of text, can you specify a letting value. When you've played around here and decided what works the best, you can return to your sound master, and begin to lay down the law, so type in the rules in orange. And we can start to create a list of rules that are going to make sure that your A-font will always be used consistently across all of your brand materials. So rule number one for Buzz will be that Linotte Semibold should always be applied in upper case. Then Linotte Semibold should always have a 40 out of 1,000 m tracking. And just to clarify, that is the space between all characters in Adobe programs. So InDesign measures tracking in thousands of an M but tracking can differ in other non-Adobe programs. So this rule is telling people that the tracking needs to be equivalent to a value of 40 in, InDesign. A final rule for are A font, letting should always be generous and to clarify how generous this needs to be. I type in at least 6 points greater than the font size, so say, we have a header sized at 330 points. The lead-in would need to be 36 points or greater and anything less is not going to be acceptable for our brand. Okay, great, so that's a nice simple set of rules for using the a font for our brand. You want to make sure that you include enough rules that it's absolutely clear how the type should and should not be formatted. But if you include too many rules, you're going to run the risk of making the whole thing too complex and not user friendly. And then you risk people ignoring the rules which is the opposite of what we want. So keep it clear and concise now ready to give the same treatment to our b font. Remember this is going to be applied in quite a different way to or a font The a font needs to be decorative and have impacts for headers. But the B font needs to prioritize legibility over anything else. A big part of that legibility is going to be in having loads of different font weights that will allow people to use the typeface very flexibly. So be quicker to just drag your mouse over these two text frames and head up to edit copy and edit paste. So let's move that down here and adjust this to read be font, in brackets, for all over text. Let's highlight Linotte and adjust the text to read Franklin Gothic. And then track down a Franklin Gothic in the font list from the controls panel. For the weight, let's choose Book which is the regular weight for this font and is likely to be the most commonly used. Now we need to create samples for Franklin Gothic and this has got a whole range of weights. So let's highlight this existing sample for all the knobs and adjust the font to Franklin Gothic and then choose book for the white. Now, let's copy and paste that below and then adjust the weight to book italic. And then just keep copy and pasting the sample, adjusting the weight to medium. Then medium Italic, Demi. And finally Demi Italic. Great, okay, now it's time once again for your rules, so head back over again to your sample text document. And again, have a play around with the formatting of the text you might find upper case won't suit small scale text quite as well. And that the tracking doesn't need to be quite as generous. You might also want to think about setting down some rules for this B font, which help people format it into paragraphs. So one thing that I don't want is my text to hyphenate and break with across lines, I just think that looks a bit messy. Okay, so let's write those up on our so first, let's clarify what we mean by all of the text. So Franklin Gothic should be used for all text that does not constitute a header,such as body text, web text, stationery and email signatures. And then, let's put a note on our tracking, so Franklin Gothic should always have a 10 out of 1,000 tracking. And finally, let's make sure that we write up that point about hyphenation. So Franklin Gothic should never be hyphenated and to clarify, words should not be broken across lines. And there we have it, that is your one sheet typography style master. It's got all your typographic rules in one handy place. So head up to File > Save As, and save your style master into a project folder for this course if you have one. What would make this document really useful is to provide it in a couple of different file formats. So in InDesign file is fine for the designers but others might not have access to InDesign but still need to apply the branding across the admin documents and websites. So it's a really good idea to provide this sheet as a Word file as well and know it can be quite a bit of work reformatting your text again in Word. But it's really going to cement those rules in your mind and soon enough applying the branding to text in the correct way is going to become second nature to you. In a few lessons time, we're going to look at absorbing the [INAUDIBLE] master into a larger brand guidelines document. So you can have everything in one place but this is still going to be great to have to have. And what's useful with it being an InDesign or Word document is that you or others can directly copy and paste correctly formatted type samples onto whatever document you're working on. It's a digital master that's ready for you to use as a working document. Before we move on to the next lesson, I have a task that I'd like you to have a go at. It's great to have your style master to hand but sometimes it can be really helpful to have an example of how the type typography should be used in practice. So this is what I've put together. I have a sample web banner put together in Photoshop using the branding as it exists so far and with the typography rules I created put into practice. So here's my A-font all in upper case of that generous leading and over here, the B-font in Franklin Gothic medium and book weights and no hyphenation. I've also put together a sample business card in InDesign to demonstrate how Linotte doesn't need to be in stationary, that doesn't have any of these headings. As varied the weights of the front to demonstrate how to create a sense of hierarchy in the information without the need for the i font in this particular situation. So I would like you to do is to create a similar example, pushing your type a few rules into practice. And you can do this either for the Buzz brand, or for your own brand. And it can be anything that you think would be commonplace when you or others put together materials for your brand. So whether that's a web banner or a business card like I've got here or how about trying a letterhead, a simple web page or even a print out. The aim of this exercise is to get you to use your style master and get into the swing of applying your brand rules to everyday projects. So before the next lesson, take the elements that we've created already for a brand, the logo and the brown type faces. And put together a small example of something that would help somebody new to your brand to get their head around how the branding should be used. You can use any software that you prefer, whatever you feel comfortable with using. So I hope that's clear. Here are those examples again, the web banner the business cards and you can also find PDF copies of these included with the source files for this lesson. So feel free to download those and take a closer look at them if that will help you out. Once you've created your example item, save it and keep hold of it. It will make a great addition to your brand guidelines in a few lessons time. So you've now completed the third section of this Envato Tuts+ course, Designing and Building a Brand. That's fantastic work. In the next section of the course, we'll look at how we can flush out our brand identities even more, with branding extras like color, shape, and graphics. So that's great work guys. I'll see you over in the next lesson.

Back to the top