Essentials of Digital Media

Typography

The art of arranging text so people actually want to read it.

COMM 101 Essentials of Digital Media
A g
The basics

What typography is

The art & science of arranging text so it reads clearly — and looks like it means what it says.

Readable
The eye moves through it without effort.
Appealing
It looks intentional and inviting.
Appropriate
It fits the message and the audience.
Speaking the language

Typeface, font & character

Typeface
Aa
The design of the letters — e.g. Georgia.
Font
Aa Aa
A specific style & size within it — Bold Italic, 16px.
Character
g
A single letter, number or symbol.
Type has a voice

Font personality

The same word, four voices. Choosing a font is a lot like choosing a tone of voice.

Celebrate
Elegant — a wedding photographer
Celebrate
Playful — a kids' party
Celebrate
Trusted — a law firm
Celebrate
Clean — a medical office
The two workhorses

Serif & sans serif

Ag Serif
Little strokes — serifs — finish each letter.
Feels: traditional · reliable · timeless
Use for: books · newspapers · law firms
Ag Sans serif
No feet — “sans” means without.
Feels: modern · clean · legible
Use for: websites · apps · road signs
Specialists

Four more families

HEADLINE
DISPLAYLogos · titles only
Invitation
SCRIPTWeddings · luxury
hey there!
HANDWRITTENCasual · friendly
print()
MONOSPACECode · technical
How big is the text?

Measuring type

pt36 pt
Points
Aa
Print standard: 72 points = 1 inch.
px48 px
Pixels
Aa
Screen unit: 16 pixels is typical body text.
em2.00 em
em & rem
Aa
Relative unit: 1 em equals its parent’s type size.
Thick or thin

Type weight

Thinlarge, elegant headlines
Regularbody paragraphs
Boldheadlines · buttons · emphasis
TRY IT
The quick fox jumps.
Large text can go thin. Small text wants weight to stay readable.
The invisible lines

Anatomy of a letter

Ascender
Cap height
x-height
Baseline
Descender
Hbxp
Tall x-height
Reads as modern & friendly.
Big cap-to-baseline gap
Reads as elegant & luxurious.
Designers use these landmarks to size and align text precisely.
Leading · line-height

Line spacing

The space between lines of text — give it room to breathe.

TOO TIGHT
Typography is the craft of arranging text so it is easy to read, pleasant to look at, and right for the message it carries.
JUST RIGHT
Typography is the craft of arranging text so it is easy to read, pleasant to look at, and right for the message it carries.
Tracking · drag to try it

Letter spacing

RIVER HAWKS
TIGHT LOOSE {{ trackLabel }}
The finishing touch

Kerning

Adjusting the gap between two specific letters. Some pairs slump apart until you nudge them together.

BEFORE — AWKWARD GAPS
AV WA
AFTER — KERNED
AV WA
Readable for everyone

Contrast & accessibility

TRY IT — ADJUST THE TEXT
Can everyone read this?
Can everyone read this?
Can everyone read this?
7.00:1
StrongerWeaker
Excellent contrast — passes AAA for normal text.
7:1
A contrast ratio near 7:1 gives excellent readability — the target for accessible text.
A system, not guesswork

Hierarchy & systems

Heading 1page title
Heading 2section
Heading 3subsection
Body textparagraphs
LABELsmall supporting info
EVERY ELEMENT HAS A JOB
Headings — titles
Paragraphs — reading
Buttons — actions
Labels — small info
Carry these with you

Principles to remember

01
Choose with purpose
Fonts carry personality — match it to the message.
02
Readability first
Clear beats clever, every time.
03
Use contrast
Differ by size, weight & spacing.
04
Build a system
Consistency over styling each piece alone.
05
Design for everyone
Accessible type is good type.
“When in doubt, make it easier to read.”
The takeaway

Typography is more than choosing a font.

It’s every decision working together.

Typeface Size Weight Line spacing Letter spacing Kerning Contrast Hierarchy
COMM 101 Essentials of Digital Media