Transcription
When putting two designs side by side, one that just looks bad and one that looks good, most people can tell you which one looks better or which one is the well-designed one. What most people cannot tell you is why one of them looks better. That "why" part, why we should handle text in a certain way, why we use space the way we do in our layouts, is something that we as designers spend hours upon hours in the earlier parts of our careers to really understand. But are all of those hours really needed? Or can we learn a thing or two from the brave designers who put in the work before us? Yes, we can. And that's why in this video, we'll look at six practical tips that you can use to improve your layouts with text and spacing.
When I was in design school, I had a teacher who was really into typography. He even did university research on it, like a whole dissertation dedicated to typography, to text. And I remember it vividly because I couldn't understand why you would dedicate so much time to something as meaningless as typography, as text, when you have things like cool animations and amazing illustrations and vivid colors to play with as a designer. So I neglected typography, not really realizing that what my teacher was researching is one of the fundamental skills of design, one of the most important aspects of good-looking design. You see, typography is not just about about the font you choose. It's how you use the font you choose.
Now, before we get into the tips, since I know that it was hard for me to really grasp the power of this, we'll make it a bit easier for you. For each tip, we'll make a correction to this layout. And by the end of the video, you can be the judge of what looks better.
Now, the first thing we should look at when it comes to typography in UI design is line height. Line height is the space between text lines. It represents one of the fastest ways for you to go from bad design to good design. If we take a look at the websites for some well-known companies, you'll see that all of their headings end up in a similar kind of range when it comes to line height. Google generally uses 1.2x the text size. Dropbox is also around 1.2x the text size. And Uber is somewhere around 1.2 to to 1.5x the text size. One thing to keep in mind is that line height generally gets smaller the larger the heading is.
Now, when looking at body text on the same websites, we see a pattern of 1.4 to 1.5x the text size. And the same thing applies here: the larger the text size, the smaller the line height. So, to level up your designs with line height, right now I would suggest that you go for 1.1 to 1.3x the size for your headings and 1.3 to 1.5x the size for your body text.
Another very easy fix to bump up your designs a couple of notches would be to adjust your letter spacing. Letter spacing is the distance between characters in your text. And you might not think that this does a whole lot, but it makes a big difference. You'll notice that headings that have this "mwah" crispness to them usually use negative letter spacing. So you might wonder, if these "muah" headings have negative letter spacing and it looks so good, why don't fonts come with negative letter spacing out of the box? And there's a simple answer to that. When it comes to negative letter spacing, it's usually something you just use for headings because if you start using it for your body text too much, you're gonna see quickly that the overall readability of your text is gonna be decreased. This applies to headings as well, but since the text is much bigger, it doesn't impact it as much. My general rule of thumb when it comes to letter spacing for text, and this comes with a caveat that really depends on the font you're using, but what I use usually somewhere around -1 to -2% for headings. And if it looks too tight and you're not sure if it's the right thing to do, uh, lower number is usually the way to go.
Now, onto text alignment. Another thing that can cause huge problems in your designs. If you've ever read a long paragraph that is center-aligned, you might have noticed that it takes a bit longer to get through this information. This is because for each line you read, you constantly have to find the beginning of the next line of text. And this decreases your reading speed because you have to spend time finding the next line of text instead of reading. But this doesn't mean that you never use center-aligned text. When it comes to headings and shorter text chunks, it's totally fine to use it. And you'll even notice that big companies and great-looking websites use it a lot. One thing that you should avoid at all costs, or actually, you should never do it, is the good old remix: having a center-aligned heading and a left-aligned body text, or vice versa. Don't mix them. So, a general rule of thumb here for anything that spans more than three lines of text, go for left alignment. And also, as I just mentioned, don't mix and match alignments between headings and body text.
The next point is about text width. In a UX study conducted by The Baymard Institute, it was revealed that "long lines of text are typically perceived by users as intimidating and overwhelming. As a result, users faced with overly long lines of text are more likely to avoid reading the text." Clearly, our users avoiding to read the text is not a good thing. But the Baymard Institute goes on to conclude this as well: "More users will fail to fully understand the products or services' benefits and thus decide that a particular product or service won't meet their needs." So, not only will long lines of text get our users to not read anything, it will also lead to less conversions. And that might not mean a lot to you right now, you just want to, you know, design good-looking stuff. But let me put it like this: less conversions equals less money equals unhappy clients and stakeholders. No matter how good the design looks. So, if you know so much to him, what is a good text width then? Well, this is not my own opinion. This is The Baymard Institute recommending. And they say that anywhere between 50 to 75 characters is a good range to stay within for your body text. So, for a normal paragraph, around 18 pixels, try to stay within 50 to 75 characters. And when it comes to pixel width, 600 pixels for a desktop screen is a very good number to stick with.
Now, let's talk about hierarchy in text. A common mistake is to overuse text sizes to indicate hierarchy in your designs. This will quickly lead to your designs looking messy and random and just straight-up unprofessional. And like most things in design, less is usually more. And we have a rather easy solution to this problem. So, the next time you're designing something, try your absolute hard as to stick with just two different font sizes and use font weight and subtle color changes to indicate hierarchy.
Next up is spacing related to text elements. Space is one of the most neglected aspects of design for new designers. And in relation to this, I found a really good quote by John Sorry, John, I know I totally butchered your name there: "White space is to be regarded as an active element, not a passive background." So, white space, or space, should be as carefully considered as your images, your buttons, or your flashy animations. Even more considered than those things.
Now, there is a very practical way of approaching this when designing. And I call it "relationship advice in UI design." If you have a group of elements and you ask yourself, "What's their relationship?" you'll quickly notice that some elements have a closer relationship than others. Let me give you a practical example. In this group of text elements, the bottom heading is more closely related to the body text below than it is the body text above, because it's the heading for the text below, and not the text above. So, what the first chapter of "relationship advice in UI design" would tell us here is that since the bottom heading and the body text has a closer relationship, they should also be positioned closer to each other. And to make it simple, let's use a multiplier for this relationship. If the distance between the bottom heading and the bottom body is 1x (16 pixels), the distance between the bottom heading and the top body should be 2x (32 pixels). And this same rule can be applied to a lot of things in your UI: distances between call-to-action elements and hero texts, logos and links in navigation menus, etc.
So, the before and after difference. Best part about this is that you can take all of these things and apply them to your designs today. And if it helps you not fall into the same pulse that I fell into when learning design, then I did my job today. Now, I have a bunch of content when it comes to UI and UX design, including what you see on the screen right now. If you're interested, check it out. Until the next one, have a great life. We'll talk soon. Ciao.