Tutorial 4: An Introduction To Typography And Typesetting
Introduction
Welcome back to your UI design short course! We’re now on day four, and today, we’ll be delving into the world of typography. If you thought that choosing fonts was a one-step process, you’re in for a treat. Typography is so much more than choosing a nice font to go with snappy text; it’s the art of using typefaces to ensure your interface is readable, accessible, and unique.
So far, our climate change app screens are coming along nicely. We’ve wireframed our designs, translated them onto our Adobe XD artboards, and created some awesome logos using basic shapes. Today, we’ll be injecting some personality into our screens with our own original text.
Let’s look at what we’ll be learning today:
- Introduction to typography
- Introduction to typesetting
- How to choose the right font for your app
- Putting text into your app screen
Beautiful typography, here we come!
1. Introduction to typography
Typography is so much more than words and fonts; it’s a complex art form and a vital component of UI design. When you see text on a website or app, what you don’t see is that a UI designer has worked hard behind the scenes to balance the style, arrangement, and aesthetic of the letters to elicit emotions and convey specific messages to the user. It’s typography that guides users around the interface—and without proper typography, the user experience will take a hit.
Good typography will establish a strong visual hierarchy, build trust with your users, and help to solidify your branding. It’s the reason we instantly associate iconic fonts like Myriad Bold with LinkedIn, or Didot with Vogue. Having good, strong fonts that visually stimulate and reflect your brand’s personality could be the difference between someone staying on your website for two minutes or two hours.
Let’s look at some of the key elements of typography:
Fonts and Typefaces
The terms ‘font’ and ‘typeface’ are often used interchangeably, but they actually refer to different things. A typeface is a family of related fonts, while fonts refer to the weights, widths, and styles that constitute a typeface. For example, Ariel is a typeface, and Ariel Bold is a font.
Hierarchy
Typographical hierarchy is the process of using sizing, color, contrast, and alignment to guide users on which text should be noticed and read first. A typical example of typographical hierarchy is size: headings should always be larger than subheadings and standard text. Below, you can see that the headings are considerably larger than the body text.
Contrast
Like hierarchy, contrast helps to convey which ideas or messages you want to emphasize to your readers. You can create contrast by playing with varying typefaces, colors, styles, and sizes to create visual impact and break up the page’s text.
Consistency
Though it might seem like a contradiction to the above points, consistency is key if you want to avoid a confusing and messy interface. It’s good practice to establish a consistent hierarchy of typefaces (one consistent font for headers, another for subheadings) and stick to it.
White space
Also known as ‘negative space,’ white space is the blank area around text or graphics. It mostly goes unnoticed by the user, but white space is vital for establishing hierarchy and keeping the interface uncluttered.
Alignment
Alignment is the process of unifying and composing text, graphics, and images to ensure equal space, size, and distance between each element. For example, aligning your text to the right will seem counterintuitive for readers who read left to right.
2. Introduction to typesetting
When it’s time to put text into an interface, UI designers take a lot of time to carefully compose the text, adjusting space between lines and letters. This art of arranging text is called typesetting. Once the text is in the interface, UI designers use typesetting techniques to improve the legibility and readability of the text, all the while making sure it looks balanced and high-quality.
For this exercise, we’ll focus on three fundamental techniques you’ll need to typeset your text: kerning, tracking, and leading.
- Kerning is the practice of adjusting the space between individual characters to make the text feel evenly distributed.
- Tracking is concerned with the spacing between words to ensure they’re not too close together.
- Leading is the practice of adjusting the space between lines of text.
Let’s look again at the text on our two climate change apps.
If you look closely, you can see that the letters in the Activist App body text are a lot closer together than the letters in the body text of the Ethical Eater app. The designer has achieved this through adjusting the kerning.
When it comes to your text, you’ll want to take some time to play around with these techniques until you’re happy with how the text looks.
3. How to choose the right font for your app
Now that we’ve familiarized ourselves with the different typography elements, let’s talk about choosing fonts for your app screen. With what feels like an infinite selection of fonts to choose from, it’s easy to feel overwhelmed. Here are a few key considerations:
Reflect on personality and tone
Before you go straight to Google fonts, think about your chosen app and intended audience. Depending on which of the two climate change apps you’ve gone for, how do you want your users to feel when they first download it? Do you want the app to feel friendly, welcoming, playful, or serious? Are you going for a bold or subtle tone? Once you’ve answered these questions and narrowed down some typefaces, it will be much easier to see which fonts work best.
Stick to one typeface
While it may be tempting, using multiple typefaces on one screen can result in a cluttered interface. As fonts from the same typeface were intended to work harmoniously together, sticking to one typeface will give your app screen a more cohesive look.
Ideally, your chosen typeface should encompass enough range to enable you to pick your primary and secondary fonts from the same family. Your primary font is used for all larger texts, such as headings (and even logos). As this will tie in with your logo, you can be more daring and creative when choosing this font. Your secondary font will comprise the body of your copy, including your buttons.
Keep it readable
Have you ever been on a website and ended up with a headache after trying to read a super fancy font? Form over function is never a good idea in the long run. No matter how pretty a font is, no user should have to concentrate just to read a sentence. When choosing a font, especially a secondary font, readability should be the number one priority. Some of the most readable serif fonts include Times New Roman and Georgia. Helvetica, Futura, and Arial are all examples of sans-serif fonts with good readability.
4. Putting text into your app screen
Now for the practical part: putting text into your app screen, and coming up with a description that you feel sums up your app perfectly. If you refer back to the original screens, you’ll see that we’ve come up with a baseline description to serve as a guide for how long yours should be—but we encourage you to play around with your own wording and copy!
Step 1: To create a new text field in Adobe XD, go to Toolbar and select Text (T). Then you can head to your Artboard and start typing! Once you start typing, you’ll see that the “Text” section of the Property Inspector becomes active. There, you’ll find various formatting options for your text. Just hover over each item to see what it’s for.
Play around with the text’s dimensions until you’re happy with where it sits on the page—making sure the text on your buttons are aligned. Remember to pay close attention to hierarchy; think about the order in which you want your users to read your text.
Step 2: Next up, it’s time to choose your fonts. If you’re feeling stuck, sites like Google fonts and 1001 fonts are great places to start. The internet is also abundant with font inspiration websites such as Typewolf, where you can find endless font recommendations and lists to spark your creativity. You can also check out these 8 typography trends to get inspired.
Once you’ve downloaded and installed your fonts, you’ll find them in the font dropdown. If you can’t find them, try quitting and reopening Adobe XD.
You can opt to keep both your title text, sub-text, and button text the same font, or choose different fonts for each. For additional guidance on font pairing, this website is a great resource. Keep playing with different fonts and font pairs until you’re happy with how it looks!
Step 3: Now, it’s time for typesetting. You can adjust the leading, tracking, and kerning by using the character spacing and line spacing options from the Text panel. Keep adjusting these until the words look well-balanced.
Summary
And that’s all for day four—well done! By now, you should be able to see how your climate change app screen is taking shape. Tomorrow, we’ll add the finishing touches to our screens with color and imagery. We’re nearly there, so keep up the great work!
Typography is a crucial part of UI design, and having a handle on the basics is a fantastic start. Already, you’re one step closer to becoming a pro.
See you tomorrow!
Daily task
Add text to your climate change app screen and choose fonts for the text. Don’t forget to add text to your buttons!
To build on your new knowledge, check out these typography guides over on the blog:
Take the quiz below to make sure you've learned all the important information—and that it really sticks!
Alana
Senior Program
Advisor
Intrigued by a career in UI design? Arrange a call with your program advisor today to find out if UI design is a good fit for you—and how you can become a UI designer from scratch with the full CareerFoundry UI Design Program.