FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Basic Typography and Buttons

Earlier, we picked out two font families; now we’re going to begin the process of designing our typography, as well as a couple of buttons. We’re keeping it brief on the typography here, defining just a single heading and normal text, so we can concentrate on our colors and default text size. Other type elements will come in a later lesson.

Related Links

3.2 Basic Typography and Buttons

Hey, welcome to your code friendly design with Adobe XD. In the last lesson we got a couple of background panel set up with gradient on the dock.g panel. And now we're going to start the process of figuring out how our content it's gonna appear. That's pretty common to see a lot of designs that are filled with images. They look great. They really make a design come together. But generally speaking, the images are not always the most important part of a design process for a couple of reasons. One is that, especially if you're creating themes, the person who ends up using the website might not wanna use any of the images that you've included in design. They might use something totally different. And another reason is that it falls on the web designer to make sure that the content of a web site, the text is easily absorbed, easily readable. So for those reasons other than the base image that we started with here. One of the most important things that you can concentrate on is getting your topography right. And what do we mean by getting your topography, right? It's really just two things. It needs to be easy to read, and it needs to fit the look and feel of the site. All right, so let's get started. You might've noticed we have this line along here. That's actually a feature in Adobe XD to indicate the size of the viewpoint. The reason that's there is so that if you hit play, you get a preview that simulates the size of the viewport that you have set in your design. But if you wanna get it out of the way for the purposes of just completing your design without having that interfering. Then you can move all the way down to the bottom. It just means that when you hit play. You're gonna have a great big, long, non-scrollable preview instead. But it does sometimes get in the way, so you can be good to just move that all the way to the bottom. All right, now we're gonna start by designing how an h1 level heading is gonna look. In general, this should be the largest that the text gets on your site, except for potentially if you have a really large title. That's kind of a different case, but for the text that's gonna be used in articles and content, h1 should be as big as it gets. So let's just grab the text tool and we're just gonna type out, an example of a Heading Level One. Now here is where we can use our measure. We'll grab our 80 pixel measure over, bring it into the corner, just drag it. But actually we'll just drag both of these up to the top to make sure that they can be seen. And we'll position this measure in the corner. Now, we're gonna be able to use that to get our heading aligned. We won't worry about it just yet though, because this is about to change its size. And there are few important things that you're gonna need to decide on here. You're gonna need to decide the font family you wanna use for your headings. The white that you wanna use, the font size and the color. And we all ready have a couple of font families that we've bought into the design. We have our Amatic, you see font family up here, and we have our Raleway font family. And this Amatic font is kind of a decorative font. It's probably not a good idea to use it too much through the site because it's not very readable. The reason that it's here is purely stylistic because it adds to the look and feel of the site. But that doesn't necessarily mean we wanna use it everywhere. And we don't wanna bring in any more than two font families because the low time is gonna be too large. Remember that for every font that you include in the design, you can be adding anywhere from 2 to 400 kilobytes and than can slow down the load speed of the sides. So you just wanna keep it to two maximum. So that leaves raleway font, which is what we already have set. And we kind of have a bit of a light breezy feel to the site already. This doesn't feel like a site that should have really chunky text. So, what I'm gonna do is I'm gonna go with a light white for our heading. And then I'm gonna bump up the size of the heading by just clicking in this field and then dragging up. I actually have a font size that I settled on in advance. I'm gonna show you later on a process that you can use to figure out what range of font size your heading should be. But for this one, we're gonna go with 45. And now that we've done that, we're gonna set this to be left aligned, so if we want to edit this text, it was pushed out to the right, rather than spreading out in both directions. And now, we can align it with our pixel measure. And funnily enough, this is actually defaulted to the color that I would already have suggest to use here. So let's say you had a white heading by default. We're not actually using white in our color pallet. Remember up here, we have this as our lightest color here. And there's really no need to add another color here. So we're just gonna pick from the colors that we already have. And the best fit is this light blue that we created for our pallet earlier. So we'll just select that and now that's all ready to go. Now we wanna put together some paragraph text. So I'm gonna grab this text tool here, and for this I’m actually gonna turn on, The Grid. That we talked about earlier because I wanna use the text tool to draw out a box that a paragraph text is gonna see inside of. And we want it swift to snap through these lines that we setup earlier on both sides. We're just put a little default text here, just that we got something to eat it. We're gonna trap this text size down to 16. Now you can't tell too much by just looking at that amount of text. So what we're gonna do now is get some placeholder text. And to generate some placeholder text, you can use the old school Lorem Ipsum if you like, but I personally like CUPCAKE IPSUM, and it's not just because I like cupcakes. Sometimes it can be really irritating when you're using placeholder text in an application it has spell check on it. Because it doesn't recognize any of the Latin words and Lorem Ipsum. So it can actually be better to use a text generator that uses real words. So let's have it give us a bunch of paragraphs, make them medium length and will generate them. All right, so let's copy this paragraph and we'll take it back into web design and we'll paste it in here. And now, we've got something that we can actually work with. As a general rule, it's a good idea to leave any default text, paragraph text like this as 16 pixels, that's the default font size in pretty much every browser. And during the coding phase a lot of coders won't actually even specify 16 pixels as the font size, because they can leave it up to the browser to do that. That leads into a whole other topic of why the default browser font size should be left at 16 and how RAM units work. So I'll include some links in the notes below this video if you wanna read more about that. But otherwise, unless you have a really good reason, just leave your default text at 16 pixels. And the next thing that we need to decide on for this paragraph takes is the line height. But right now, these lines are bit too close together to be easily readable, so we're gonna increase this size. In my design I like to use the line height of 1.618, which is the value of phi. Phi is a number that just mathematically often helps things to look good, when this number is used as a ratio. And this is your line height, here. And an easy way that you can use a 1.618 line height in Adobe XD is to jump in here, and enter the default font size, and then just multiply by putting in a star. And then just type out 1.618 and hit enter. Now we can see that, when we multiply 16 by the value of phi we get 25.89. But we like round numbers, so we're gonna change that 26. And now we've got a nice readable looking line height for our paragraph of text. This text has defaulted to a weight of light. That looks quite readable. So we're just gonna leave that as it is. Let's also graph alike color from our palette. So we'll leave that as it is as well. And we'll just drag the bottom of this box up here. So it doesn't get in the way. And now, that's the basics of our topography. This text is going to be pretty much the smallest in our main content. This text is gonna be the largest. And later on, we're gonna be fill the rest of our topography by creating a scale in between this two ends of the spectrum. All right, next up, let's create some buttons so they're gonna work on a dark background. So we're gonna grab our rectangle tool, and we're gonna draw at a rectangle. We actually want this rectangle to be 180 pixels wide by 52 pixels high. And then we're also, we're gonna round off these corners, which we can do by grabbing one of these circles here, and just dragging in. And we're gonna drag until we get a preferably rounded edge on each side, and we don't wanna a border here, that's not necessary. Zoom back out again. And earlier on we already selected some highlight colors, so now we can use those in our buttons. So for this first one we're gonna set that to orange and we can see that that already highlights really well, and now we're gonna add some text inside the button. So grab that text tool. We'll click inside here, in the middle. And we'll just add in some text that says BUTTON TEXT. You're gonna center align that, in case it needs to be edited again, and we'll drop it vertically and horizontally in the center of our button. And that color text is not very readable. We wanna to have dark text, seeing as how this on a light background. So once again, we're gonna pick from our swatches, we'll just use a dark text here. And we're just gonna hit control 1. See this at 100% size. And this is lightweight text at the moment, which is making it a little bit too hard to read. So we're gonna bump that up to heavier weight. We're gonna go up and instead of light, we'll gonna use medium. So now that button is a lot more readable, and that one is pretty much good to go. So now lets select our button text in the background rectangle and we'll group them up and we'll rename that to light button one. All right, let's duplicate that. So that we can make another button. It's gonna work well on a dark background. And now all we need to do here is just pick a different background color for our rectangle. So we'll double click to go inside the group. And now instead of the orange, we're just gonna choose our light color again. So you can see how when you have a define palette, it becomes a lot easy to quickly generate elements. All right, so that's what we need for now for our basic topography and buttons on a dark background. Now we need to do the same thing for a light background. So we're just going to copy all four of these elements. And then we're gonna paste them and drag them down onto the next panel. Obviously, we can't see them right now. So we're just gonna select text items first and we're gonna change them to a darkest color. Now we can also change the background of our buttons. So instead of orange here, we're gonna use the blue highlight that we picked out earlier. So choose that from our palette. And for the background on this button, I'm gonna choose add that color. So now both of these contrast quite well with the background. And then obviously we need to invert the color of the button text. And we'll choose a lighter color. There we go, quick as you like. We've got two new buttons to use. So we'll grab our measure, again. Once more, we'll drag these up to the top. You'll have to pretty much keep doing this as you're adding new elements into your design to make sure that when you move our measure around, you can still see it above all the other elements. All right, so now we'll grab all our elements and drag them up so that it aligns with our measure. So we've got our padding correctly around the outside of our panel here. And here's where you can notice something that happens as a result of having dark text on light versus light text on dark. Here in our paragraph text it's quite readable. The font weight is light. And here the font weight is still light. But because of the colors, the font looks thinner, and not as easy read. And sometimes that's something that you're gonna have to adjust for. Because of all of the light coming from this lighter color here, it kinda bleeds in around the edges of the text. So you might need to bump up the font weight of dark text on a light background. So we're gonna change that up and use regular. As a font weight for this text instead. In the next video we're gonna cover something that technically is a part of basic typography but it's something that gets forgotten in design so often that I thought it deserved its own video. So for that I will see you in the next lesson.

Back to the top