Using Type and Fonts in Adobe XD for UX Designers

Using Type and Fonts in Adobe XD for UX Designers


Hey there, if you want to follow
along exactly with this video… there are some exercise files
that you can download. There is a link in the description,
they’re free to download. The other thing you might do is– this is a free video from my larger
User Experience Design course. If you enjoy the video,
and like my teaching style… you might want to check out
the full course… there’ll be a link in
the description as well. All right, on to the video. Hi there, welcome to the video… all about Type in XD,
actually just getting the basics right. Now if you are an Adobe nerd,
and you were like… “Man, what am I going to learn
from this type of video?”… stick around, XD has
some quirky text things… plus we throw in some tricks and tips
for distributing and duplicating. It’s worth your time, hang about,
let’s get started. To get started, grab the capital ‘T tool’. I’m going to zoom in a little bit,
I’ll use my shortcut ‘Command 1’. Command 1’s really good when
you’re dealing with Type. So it’s ‘Ctrl 1’ on a PC,
that gets you to 100%. Remember, it’s just better
to be dealing with that… when you’re dealing with text. You’re seeing the actual size
that your audience is going to see… when you’re making decisions on
how big it is and how small it is. So grab the capital ‘T’,
and it’s two Type boxes. If you click once you get
what’s called a Point Text Box. And this is good for headings. And it goes on and on forever. That’s just the way it is. The other type box,
if I go back to my black arrow… to kind of deselect out of that… and then go back to my Type Tool,
and if I click, hold, and drag… I get what’s called an Area Text Box. The difference between this is,
when I mash it, see what happens. It’s got a fixed width, so headings,
body copy, navigation, body copy. You only use this for a body copy. Things that have like
multiple paragraphs… and, I don’t know, Lorem Ipsum,
that type of stuff. You can convert each of them,
I could say, black arrow… I could say you, I want
to be an Area Type Box now. That there’s a little icon for point text,
that’s the one for area text. So you click on this. It kind of changes
a little bit over here… but watch what happens, if I
double click to get inside… I can start typing, and you can see
it has a fixed width. The weird thing about it though is… the actual height of that box
is just that blue dotted line. Look what happens when I go
back to my black arrow… because there’s all this other text;
what happens to it? Just kind of disappears,
I move it down so you can see it… but it just gets kind of lost
underneath this. So that’s what this
little blue dot… in the middle of those white
circles mean to indicate. If I drag it down, any of these icons… I drag it down, you can
see there he is there. So if you end up with a box like this,
you make it too small… that little blue dot appears. It’s not as important,
it’s called Overset text… in something like InDesign,
it’s not super important… when you’re doing a mock-up,
it might be though. So keep an eye at the little blue dot. So you can convert one to the other,
Point text, Area text. A couple of things. We’re going to move in now and start
kind of fixing up our navigation. Now when you are working
in wireframes don’t be picking fonts. I’m just going to leave it as Arial. You leave it as something really simple,
it’s not a time to be picking fonts. We’ll do proper fonts
a little bit later in the course… when we start doing high fidelity,
we’ll look at it a little bit more. The real basics though before we move on
is I’ve got this box selected… you can see over here… I’m not going to go through everything,
I am actually, because it’s real quick. Left align, Center, Right align,
you’ve got Underline. This is the space between letters. So I put up to 20, it’s going to open up– let’s put it up to something
really high, 200. Space between letters, that’s the
space between lines, put it up to 50. And this is the space after the paragraph. So if I go into here and I put
a return in between these two… and I open it up, so I put a return
in there, there’s no spacing… but if I go, actually I like
spacing when there’s a return… you can see, not between
the lines but after… there’s a return, that’s where I put
our little enter in. A couple other things to
show you about text… a little quickie an XD. I’m going to delete that stuff,
and what I want to do is… I don’t want to use
this, this is an XD logo. I’m just going to delete it,
I’m going to put in the company name. Don’t be tempted to put in the logo here. It’s really hard as a designer to
not start putting in the logo… but then you start using the brand colors,
and then the fonts… and then wireframe is not
a wireframe anymore. It’s like a half baked high-res version. So just stick to the actual text. So uppercase is kind of a nice
way to remove… any kind of design from it,
just keep it all very standard. The other thing I’m going to do here is… I’m going to circle the text
and make it white… so it can be seen at
least across this. The other thing is font size,
remember I’m at 100%. Remember, ‘Command 1’
on a Mac, ‘Ctrl 1’ on a PC. So I’m picking the right size,
and it’s quite big, right? A real common body copy size
for wireframes is 16 pixels. So I just clicked it over here
and hit 16 and hit return. So often I’ll just have 16 everywhere. Maybe the headings will be
a slightly bigger size… to indicate kind of what
are headings and what or not. The other thing to do, on the black arrow,
can you see this little white dot here? When you’re in Point text, pretty much–
most of the text that I’m doing here… except for big chunks of body copy
are going to be this Point text… see this little dot here, does a couple
of things, it’s kind of weird. If you click, hold, and drag it down
it’s a great way of adjusting the size. This one here doesn’t have
a drop down or a slider… so you have to keep
typing it in there. So you just like it a little bit big,
little bit small, just drag that. The other weird thing it does is… you can see there, if I’m
right over the top of it… it’s up and down, if I come
out just a little bit… so not quite on the circle
but just outside anywhere here… click, hold, and drag it,
it’s rotating. Now you can see it over here,
there’s my rotation… and it’s up to you but I’d
stay away from rotating text. It’s quite hard to do in an app
and coding a website, weirdly. It can be done but, yeah… your developer might hate you
if you start rotating text… and he’s going to go, try and
make a consistent rotated text. You have to have a real good
justification for that pain. Anyway, so we’ve got our text here,
a couple of things, I want to– like this here, what is this?
Is it set to 10 point? Mine is a little bit small for what I need. So I’m going to click it,
delete it, goodbye guys. I’m going to duplicate this across,
you can copy and paste it. If you select something, and go ‘Edit’,
‘Copy’, and then ‘Edit’, ‘Paste’… it just ends up over the top of it,
so you can see they’re just there. So what I find is a little easier is,
with the black arrow, so click– before you start dragging,
so I’m going to drag it over here. Hold down the ‘Option’ key
on a Mac or ‘Alt’ key on a PC. You can see, just kind of,
while you’re dragging, makes a copy. I find that quite useful. So I want a couple of things. This first one here, my wireframe
is going to be the example. I like having an example version of it. I’m going to hold down
my ‘Option’ and drag, the ‘Pricing’. So you type this in as well. Now the reason we are keeping
these in separate boxes… because obviously I could just put in… space, space, space… And then put in ‘Log in’, and that’s fine. Two things, one is it’s hard to
kind of adjust that spacing… but it’s not a real big problem. What ends up happening is… in XD, which we’ll see later on
when we start doing mock-ups… if this is one big text box with all
the different words in it… you can only get it to be
a navigation item for one thing… because it’s one text box, you can say… this whole block of text goes to the
example page, but you can’t split it up. So with these all in their
own little type boxes… it means later on when
we get in the course… we can actually get this button to go
to something different from this one. So you’ll get in the habit of that. I’m going to have a couple of these,
I’m going to have ‘Log in’… and we’re going to
have ‘Start Trial’. ‘Start Trial’. Another thing while we’re here is… you can see how– I can see
the edge of this thing. If you can’t see it, sometimes clicking
the white background… clicking the edge of the
artboard is a nice easy– double click on the edge
of the artboard is… a nice easy way to select
the whole artboard. Otherwise it’s clicking on that name. When you’ve got the whole
artboard selected… you can adjust these columns here. Mine’s quite light, I’m
going to adjust mine… mainly because I want you
to be able to see it. You can see there, through the video. Sometimes the videos don’t show
the contrast very well. Anyway that’s a handy trick. Double click the edge and you get the
artboard’s kind of overall settings. That is not the trick I wanted
to give you, the one is… I want this to kind of line up
close to here. I want them to be all kind of distributed,
so I want the same spacings. There’s a couple of ways you can do it. You can select them all, so I’ve got
everything selected including my Nav. I’m going to hold ‘Shift’
and click the navigation. So that deselects it,
this maybe a bit advanced here. So let’s just go click, hold ‘Shift’,
hold ‘Shift’, hold ‘Shift’, hold ‘Shift’. So I’m holding shift when
I’m clicking them… makes a nice big selection. And up here there’s your aligns,
I want this one here… the Distribute Horizontally, you can
see there’s some shortcuts up there. I’ll click on it, it just
spreads them all out. What you will find though in XD is–
let’s say I don’t do that… let’s say I line this one up,
and I’m like, “Yeah, it’s about perfect.” If I start dragging this,
I’m not doing anything… can you see those little helpful
smart guides appearing? You can see, when I get to here… kind of like the little pink
thing appears, and says… “Would you like them to
be 41 pixels apart”… you’re like, “Yeah man, it is too good.”
Look at that. I end up doing that a lot more than
kind of trying to remember the shortcut… or I have problems with horizontal
and vertical, I always click the wrong one. Anyway, so that’s the basics for text. We are going to look at it
a lot better later on… when we get into kind of web based fonts
and do some fancier things. For the moment that’s what we need
to keep going with our wireframe. Simple text, Point text,
Point text, Area text. There’s a couple of other
little tricks in there. All right, let’s jump into the next video. Hi there, I hope you enjoyed the video. My name is Daniel Scott. If you would like to do the full course… there will be a link in
the description for that. Please give this video, on YouTube here… a thumbs up, really helps me
in what I’m doing. Also, consider subscribing to the channel. I release a video like this every week,
for your viewing pleasure. All right, bye.

6 thoughts on “Using Type and Fonts in Adobe XD for UX Designers”

  • Showing the point/area feature is very informative
    Are you able to predefine the font family&size for elements?
    Or link them to behave like CSS with EM's so child elements fonts are proportional or is it all manual?

  • Although "difficult" is subjective. I'd argue that anyone who thinks rotated text is difficult is an inexperienced developer.

Leave a Reply

Your email address will not be published. Required fields are marked *