7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Typography

Closely related to grids is typography. This lesson explains how typographic principles apply to mobile, and goes through the various considerations in creating solid typography for your app.

2.2 Typography

Hi again, this is Chris for Tuts+ and this is the second episode of Section 2. As I mentioned in the previous episode, Section 2 is gonna be about going through the building blocks of UI design. In the previous lesson we talked about grids. And in this one we're gonna be talking about the closely related subject of typography. Some of this will overlap with what we went through in the previous lesson. So what do I wanna talk about in relation to typography and mobile design? There's four things I'm gonna cover. Typeface choice, font sizes and styles, a few concepts which I've listed here, white space, contrast, legibility, and readability, and finally, forming a style guide for using type in your app. So the first thing is typeface choice. This is a bit different in mobile apps to on the web. Android and iOS have their own system font family. For iOS it was Helvetica Neue, but they're now moving forward with San Francisco, which was first introduced on the watch, but is now being used on the iPhone, as well. In Android OS, Roboto is the native system font. Google also constantly refine, update and improve Roboto, so it's a font that's been evolving over time. So, your choice is basically to use one of the system fonts or something different. When you look at the Facebook app side by side on Android and iOS, there is subtle differences in the type. Not enough to notice, but it feels native to the platform. Actually, the example on the right is still using Helvetica Neue, and San Francisco is even closer to Roboto. So in terms of designing the app, the same metrics and sizes are gonna work pretty well across both Android and iOS, but you can see that each typeface has its own distinctive characteristics. It could sometimes be appropriate to diverge from these system fonts. The two reasons I would consider are for branding purposes or if there's another functional purpose. You might have a font that's very distinctive for your brand, and maybe you can use that in headings and for some areas, and use one of these system fonts for most of the copy. A very specific example I pulled out is Medium, and this is a functional example where a different font is more appropriate. Users on Medium are reading long posts. The system fonts are pretty legible, and very good user interface fonts, but both are sans serifs, and serifs are traditionally seen as better for reading long amounts of copy. Medium do a lot of great things around typography, and it's safe to say they know their stuff. Using the serif font is just a start of how custom their typography is, but the main thing is that they have a clear reason for using a different font. So I would suggest using the system font unless you have a brand reason or a rationale to move away from it. Next, I'm just gonna talk about sizes and styles. The main thing is to use as few as possible. Use it for emphasis and make sure there's enough difference. So you wanna have a basic style, and then you can emphasize it with color or with weight, and make sure there's enough difference between those two styles. Even just having two weights, like regular and bold, affords opportunity for emphasis when you consider size as well. But if there's too many different font styles in the page, it's gonna be difficult for the user to understand why they're different. And that's why I've mentioned meaning at the end. Every time you introduce a new style, we should consider what the meaning of that style is. Otherwise, it's just gonna get cluttered and hard to understand. So you should have a basic style, and then you should emphasis it where appropriate, and introduce more styles or differences when there's enough of a rationale to justify it. Here's a couple of examples from Product Hunt and from Facebook groups. And what you'll notice about these is it's really easy to understand and know where you're meant to look, but they haven't used a lot of type styles in doing so. If we look at the examples from Product Hunt, they're only using two or three sizes of text, and all the text is, in fact, the same weight. They're just using the color to slightly emphasize and de-emphasize different things. In the screen on the left, the name is the most prominent thing just due to being a slightly darker color and larger size. The title of the person is a lighter color to de-emphasize it. And then the block of text is in the default font size. In terms of the default font size, you can refer to the system guidelines to find out what the lowest type size you should go to is. I think it's around 11 or 12 pixels. i usually stick to about 12 or 13 pixels for body copy to keep it at a legible size. The other thing that you'll see in the second product on screen in the middle, and on the Facebook screen on the right, is the use of gray for supporting text. You'll notice this in every app once you notice it. The main heading gets a darker color and slightly bigger size to emphasize it. There's a bit of bold used in the Facebook app on the right, and then the subtitle is seen in gray to de-emphasize it. But the reason I wanted to point out these examples is that they're easy to understand and consume, but they're only used in maybe two or three sizes and two weights. There's not a huge amount of different styles going on, and that means there's not as much work to do for the user. For the third point, I just wanna mention a couple of typographic concepts. So the first one is whitespace. We mentioned this in grids, but when it comes to typography it's even more important. Never be afraid of whitespace. It gives text room to breath, it makes things easier to read, and it stops the interface getting cluttered. Compare the screen on the left here, which has a lot of whitespace, and is really appealing to read with the one on the right, which just feels cluttered and my eye doesn't know where to look first. This has two problems. There's too many different text styles going on, and there's not enough whitespace. With so many colors and sizes of text, it's too much work for me to figure out at what I need to look at. If we go back to the Product Hunt and Facebook screens, it's real easy for me to quickly scan these pages and understand what's going on. But when we come back to this app example on the right, there's about four different text sizes, four different colors, and a couple of different weights. And for me to figure out which ones are important enough, and why each has been assigned a different style, is too much work to figure out. That's why you're better off limiting yourself to only a couple of styles. And without any white space in the app on the right, things are just clashing together and there's no breathing room for me to separate these pieces of information and to scan and consume them. Another thing to consider is contrast. You wanna make sure, first of all, that there's enough contrast between the text and the background to make it legible, and also that there's enough contrast between different styles of texts that you can distinguish the difference, and not merely see them as a mistake. This is something that I mentioned a few times in the course, that if you decide to make something different, you have to be confident and make it different enough to be distinguishable because things that are too similar look like mistakes. Path on the left has provided quite good contrast here, both on the white card and on the gray background. The weight and color of this text is still easy to read and distinguish on the background. And it's also easy to see the difference between the bold text, the regular text and the black text and the grey text. The screen from Swarm, on the right, I don't feel like the regular white text has enough contrast from this orange background. It's quite hard to read. If the orange color had a slightly darker color, there'd be more contrast between the white and the orange and it'd be easier to read. But the problem is it's blurring together a little bit too much at the moment. I think it just needs a bit more contrast. And the last two things I just wanted to talk about were legibility and readability. Legibility is the most important thing in an app. What's the point in content if no one can read it? And yet in our effort to appear stylish, we're sometimes in danger as designers of over-designing things and making them hard to read. Here's examples from Product Hunt and Pinterest of a common thing that we see nowadays of text overlayed on an image. To make the text legible, they had to put an overlay between the image and the text so that the text can still stand out on top of the image. If you're doing this you have to be really careful about it. Because you don't always know what image is gonna be behind the text, it's hard to make sure there will be enough contrast between the text and the image for it to be legible. The other area of eligibility is making sure the text is big enough to read, as I mentioned in one of the previous screens. If you look to the Pinterest screen on the right where it says, Popular, I know that what's trending is supporting text. But for me, the combination of the light gray color and the small text size doesn't make this very legible, especially when you consider people with poor eyesight. It's something to test as you go along. And as I'll also mention elsewhere, you wanna be routinely checking your designs on your phone, not just in Photoshop or Sketch on your screen. Sometimes text will look bigger or smaller depending on the way you're looking at it, but you wanna get it on a real device and see how it really reads. And that leads us on to readability, which is sometimes mixed up with legibility, but it is different. Readability is concerned with how easy it is for people to read a block of text. The things that affect this are all the settings that you implement when choosing your type, making sure that there's enough let in-between lines, making sure that the letter spacing is good, and making sure that there is enough white space around it. And very important, too, is to have an appropriate line length for the text. It's not something you see happen as much on mobile because of the limited screen size, but you wanna make sure to limit the line length to a reasonable amount of characters. Sometimes you see a guide line of between 40 and 60 characters. In the two examples shown from Medium and Tweetbot, these are apps where you'll see people do a lot of reading. And if you look at the amount of words on a line, there's only about seven or eight max. So don't feel the need to have really long amounts of text on a line, it's actually better to keep it a bit shorter. This is about the optimal length for people to go from one line to another and to be able to read it quickly. The other thing that really helps readability is being able to scan things. If you look at the example from Medium on the left, it's quite easy to scan this and see quickly who wrote it, the heading, where the body copy is, and the separate link at the bottom. There's a good vertical rhythm here where there's appropriate spacing given between sections so that it's easy to scan and take in the information. So when you're creating a style guide for typography on an app, here's the things you'll want to define. You wanted to find text sizes, you want to choose a range of text sizes. Something typical would be to have 12, 14, 18, 21, and 24 point type. Within that range you should have enough difference to cover every situation you'll encounter in your app. Then you'll wanna choose text weights. Ideally, I think you should choose two or three, max. This might be regular, medium, and bold. And just be very careful about where and when you use them, and make sure that there's enough difference between them. Then you'll need to choose colors for your text. The main color is going to be something close to a black. As you may know already, it's never really good to use a fully black color in your interface. The reason being that this just doesn't appear natural. It is not something that we see in the real world. So every black and inverted color is color that you see in an app will always be a really, really dark gray. So you wanna choose something just off of a black as your base color. Then you want to choose two or three other colors that you're gonna use, ranges of grays to be used to de-emphasize the text in different places. And then you'll probably want a different color for links, or active colors, which I cover in the next episode. The fourth bullet point is that we wanna use consistent paddings, margins, and ratios. This creates what's called a vertical rhythm. When you have consistent spacing and padding, particularly vertically, it makes it easier to scan and know where to expect the next piece of content to be. It creates an order and it creates a sense that care has been put into it, and makes it easier for a user to know what to expect and how to scan as they go through different parts now. The next point I've made is to consider line height. This is something that you won't notice when it's done well, but when it's sloppy, will be quite noticeable. The good thing about using the system fonts is that they'll define line height for you by default, so you'll only be defining it if you want to change it. Again, like choosing fonts in the first place, you want to have a good reason for changing the line height. Sometimes you might need to tweak it for certain instances, or if you're using all caps, but in general the default is probably the way to go. When you're working in a program like Sketch or Photoshop, a good guideline to follow for line height is to use between 1.4 and 1.6 of the size of the text. So if you have 14 point type, you'll want to use something between 20 and 22 point for the line height. The second last one here is line length and wrapping. When I was talking about readability, I talked about finding the ideal line length for the copy that you're presenting, but you'll also need to consider how this wraps. If the text is too big, then you'll find words are breaking onto the next line too much. So, you'll want to define some rules around hyphenation. It's something that you need to play around with a bit until you get the ideal medium. The last thing you want to consider of this style guide is how it evolves. As I mentioned with other things within this app, you should never consider your style guides as something that can never be changed, after all, it is your app. But if you find somewhere where you need a new size, style, or color for fonts, you should add that to the style guide and evolve it over time as you learn. Make sure that things are within the style guide as it evolves so you don't end up with too many styles, or a mess of conflicting things that are going on. So that was a quick fire round of how to deal with typography in mobile apps. If you're familiar with typographic principals, most of it will be familiar already. I just wanted to talk about some of the things you might encounter on mobile. In the third and final video about building blocks, I'll be talking about color. So that's the next episode, and I'll see you there.

Back to the top