Starting in …

00:00
00:01
00:02
00:03
00:04
00:05
00:06
00:07
00:08
00:09
00:10
00:11
00:12
00:13
00:14
00:15
00:16
00:17
00:18
00:19
00:20
00:21
00:22
00:23
00:24
00:25
00:26
00:27
00:28
00:29
00:30
00:31
00:32
00:33
00:34
00:35
00:36
00:37
00:38
00:39
00:40
00:41
00:42
00:43
00:44
00:45
00:46
00:47
00:48
00:49
00:50
00:51
00:52
00:53
00:54
00:55
00:56
00:57
00:58
00:59
01:00
01:01
01:02
01:03
01:04
01:05
01:06
01:07
01:08
01:09
01:10
01:11
01:12
01:13
01:14
01:15
01:16
01:17
01:18
01:19
01:20
01:21
01:22
01:23
01:24
01:25
01:26
01:27
01:28
01:29
01:30
01:31
01:32
01:33
01:34
01:35
01:36
01:37
01:38
01:39
01:40
01:41
01:42
01:43
01:44
01:45
01:46
01:47
01:48
01:49
01:50
01:51
01:52
01:53
01:54
01:55
01:56
01:57
01:58
01:59
02:00
02:01
02:02
02:03
02:04
02:05
02:06
02:07
02:08
02:09
02:10
02:11
02:12
02:13
02:14
02:15
02:16
02:17
02:18
02:19
02:20
02:21
02:22
02:23
02:24
02:25
02:26
02:27
02:28
02:29
02:30
02:31
02:32
02:33
02:34
02:35
02:36
02:37
02:38
02:39
02:40
02:41
02:42
02:43
02:44
02:45
02:46
02:47
02:48
02:49
02:50
02:51
02:52
02:53
02:54
02:55
02:56
02:57
02:58
02:59
03:00
Get Ready!
USER INTERFACE
(UI) DESIGN
Typography
WHAT IS
TYPOGRAPHY?
WHAT IS TYPOGRAPHY?
Typography is the art and technique of arranging type,
type meaning letters and characters.

Image Credit: Designspiration

WHY IS TYPOGRAPHY IMPORTANT?

Typography is absolutely everywhere. Just look at your

phone, a billboard, your coffee cup, or even the
different styles used in this blog post. Every font, letter,
and character arrangement plays a part in determining
how a message is conveyed.
WHY IS TYPOGRAPHY IMPORTANT?

Facebook tested a new font on its users called Geneva. While the
new font was only slightly thinner and lighter than the original,
Helvetica, it made a noticeable difference to some.
WHY IS TYPOGRAPHY IMPORTANT?
 HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

1. It Catches the Eye

 HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

2. Reading Becomes Easier

 HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

3. Establishes Brand
Recognition
HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

Harley-Davidson, a
motorcycle brand that
represents freedom for
wild riders, boasts bold
and strong fonts in its
logo.
HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

Chanel, a luxurious,
expensive, and elegant
brand uses a simple yet
fine black font for its
logo.
 HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

4. Adds Personality
and Feeling
 HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

5. The Most Important

Information Always
Comes First
HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?
HOW TO AVOID THE
BAD AND THE UGLY
OF TYPOGRAPHY?
HOW TO AVOID THE
BAD AND THE UGLY
OF TYPOGRAPHY?
HOW TO AVOID THE
BAD AND THE UGLY
OF TYPOGRAPHY?
HOW DOES GREAT TYPOGRAPHY MAKE ANY DESIGN
IRRESISTABLE?

If you don’t feel like giving readers a headache, here are a

few quick tips:

• Don’t try to stuff a lot of information at once

• Avoid using too many different fonts

• Keep an eye on spacing and justification

IMPORTANCE OF TYPOGRAPHY IN DESIGN

A piece of graphic design is only as good as its typography.

TYPOGRAPHY DEFINITIONS & TERMS?

Typefaces vs. Fonts

Here's how you could use these two terms in a sentence:

“Wow. The typeface you chose really pulls this design together.”

“I’ll change the font size to 12pt so it fits in the box.”

THE ANATOMY OF A TYPEFACE
Each part of a letter has its own special term, similar to
bones in a human body.
THE ANATOMY OF A TYPEFACE
 The portion of a
THE ANATOMY OF A TYPEFACE letter that
extends above the
mean line of a
font -- i.e., is taller
than the font's x-
height

The stroke that joins The curvy body of the

adjacent letters. (In letter 's' -- and only the
this case, you'll letter 's.' It gets its own
notice the 'f' and term because the spine
the 'l' smush can be almost vertical or
together to form mostly horizontal,
one character.) depending on the
typeface.

The base of a letter, similar

to the stem of a flower.
 THE ANATOMY OF A TYPEFACE A type of curve
that you see at the
top of the letter ‘f’
or the end of the
letter ‘j.'

The bar that goes

across the inside of
the letter and
connects one side to
another. (In this
case, it's the bar
inside the capital
letter 'B.') The tapered end of
letters such as ‘e’ or ‘c.'

The empty space in the middle of

letters such as ‘B’, ‘O’, or ‘A.'
THE ANATOMY OF A TYPEFACE
Spacing Terms:

• Kerning
• Tracking
• Leading
• Hierarchy
THE ANATOMY OF A TYPEFACE
Kerning

Kerning is the
modification
of the space
between two
letters.
THE ANATOMY OF A TYPEFACE
Tracking

Similar to
kerning, tracking
deals with a
modification to
letter spacing.
THE ANATOMY OF A TYPEFACE
Leading
THE ANATOMY OF A TYPEFACE
Hierarchy
TYPE CLASSIFICATIONS
Serif is much easier to read in long, printed works due to the
distinctiveness between letters.
TYPE CLASSIFICATIONS
Sans Serif used in blog posts and documents on the web because it feels
more modern and looks great even at lower screen resolutions.
TYPE CLASSIFICATIONS
Blackletter are known for its dramatic thick and thin strokes and its
elaborate swirls on the serifs.
 TYPE CLASSIFICATIONS
Script are used for elegant designs like invitations and diplomas, not
for body copy.

Formal scripts: Casual scripts:

TYPE FAMILIES
The term “type family” or
“typeface family” is used to
describe a range of designs that
are all variations of one basic
typeface.
IT’S A WRAP