Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Handling Text

Typography control is another key element of responsive design, and XD’s “Character Styles” functionality can help you convey to a developer what should be happening with your type once it's coded up. There are also a few little tricks you can use to make it easier to have your typography resize for different layout requirements. Let’s check out all these things in this lesson.

3.6 Handling Text

Hey, welcome back to Responsive Web Design in Adobe XD, I just wanna touch on a couple of quick points that are gonna help you with handling text when you're creating responsive artboard mockups. Now, a lot of the time, when you add in a heading, like you've got here, it's going to automatically be added in Point Text mode as opposed to Area mode. And the result of that is that when the parent is resized, so like this, the edges of the heading are gonna protrude outside the edges of the parent. But what we would be better off with is something that can automatically keep itself inside the bounds of its parent. So one of the things that you can do with your text to help make the responsive process quicker and easier is, after you've added it all in, go through and set it all to Area mode instead. And then, what you wanna do is widen this container out to the outer edges of the parent, or at least to where you would have your padding around the outside. So here, I can drag the left side out to line up with this edge of the content and the right edge here. And now when I resize the parent, Now the text is always gonna stay inside. So then the only thing that we'll have to do later is just increase the height of this box and gradually decrease the size of the text in order to make it fit vertically as well. But by making that one change, you prevent it from flowing outside horizontally. So I'm gonna do the same thing up here with this heading, switch it into Area mode, and then drag out the right side. This setting here is already in Area mode, so that's already handled. So just check each one of our headings. That's in Area mode, so that's fine. And you just wanna make sure that the outside of those bounding boxes is lined up with the outermost points that you would want that text to exist at. So then what you're gonna do, as you go through and you create narrower and narrower artboards to represent different breakpoints, is you're also going to reduce the size of this text to make sure that it fits in. And as you do that, it's a really good idea to save out each one of your sizes, In the Assets panel here as a style. So for example here, we have a 60-pixel font size, and a 73-pixel line height. And that is saved up here. So that gives you two advantages. One, you can then easily reapply anywhere else you need to have the same size font. And the other thing is, As you go through and create your different size mockups, your heading text is gonna get smaller and smaller. So by saving out each one of these different styles in this list here, when the coder comes along, they're gonna be able to see exactly which font sizes they need to have accounted for in the style sheet. And then there's just one more thing that I wanna point out. And that is that unless you have a very good reason, you shouldn't shrink your normal text to a size any lower than 16 pixels. It can be tempting to start to try to shrink this down so that your normal text will fit more comfortably in your layout. But that's generally speaking a bad idea. If you go lower than 16 pixels, you might be able to read it comfortably on say a medium-sized desktop monitor. But small text is gonna be really hard to read on a little phone screen. And it's also gonna be really hard to read on a large desktop monitor, where it's such a small fraction of the overall space. So even though you're gonna be changing your heading sizes down, you pretty much wanna leave your default font size the same at the largest size as it is at the smallest size. And then there is just one more tip that I wanna give you, and that is that no matter how small your headings get, try to make sure that they're always a bit bigger than your normal size text. Because otherwise you can get to a point where it's hard to distinguish between a heading and regular text. If you absolutely have to bring your heading size down to the same font size as your text in order to fit it in comfortably, then at a bare minimum, make sure that it's a heavier weight than your default-sized text. All right, so that is pretty much everything that you need to know to handle text in your responsive design process. Just a couple of quick tips. Now, we're just gonna do one more thing before we move on to actually going through a practical example of creating breakpoint-based artboards. We're gonna take this layout that you've already been working with, and we're just gonna trim off the left and right sides so that we have an artboard that represents our site at its maximum width. It's only gonna take a couple of minutes, so we're just gonna go through that really quickly in the next video. I'll see you there.

Back to the top