Chapters
Chapters

Chapters

Hide chapters

App Design Apprentice

Second Edition · Figma

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Design & Tool Fundamentals

Section 1: 3 chapters
Show chapters Hide chapters

Section II: Components & Design Systems

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Interactive prototypes & Developer Handoff

Section 3: 4 chapters
Show chapters Hide chapters

6. Typography
Written by Prateek Prasad

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you created reusable components that you could use to build your screens. By the end of the chapter, you had a fully functional main screen with a movie list and a details screen with controls to add a movie to a watchlist.

Now, it’s time to focus on the more subtle aspects of design: typography and color.

Typography and color are both essential elements of design. It might seem like they’re only cosmetic, but they have a broad impact. They not only help you establish brand cohesion and identity, but they also determine how inclusive and accessible your product is.

Though closely related, they deserve individual chapters to drive home the idea and get the basics right.

This chapter will focus on the details of typography and how to build a typographic scale. Chapter 7, “Colors” will go over color theory and how to build a color palette.

These two chapters are my favorite in the book because I get to nerd out about minor details and show you how subtle changes can have a massive influence on the perception and feel of a product. It’s one of those things that are rather tricky to get right, but very easy to get wrong.

By the end of this chapter, you’ll realize what makes your style choices “good” and how you can leverage typography to add an element of personality to your designs.

While both iOS and Android have established and mature design guidelines for building apps, you won’t use them for the typographic scale here. Deriving your design from the guidelines at this stage would be restrictive and wouldn’t give you a feel for the process from start to finish.

By building your typographic scale from scratch, you’ll get first-hand experience of why things are done the way they are, helping you understand the reasoning behind certain decisions.

Understanding Typography

In simple words, typography is the art of arranging letters in a legible, clear way that conveys intent to the reader. Typography affects visual appeal and invokes specific emotions in the reader, leaving a lasting perception about the app.

Emotion? Perception? If you wonder how these are relevant to typography, here’s an example: You need to get your wisdom teeth pulled, so you look for dentists in your area on Yelp. You come across this sign:

This looks familiar and calm, inspiring confidence. If you choose this dentist, you’ll probably have a normal procedure and be out in no time.

Now, imagine the sign looks like this, instead:

You’d probably run in the opposite direction from this clinic!

Typography is versatile enough to convey:

When done right, a good typographic scale helps establish hierarchy and uniformity across products. It helps your users immediately recognize your brand.

Before you dive into creating your typographic scale for the app, take a moment to learn some important terminology to help you better understand the explanations that follow.

Mastering Typographical Jargon

Fonts and typefaces are often confused in typography.

Weight

A typeface usually comes in three to four weights. Weight is the relative thickness of a font’s stroke. You’ve been using weights all this time, and now you know what they mean.

Letter Spacing

Letter spacing, also referred to as tracking, is the space between individual letters. Upper-case letters have loose tracking, while lower-case letters have tighter tracking.

Baseline

The baseline is an invisible line that the text sits on, as shown below. Think of it as the lines in a notebook that help you write evenly.

Line-height

Line-height is the distance between the baseline of two consecutive lines of text. Line-height is crucial for the readability of text. If you use a tight line-height, your lines will hug one another. If the line-height is loose, it will be difficult to break your text into chunks or paragraphs.

Paragraph Spacing

As the name suggests, paragraph spacing is the space between two separate blocks of text. Paragraph spacing is influenced by line-height. t’s easy to confuse loose line-height with paragraph spacing, which disrupts continuity when reading.

Building a Typographic Scale

A typographic scale is almost like a musical scale. It uses fonts that work harmoniously with each other and complement each other’s attributes.

Getting Started

Download this chapter’s materials, then open chapter-6-starter.fig in Figma. This file picks up where the last chapter left off.

Defining the Base Text Style

You’ll start with a base text style with a font size of 14. Add a text layer (T) to the frame with the text Text Style — 14. Use Roboto as the font with a Regular weight and font size of 14.

Evening Your Font Sizes

After that multiplication, you end up with types in fractional font sizes — which aren’t convenient to work with. Implementing fractional types in code is messy. It’s usually best to use type values that are even.

Text Styles

Now that you have a basic scale in place, you’ll incorporate it into your use case.

Defining Text Styles for Your Elements

The largest text in the entire app is the movie rating, so you’ll use the largest text in your scale for that element. To do that, duplicate the Text Style — 30 layer and change the text to Rating.

Supporting the Text Hierarchy

As of now, the font choices do most of the heavy lifting of creating a hierarchy. So you’ll keep that up by introducing a new text style to break the repetition in the scale.

Creating Text Styles

Select the Rating layer and, under the Text section, select the Style option. The icon has four dots. Click the + icon to add a new text style.

Applying Your Styles

Now, it’s time to apply these styles to the components in the app. Head to the Components page.

Fixing Alignment

When you look at movie-info ▸ sharp now, the alignment of the layers is off. Take a moment to fix this before proceeding.

Handling the Bottom Navigation

Next comes the bottom-nav component, where you need to change the styling of the navigation target text. Select the individual text layers and apply the Navigation Text style. You’ll need to adjust the alignment of the text with the icons after applying the styles.

Improving the Details Page

Next, head to the Cinematic App page. Before you start, check out how the movie list frame looks after applying the text styles. It’s really starting to feel like a properly thought-out app.

Finishing Your Text Styling

Next, select the synopsis layer and apply the Body Text style to it. As you can see, the text is illegible due to the relatively short line-height. You’ll modify the text style to fix this.

Key Points

  • You learned the fundamental concepts of typography and their importance in design.
  • You created a typographic scale with different fonts and font sizes to establish a visual hierarchy in the app.
  • You created text styles using your typographic scale.
  • You then applied the text styles to the components and the other parts of your design.
5. Reusable Elements & Data
7. Colors
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now