ADOBE CREATIVE CAREERS CURRICULUM

Principles of Typography

Essential Principles Series

Principles of typography

Use typography to guide readers through the levels of a document. For example, use different headings by
changing font family, font type, font size, font color.

Images from: https://99designs.co.uk/

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Legibility

The main principle of good typography is legibility, i.e., making

sure the audience can read and understand your text.

Legibility is a combination of factors:

● Font family and concordance

● Size and spacing (letter, word, and line)
● Alignment creates relationships between different kinds
of information, ensures legibility, and establishes
hierarchy.
● Use fonts that complement each other, as well as italics,
bold, tracking, or color to create contrast.
● Uniformity: Repeating familiar elements to focus your
audience’s attention.
© 2022 Adobe. All Rights Reserved.
Adobe Creative Careers Curriculum
What do these fonts “say?”

This says a lot about me (Gill Sans MT)

This says a lot about me (Courier New)

This says a lot about me (Impact)

This says a lot about me (Comic Sans MS)

This says a lot about me (Lato Heavy)

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font families | Serifs/sans serifs

Serifs are the short lines at the ends of characters. Fonts are either
serif (Figure 1) or sans serif—without serifs (Figure 2).
When designing headings, you can choose either serif or sans serif
font families. For body text, consider:
● Figure 1 Serif font
Serif fonts can be easier to read in print.
● Sans serif fonts can be easier to read online.
Serif fonts can be easier to read when printed because serifs help
readers make clearer distinctions between letters.

Figure 2 Sans serif font

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font families

Each font family can be said to have a different “personality”,

and you can use different font families to evoke tone and
mood.

Which of these fonts (right) would you choose for:

● An advertisement for a school?

● An advertisement for a financial firm?

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font families

Serif/Sans Serif Online Print

Stroke
Serifs create Appears blurry Helps the reader
distinctions between follow text easily
characters (uppercase
‘I’ and lowercase ‘l’) Line

Serif fonts have Helps move readers’ Helps move readers’

contrasting strokes eye character to eye character to
and lines character character

Sans serif fonts have Helps readers easily Makes words in a

uniform strokes read text sentence hard to
throughout follow
Stroke

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font choice

● Fontjoy - Generate font pairings in one click

● Wordmark - Helps you choose fonts

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font size

Fonts are sized in points—there are 72 points to an inch. Your choice of

font size depends on the use of the text and, in particular, whether it is
body text or a heading.

Body text is anything that’s longer than a line or two. Body text needs to
be very readable. You may want to consider sizing body text according to
audience.

For headings, use a size at least two points larger than the body.

Generally, you want contrast between the heading and body text to help
create hierarchy between levels of information.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font spacing

Spacing between words needs to be consistent to promote legibility. Too much variation can lead to eyestrain.

If letters, words, or lines are too close together, If letters, words, or lines are too close together,
readers have a hard time because text blocks tend to readers have a hard time because text blocks tend to
look too dark. look too dark.

If letters, words, or lines are too far apart, blocks of

text tend to look too light, causing readers to lose a If letters, words, or lines are too far apart, blocks tend
sense of continuity. to look too light.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font size and spacing

This section explains concepts used in typography, including:

● Font sizing
● Leading
● Kerning
● Tracking
● Baseline shift

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Font size and spacing

Legibility of body text varies for different audiences:

● Younger audiences may be able to read fonts sized at 8 or 9 points.

● Older audiences may be able to read font sizes around 10 points or
above.
● Font sizes above 14 points break down the continuity of the text,
making text appear too gray.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Leading

Leading describes the space between lines of text.

Too little leading can make a block of text appear too dark and
difficult to read.

Too much leading can make text appear too light and similarly A 14-point font with 16.8-point leading.
difficult to read.

For body copy, many designers use a leading of at least the font
size plus 2 points.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Kerning and tracking

Summary:

● Kerning and tracking both address the spacing between letters.

● Kerning refers to the space between any two letters in a line.
● Tracking refers to the space between ALL of the letters in a line.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Kerning

In the past, computer-generated text left gaps between letter pairs

that naturally create spacing. These letter pairs include: Pa, Ta, We,
and Yo.

Modern page layout applications (including Adobe InDesign) often

correct kerning for you.
Play the KernType Game to learn more.
● Metrical kerning automatically adjusts the space between a set
of letter pairs defined for each font.
● Optical kerning automatically adjusts the space between letters
based on their shapes.
● Manual kerning is where the designer changes the kerning
based on their judgment and preference.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Tracking

Tracking refers to the space between characters across a line of text.

Adjusting tracking produces letters that are spaced further apart.

● Positive tracking increases the space between letters.

● Negative tracking decreases the space between letters.

Tracking is measured in 1/1000 em. Em is relative to the current type

size. For example, in a 12-point font, 1 em equals 12 points.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Alignment

Left-aligned text is most legible, because spacing between words is

uniform.

Justified text is also legible, though less so because it tends to create

uneven spaces between words.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Alignment

Center-aligned and right-aligned text is generally harder to read,

because your readers’ eyes are used to following text from left to
right.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Baseline

A font’s baseline is the lowest point of letters except those that

extend below the baseline, such as “y” and “g.”

You can use baseline shift to adjust the baseline for one or more Examples of baseline shift applied.
characters, e.g., to create an effect or format special symbols, such as
the trademark symbol.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Contrast and uniformity

To maintain overall uniformity, limit the number of different font families per page to one or two.

Use the same font for headings and body text to produce a uniform look. This is known as concordance.

● Using the same font family throughout creates uniformity, but may make documents seem “flat” or
uninteresting.
● You can add interest by contrasting the display type and body type.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Hierarchy

Many documents are divided into hierarchical sections. Hierarchy

helps your audience distinguish between levels of information, such
as headings versus body text.

● Use typography to guide readers through the levels of your

document.
● Use different headings by changing font family, font type, font
size, font color.
● To promote uniformity and help your audiences navigate, keep
typographic choices consistent for each subsection throughout
the document.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
Key terminology

Typography: Typography is the art and technique of arranging type to make written language legible,
readable, and appealing when displayed.

Typeface: A typeface is the design of lettering that can include variations in size, weight, slope, width, etc.
The collective name of a family of related fonts

Font: A set of glyphs within a typeface, e.g., a 14 point Helvetica Bold is a different font than a 14 point
Helvetica Light.

Glyph: A symbol within an agreed set of symbols, intended to represent a readable character.

© 2022 Adobe. All Rights Reserved.

Adobe Creative Careers Curriculum
This activity is part of Adobe’s free “Adobe Creative Careers Curriculum'' series. Adobe InDesign and other Adobe Creative Cloud apps require an account and login.
Keep in mind that children must be age 13 or older to create their own Adobe ID. Educators can find more teaching materials for using Adobe software in the
classroom on the Adobe Education Exchange.

© 2022 Adobe. All rights reserved. Adobe, the Adobe logo, Creative Cloud, and InDesign are either registered trademarks or trademarks of Adobe in the United
States and/or other countries. All other trademarks are the property of their respective owners.

This work is licensed under a Creative Commons Attribution-Noncommercial-ShareAlike 3.0 Unported License.