CareerFoundry UI Design Short Course - Day 04

UI Design Short Course Header

Today we’re going to be looking at typography and how it’s a hugely important part of user interfaces.

What is Typography?

Typography is the art of arranging type to make sure that it is legible, readable, and appealing. Designers are crazy about typography, and some choose to specialize entirely in it. Yup, a lifetime of looking at and drawing letters. Typography plays an important role in all disciplines of design, including UI. It is, after all, one of the primary tools you’ll use to communicate with users!

Typography Basics

Good typography is the result of caring for tiny details. Type (aka text) that is not set properly will make users feel uncomfortable and can even be hard to read. By the end of this exercise, you’ll be able to spot typography mistakes everywhere you look!

Typeface Or Font: What's the Difference?

Some say that "typeface" is just a fancy word designers use when referring to fonts. Not true. There actually is a difference. The word typeface refers to a family of fonts with different weights. So, think thin, regular, medium, bold, and italic. The entire set is called a typeface. A font, on the other hand, is just one member of a large family.

Both typefaces and fonts are made up of glyphs. Glyphs are all the possible characters in a font, including letters, numbers, fleurons, and special characters.

Serif & Sans-Serif

Typefaces and fonts can fall under two categories and two only. This comes as a surprise to some, considering there are thousands of different typefaces and fonts. All those typefaces and fonts vary in style but will still be considered either a serif or sans-serif.

Serif typefaces are considered more traditional because early typefaces were serifs. They are characterized by little strokes at the ends of each character, highlighted in blue below. The word “serif” below is set in a serif font.


Establishing Hierarchy in Typography

Content is made up of different elements like headings, subheadings, body copy, dates, or quotes. As you work to set content, you’ll want to establish typographic hierarchy.

Typographic hierarchy is an organization system that establishes a visual order of importance within different content elements, making it navigable. Visual cues and styling are used to let users know where content begins or ends, to guide them through blocks of content, or to make information accessible.

In the image below, you see the same block of content. The one on the left makes use of typographic hierarchy. The one on the right does not. Which do you think is easier to read through?


Varying the size of the text you are setting is the quickest and easiest way to establish hierarchy. If you want to differentiate a heading from body copy quickly, just make the heading visibly larger.

Screen Shot 2018-01-18 at 10.23.32.png

Typography on a Screen

As a UI designer, all the type you set will live on a screen. Added to everything you’ve learned above, you’ll also want to do the following:

1) Test on Multiple Screen Sizes

Any text you set will be viewed on at least 3 different screen sizes. The size of the text you set and how it displays on each will vary. To make sure your content is clear and readable across multiple screens, test your content on:

  • A desktop screen
  • An iPad screen
  • Mobile

Design for all 3 screens. Does your content read easily across all 3? Is the text too small or too big? Testing across all 3 sizes in Sketch will reveal caveats and elements you might need to revise. Today, users expect content to display beautifully on all of their devices.

2) Avoid Placeholder Text

Many times, designers are tasked with designing without the actual copy. To be able to design without it, designers often use placeholder text, or Greek. It’s not actual Greek but in the design world, everyone pretends it is and calls it “greeking.”

**Placeholder text looks like this: **Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

There are a few generators online, like this one. You can find fun ones too, like bacon ipsum or this cat ipsum.

No matter how fun generators are, you should aim to avoid designing without actual content. Even a great guess using placeholder text will never let you design accurately.

3) Give Yourself Space

On screen, it is important that you give your content extra breathing room. As it scales up and down, whitespace will help increase readability. Busy screens, at small sizes, are nightmares. Let all your text breathe comfortably.

Whew! Hopefully this lesson has taught you how important typography is to your user interface designs. Some people devote their entire careers to it, so don’t underestimate how crucial it is.

Further Reading

If you'd like to learn more about UI design and the topics covered in today's lesson, we can recommend the following:

Typography In UI: A Beginner's Guide

Typography Inspiration From The Inspiration Grid

5 Design Challenges For The Budding Designer

This page was last updated: 11-6-2019