Typographic Terms

app.uxcel.com/courses/design-foundations/basics-ii-588

August 13, 2020

Well-designed typography can keep users reading your content for longer. Poor typography
can quickly hinder readers and send them looking for information elsewhere. To create better
typographic designs, you must first understand the basic typographic terminology.

Exercise #1

When visual hierarchy is applied to text, it’s called typographic hierarchy. Typographic
hierarchy is influenced by factors like size, font, style, color, and position.

Text is generally grouped into 3 levels of importance: primary, secondary, and tertiary. Good
typographic hierarchy makes the text flow naturally and guides users through information
coherently.

Exercise #2

1/10
Headlines are used to indicate primary text such as the title of an article or blog. The goal of
any headline is to catch people’s attention and entice them to read more. To that end, they
should be short and descriptive. However, you can have fun with the way you style
headlines. They're an excellent opportunity to use display or script typefaces, bold or italic
fonts, or apply other styles and effects. Just be wary of applying too many styles to your
headlines — less is more.

Exercise #3

2/10
An eyebrow headline comes second in the typographic hierarchy and sits above the main
headline (like your eyebrow sits above your eye). These eyebrow headlines are usually
labels or keywords that help users understand the theme of the content they’re about to
read.

They are most effective when used in groups, like a list of cards. Sometimes, they are also
used on individual articles or pieces of content to denote that they’re part of an ongoing
series.

Exercise #4

3/10
The body text of a piece of content follows the headline and is the last level in the
typographic hierarchy. It’s important to keep body text legible and accessible for all users.
Make sure the font you use is easy to read and properly sized and styled for readability.

Pro Tip! Use typefaces with multiple fonts — they are more versatile for various use cases,
including body text.

Exercise #5

4/10
Flush left text is aligned along the left-hand side of the margin or gutter. It’s the most
common form of alignment since it follows the natural reading order of left-to-right languages.
In most cases, you’ll want to use flush left alignment for body copy or any other large blocks
of text.

Note that you’ll want to avoid this type of alignment in languages that read from right to left
such as Arabic and Hebrew.

Exercise #6

5/10
Centered text is aligned along an invisible central axis, in the middle of the left and right
margins or gutters. It leaves gaps on both sides of each line and draws attention to the text.

Center alignment is useful for headlines and titles, or for short blocks of text like pull quotes.
Don’t use more than three lines of center-aligned text at a time, or it becomes difficult to
read.[1]

Exercise #7

6/10
Flush right text is aligned along the right-hand side of the margin or gutter. It’s a perfect
choice for languages that read right-to-left, as it follows the natural reading order. It also
works well for short content like headlines, meta information, and numbers, especially within
tables, as it makes comparing values easier.

Exercise #8

7/10
Justified text forces each line (except the last in a paragraph) to span the full width of its
container, commonly seen in printed materials like books or legal documents. However, in
digital content, only short text blocks should be justified. Forced spacing creates inconsistent
white space between words and letters, making it hard to read and inaccessible for people
with dyslexia, low vision, and other disabilities.[2] It's generally not recommended for digital
design.

Exercise #9

Kerning is the adjustment of space between individual characters in a line of text. It's an
essential element in typography that affects readability and visual appeal. Unlike tracking,
which adjusts spacing uniformly across a range of characters, kerning focuses on the space
between two specific characters. Common letter pairs often requiring kerning include capital
'T' followed by lowercase 'o,' 'a,' or 'e' (To, Ta, Te), 'W' followed by 'a' or 'o' (Wa, Wo), 'f'
followed by 'i' or 'l' (fi, fl), and 'r' followed by 'y' or 't' (ry, rt).

Kerning matters because it:

Enhances readability: Proper kerning makes text easier to read

8/10
Designers usually apply kerning in headlines, logos, and other areas where text size is large.
Subtle changes can have a significant impact, so it's crucial to pay attention to kerning when
working on any design project involving text.[3]

Exercise #10

Tracking is the space between all the letters throughout your text. Adjusting tracking to style
titles and headlines can make them stand out, but it’s unnecessary in larger blocks of text
since most typefaces set their tracking based on body copy.

Positive tracking can create more contrast and increase legibility when done properly. You
can also use negative tracking, making letters closer together. Small adjustments can add a
stylized effect (and allow you to fit more text on a single line), but it’s easy to overdo it and
make text harder to read.

Exercise #11

Line height, also called leading or line spacing, is the vertical distance between two lines of
adjacent text. It is measured from the baseline of one line of text to the baseline of the next.
It’s usually defined in points (pt) or as a multiple of the font size (e.g., 1.5x).

Proper line height is vital to making text more readable. Too little space makes text look
crowded and cluttered. Too much space can make it hard for the reader’s eye to travel
smoothly from one line to the next.

9/10
T

From Course

UX Design Foundations

Complete this lesson and move one step closer to your course certificate

Incomplete

Earn 250 XP

10/10