3.1 Site and Branding Colors
Our fonts are selected and our sizing and spacing are squared away, so now it’s time to add color. Generally speaking, your typography needs to fit harmoniously into the overall color scheme of the site, which for business designs will often in turn depend on branding. In this video, we’ll look at how to incorporate site and branding colors into your typography.
1.Introduction1 lesson, 00:37
2.Responsive Adjustments2 lessons, 32:50
3.Color & Accessibility4 lessons, 45:32
4.Element-Specific Typography4 lessons, 44:49
5.Wrapping Up1 lesson, 03:33
3.1 Site and Branding Colors
Hey, welcome back to advanced typographic design and feedback. In the last lesson, we got all of our responsive adjustments squared away. And in this section of the course, we're moving on to setting up the color and accessibility requirements for our typography. And you might not immediately think that color is necessarily a part of typography, but it really, really is. Because the whole purpose of typography is to make sure that information gets across to a visitor to your site in the most easily digestible format. And one of the main things that you can do to make sure that that happens is ensure that it's really, really easy to read your text. So that can be summed up into one word, readability. And the colors that you choose or the colors that you apply to your typography can have a massive impact on how readable your typography is. And another factor that makes color really important for typography is that it has the ability to highlight different types of text. So things like headings that you wanna stand out, links that you need to separate or distinguish from regular text, you want these things to be highlighted. And color is one of the most powerful means to do that. But then on the flip side where you have something where you're trying to create the ability for a visitor to just sort of settle in and absorb bigger sections of content, that's when you need to have a bit more of a passive color scheme. So we can look at all the ways that you can leverage color to make these thing a part of your typographic design. As a professional web designer, in almost every case the site that you're designing is going to be for a business or a company of some type. Very occasionally you might get a design job for someone's personal site, but more often than not it's gonna be for a business. And what that means is that you can't really just go and select any colors that you feel like, because that business or client is gonna have colors that form part of their branding. And that in turn means that when it comes to selecting the colors that you're gonna use for your typography, you need to start by looking at the branding for the website. The branding that the client has established could be anything from a logo like you see on the screen here and that's everything that you have to work with. Or in some cases where a business is a bit more well established, they might already have a complete style guide set up something like this, where all the colors are already determined. If you're really lucky, then that's gonna get your typography design off to a running start. Another example of a style guide is something like this. And you can see the relationship between the colors that are being used in this style guide and the logo. So you see the same thing here, the logo here, and then the colors that are used in the style guide. And in most cases, you're not going to get a style guide like this to work off, you'll get a logo. So then it's up to you to start by looking at this logo, and extracting colors like this, to use in your typography. As a side note, sometimes you'll work with a client who does not have a logo yet. And in that case, my advice is to never start the design process until the client has a logo ready. Because it's really, really important for your design colors to match their branding colors. So always advise a client that they should have their logo completed and decided on first, then you'll start the process of designing the site, and its typography. So we're gonna go through that process in this lesson. You'll find a link to this logo. This is the one that we're gonna be working with and the link will be in the notes below this video. So go ahead and download that logo now. You're gonna get a couple of different vector format files that you should be able to open up either in Illustrator or Affinity Designer if you have either of those programs. Or if not, you can open it up in Inkscape which is free. So one way or another you should be able to open up this file and then we are going to be working with these two versions of the the logo here. It's just gonna give us more colors that we can go through a few more examples with. So open up the file that you downloaded and then I want you to extract each one of these logos and export it at about 500 by 500 pixels square. That'll just mean that there's enough size on the exported PNG that we can shrink it down. And you see I've got a little bit of artifacting along the edges here in my export, but because I've exported a quite large when we shrink it down, then all of that artifacting is gonna disappear. All right, so back in the document we've been working on so far, let's add a new page and we'll just call it branding and colors. And the first thing that we're gonna do is just create a little frame. We're gonna drop our two logos in it and then we're gonna start sampling colors out of the logos and testing how they work in together with one another. So we'll just create a frame, that's our usual 1050 pixels wide, give ourselves some space to work with. And then you should have your two PNGs exported from that vector file and we're gonna highlight both of those and just drag and drop them straight into that frame. And then we're gonna resize each one of them, make sure that this aspect ratio is locked. And then we're gonna bring them down to be a 100 pixels square, well, near enough, 99.8 white but close enough. So 100 on both of those, and now we can start to pull colors out of these. Actually I've just noticed these dropped in outside the frame, want them inside the frame. All right, now what we wanna do is pull out a light color and a dark color. You're always gonna need at least one light color and at least one dark color and then we're gonna pull out some highlight colors. We can use highlight colors for things like links and buttons and headlines that we wanna have stand out from regular text. So we're gonna start by just drawing a rectangle here. It doesn't have to be any specific size, we're just gonna use this to start testing the colors that we're selecting. For our darkest color what we're gonna do is pick one of the darkest colors from these logos and then adjust it. So the purple is the darkest color in both of these logos. So I'm going to grab the color picker, and just grab something from this darkest section here. And this dark color is gonna be used for things like regular text and a little bit later once we've established our main color scheme we're gonna look at creating dark version or an inverse version of that. So in that case this color will also be a background color. And that means that even though this color is the darkest that's currently in our logos, it's still not dark enough. We want something that's moving into the near black or dark gray area. But what we wanna do is keep a bit of this purple hue in that dark color, because even though to the eye, it might look near black or dark gray. The fact that it will have a little bit of this purple in it will help it to mesh with all the other colors that we're gonna use. So to do that, we're gonna take this little circle here that's currently up in this more saturated lighter area and we're gonna drag it diagonally down into the left. So we're gonna start taking it down until we start to see a really nice color forming. So you can see that's already looking near black or near gray, but because we have kept some of that purple in it, it's got a sort of a richness to it. So looking at around about there, something like that is gonna work really well for normal text and as a dark background color later. Now, I have already previously gone through and selected all the appropriate colors to work with this logo. So I am gonna walk you through all of the steps that I went through to choose those colors but then I’ll give you the final color codes to work with as well. So for this dark color, what I settled on, I'm just going to paste the hex code in here, it's 343138. So that's coming just a little bit darker than what we had a moment ago. And if I open up the color picker, you can see that it's still in that purple hue area, but with significantly reduced saturation and lightness. Now just as a quick comparison, I'm gonna show you what this same color looks like without any color in it at all. So we're gonna change this over to hue, saturation, and lightness mode. And this second number here is the saturation value of this color. Now saturation means how much of a particular color, in this case, purple, is in the overall color that we're using. So I can remove all of the color by changing this number to 0. So now you can see the these two colors compared to one another. There's actually quite a significant difference between leaving just a little bit of that purple in there and going with actual dark gray. So let's delete that for now, and next we're going to choose our light color. And this light color should complement our dark color. Because very often, our light color is gonna be used on top of our dark color and vice versa. So let's draw out another frame, actually, be quicker to just duplicate this square, not frame, square, rather. Now if we wanted to make a nice light color that complements this color here, we could theoretically just move the slider up. That will work, however, we're still using this purple hue here. But it will tie our color scheme in with these logos more if we use one of the other colors that's in the logo. So both of them have this purple at the bottom as the darkest color. We've used that to create this, but they also have this orange color at the top. So instead, we're gonna sample from that orange color to give us our lightest hue. So once more, we're gonna grab the color picker. And then I'm gonna sample somewhere from this light-colored area. All right, so there you can see already that that gives you a really nice dynamic. You got this dark color with the purple tinge to it. And then we've got this lighter color. But we actually want to lighten it off a bit, have it not quite so bright. Because you can imagine that, if we have a whole big area that's all this bright, that's gonna be a little bit overwhelming. So we want to sort of dull that off a little bit. So this time, instead of going down into this bottom-left corner, we're gonna move to the left so that we can sort of start to quiet that sound down a little bit. So around about something like that is what we're aiming for. Now a color like that, Is gonna be a lot less overwhelming and garish when it's used in large spaces. In this case, the color code that I ended up with is FDF6EB. So almost the same as what we already had. All right, so now we've got our main dark color and our main light color. Let's put together a couple more little tests. So we already know in this case that these are the colors that we're gonna be using. But you can use these little tests as you're going along and picking out colors of your own on a real contract. So the first thing that I wanna do is make sure that, when we take a dark background, just line is up bit. And we put on top of it something with this light color, that that's gonna look okay. That there's not any weirdness with how the colors work together. I think that looks really nice, so it's just a really simple test approach. And then we wanna try the inverse, as well. So I'm just gonna duplicate those two shapes. And then we're just gonna sample to recolor each one. And then we're just testing through that the dark on light. Both of those look quite good. What we're trying to achieve here is make sure that there is a sufficient amount of contrast in between these two colors. We're gonna talk more about contrast a little bit later. But for example, we would need to make sure that we don't have something like this, where we end up with too little separation between the colors. But these have a nice contrast, and they blend well together. So you wanna do a bunch of little tests like that before you settle on your colors. The next thing that I wanna look at is make sure that each of these logo images look good on both of these colors as a background, so, Going to drag this up here and put it behind our logo. I'm just gonna right-click and choose Send to Back. And let's just get that lined up. I'll just make it square, 180 by 180 will be good. Whoops, meant to select this, get it centered. Now you can see that that already works really nice. The fact that this has the purple color in it means that it plays off against these colors really well. And then gonna duplicate, That dark color, grab a copy of this logo, and we'll check this one, as well. Again, because we've sample from the logo for this background color, it already works really nicely. Now let's test, And make sure that the light color works well, also. That's all great, as well, we don't have any sort of a bleeding effect where there's not enough contrast. So we can clearly see all of the edges around this logo. And then we're gonna try the same thing with the other version of our logo. Whoops, wrong one, this one. Okay, now that all works really well, also. So these are the two colors that we're gonna be using most in our typography and in the backgrounds that go behind our typography because that's really important. Your typography is not just the lettering, itself. It's also making sure that that lettering works well with its background. The background is part of the typography. Next up, what we're gonna do now that we have our two main colors selected is we're gonna choose some highlight colors. And I spoke about those before. You can use them for things that you want to draw attention to like headlines, and links, and buttons. And what we wanna do is make sure that our highlight colors work well on top of the two colors that we've selected. And even though we've chosen this light color here, we're also gonna use a bit of white background, as well. It's not going to be all light background when we put these colors into our typography. So what we're gonna do to select our highlight colors, let me just make some space, is we're gonna draw rectangles that go over the top of both of these colors and then also over the top of the white space. And we're gonna test our highlight colors on rectangles like this. Cuz then we can see how they go over the top of each of the colors that are gonna be used in the background of our design. Now we've got a bunch of different colors that we can work with from these logos. So I'm gonna make five of these rectangles. All right, so there's our five. With the first one, we're gonna grab an orangey color from the top part of our logo. And we need it to be bright enough that it's gonna stand out from this lighter version of that orange. So As usual, grab our color picker, and we wanna start looking in around this area where it's kind of a brighter and darker orange. That's probably actually bit too burned, it's a little too dark, let's go a little bit lighter. Something around about like that. Next up we're going to get one of these pinky colors here, so let's sample from around here. We don't want it to be too gray and sort of mucky looking, so we'll go around about here roughly. For the next one we're going to grab one of the green colors, so probably something around here. And as usual, you do not have to use the exact same colors that I'm using, feel free to experiment and choose the colors that fit your design. And then we're gonna choose a blue. So let's go around here. Something like this, and then finally we're going to go back to our purple, the darkest color and we get something around here. So we've got a relatively dark color to work with as well. Now, what I'm looking for when I choose these colors is something that gives enough contrast with each of these three backgrounds, but that also doesn't start to give off any sort of a visual artifact. Sometimes, two colors when they're placed on top of one another can actually start to form sort of optical illusions. For example, I'll just show you what I'm talking about. Try to frame here, and then I'm going to pick some really garish colors so this will show you what I'm describing. If I take bright red, And then I put on top of it Bright green. If you look at that, you can see that it starts to almost give a kind of visual ghosting around the outside. It's like it starts a sort of a glowing effect because of the way that these colors work together, and that's what you absolutely want to avoid, that's gonna cause enormous eye strain and it's gonna make it really hard to read the text. Obviously, nobody is gonna choose super garish colors like this, but that effect can happen on a smaller scale, and that's what we're doing all of these test cases for, to try to avoid. All right, now, I'll put in the actual color codes that I settled on for these, because you do wanna spend some time tweaking and adjusting these colors until they're just right. So to save you going through that whole process right now, for the orangey color, went with F2A225, for the pinky color, we have C92CDF. For the green, we have 73B921, for the blue, we have 48C0D4, and for the purple, we have D83992. All right, so now we have all of our colors, they're all ready to go and ready to be put into our actual topography. So let's draw out a new frame, as usual, gonna make it 1050 wide. We'll give it a stupid amount of height that we don't need, just so we've got a lot of wiggle room. And what we're actually gonna do is just drop in a logo here, so that we can demonstrate how all of these colors are going to fit together. As I mentioned, we're going to do a dark version in a lesson in just a moment. So we're going to use this three color logo for our light version, and then we'll use this four color logo in the dark version just a bit later. Next, let's start adding in some text that we can apply these colors to. Now, we could drag in the assets that we already previously created to define our margins, and generally speaking, we probably should, so that we can be showing our margins all the way through this design process. But I just want to speed things along a little bit so that we're focusing on the colors here, so instead I'm actually going to just type in some text directly. So we'll have this say, Major Headline Example, and then we're going to make sure, we already actually have the heading on textile, but we're just going to apply the heading on textile to this text here. Then I'm going to create another bit of text down here, and we're going to say, Followed Up Here by a Subheadline Below, and then we're going to apply the heading two style to this text. Actually, that's a bit big for the sake of what we're doing. Let's just make that headline three, and then we're just going to do some very rough alignment. As I said, for a proper job you want to make sure that all this alignment is set up properly, but for the purposes of this lesson I'm just going to do a bit of a rush job. And then below this we're going to add a paragraph of text, and actually for this it is going to be easier to just drop in one of our predefined paragraphs here, and I'm going to hide visual aids. And now we can start applying colors, so I'm going to zoom out a bit. We'll apply a code to the headline first, and we can actually refer to this document colors section here. This part of the color picker is going to automatically pick up on all of the colors that are used throughout the document, or the other way if you find that you end up with too many colors here for it to really be helpful, you can, of course, just grab the color picker. And then pick from one of these colors set up over here, which is one of the reasons that we created this frame, one for testing and two for easy color picker use. For this, I don't want to choose a color that's too light, now we could conceivably use any of the colors that we defined over here because we checked to make sure that they all work just fine on top of a white background. But what I feel works best as a headline is the purple color, so that's what we're going to go with for that. Once you've already done that groundwork of setting up your light and dark color and then your highlights, you can really just quickly check each one and then just choose the one that looks the best. For the subheadline, we could actually just use the same color again and you will see that in a lot of designs where there's just a standard color for the headline. But we've got a few colors to work with here, so let's pick another one. For this one, I'm gonna go with the pink color, and one of the reasons is on this example we're showing off this logo, so now we already have the purple from the bottom and the pink from the middle. The more that you can tie the colors in to the colors that are in the logo and in the branding, the more that your whole site is gonna be visually cohesive. And then for text color here, we want to select the element, and this is we definitely don't wanna have any of these highlight colors. You should always have either your light or your dark color for your text, so grab the color picker and we'll change that. To use our dark color. All right, so that is a pretty awesome start. We've got our headline, subheadline, and regular text. Let's just put in a few more examples, so that we explore a couple of different ways to use the colors that we've selected. One of the things that we can do is a sort of a bar headline. So what we'll set up is a frame that's gonna hold our headline. We're gonna make it 850 pixels wide and center it, and we're gonna just trim that height down to 80 pixels. And now let's give it our dark background color. So let's sample over here. Now we can put some light text on the inside. Let's grab our text tool, and what we're doing is creating a light on dark headline. So This is a Light on Dark Headline. Now let's stretch this out to fill up these text box. And actually, let's give it a little bit of margin on the left. And then, what we're gonna do is vertically align it here. Then we're automatically apply some of the other typography that we've already set up. We're gonna choose the Heading 4 style. And now we can pick one of our light colors to contrast. So we could use this color if we wanted to, and that would work just fine. Or we could actually use any of these colors, but gonna go with the orange there because, yet again, that ties in with the logo that we're using on this page. So that's another type of headline that you could use to draw attention to a particular section of text. And then, speaking of sections of text, lets do one more thing. We're going to create another type of paragraph display. So we make this 850 wide again and we're going to center it. And this time let's give it our light color background. So you can have more than one light colored background in any given site, just using it different sections. We've got the white and then we've got the lightened off orange color. Now, let's copy and paste our paragraph. We'll drop this in here. Now, we want to decrease its width a bit so we just jump in here and do what we were doing in a previous lesson, and make sure that this, Is set to scale horizontally. Let's actually just detach this instance to make all that a bit easier. So we'll get this scaling horizontally, and we also wanna get rid of this white background. So I've selected this frame here, and then I'm just going to turn off that background. So now we should be right to shrink the width of this paragraph and have everything inside adjust with it. So that's all good, that's working well. And we already have our purple base dark color applied to this text. Now let's just turn a visual aids on again really quickly. We'll move this up, decrease the size of our box here, turn the visual aids off again. And now we have a completed alternative paragraph style. So something like that could be used for a block of code or a block quote. And once again, there'll be more on that in a later lesson. So with that we have now finished putting together some examples of how we can go through the process of first looking at the site or the client's branding, pulling colors out of that branding. And then applying them to various typographic styles and elements that are going to go into our design. So far what we've done here is all being done with a white background, or a light background rather. Let me just bring up this excessively large frame. And then what we're gonna do in the next lesson is create a dark color scheme version of this. And this is becoming more and more valuable, and more and more important to do. We're seeing CSS flags come up in browsers now that detect if a person has their operating system set to using dark mode. The new Mac OS dark mode, for example, or the iOS dark mode. There's a dark mode now in Windows, there's a dark mode in several Linux operating systems. And also people are starting to use tools that switch their systems over, whether it's their browser, their operating system, whatever level. That switch them over to dark mode at night time, so that there is less strain on the eyes. So it's a good idea to start thinking about the option, it's not absolutely critical, but the option of creating a dark or inverse mode of your color schemes as well. So in the next lesson, we're gonna go through and we're gonna switch the color scheme that we've applied to our typography here over to a dark version using the colors that we've already selected. So for that, I will see you in the next lesson.