Typography and Its Importance in Information Hierarchy

5/15/2015

1

5/15/2015

2

Business

Analysis

Usability

Engineering

User

Experience

Planning

Content

Publishing

Information

Architecture

Interaction

Design

Visual &

Information

Design

Product

definitions,

mission and

Vision

Perform

primary

Research

Create UX

Brief, establish

personas, set

strategy, & do

more research

Collect

content

Establishing

governance

Organize

content and

Navigation

Create

wireframes,

design

interaction

and patterns

Build

graphics,

layout, and

style guide

Interaction

Design

Visual &

Information

Design

Create

wireframes,

interactions,

and patterns

Build

graphics,

layout, and

style guide

5/15/2015

3

5/15/2015

4

5/15/2015

5

5/15/2015

6

5/15/2015

7

5/15/2015

8

Establishing a typographic style aids in branding too!

5/15/2015

9

5/15/2015

10

5/15/2015

11

▪

▪

▪

▪

5/15/2015

12

▪

▪

▪

▪

▪

5/15/2015

13

▪

▪

TEST YOUR USERS!

Words per minute

Correct

answers

Mean Std. dev. Mean Std. dev.

Sans serif 207.9 Font 5.35 2.20

Serif 206.2 48.5 5.07 2.20

5/15/2015

14

▪

Serif

40%

Sans Serif

60%

5/15/2015

15

▪

▪

▪

▪

▪ Tests with e-readers noted a significant increase in search and speed with 12 pt text

▪ Best overall legibility was achieved by Times New Roman and Arial typefaces

▪

5/15/2015

16

5/15/2015

17

5/15/2015

18

▪

▪

▪

5/15/2015

19

5/15/2015

20

5/15/2015

21

Jan Tschichold

5/15/2015

22

5/15/2015

23

5/15/2015

24

5/15/2015

25

variation

grey to the user.

5/15/2015

26

5/15/2015

27

This is a longer subhead

This is a subhead

This subhead is also longer

This is a subhead

5/15/2015

28

5/15/2015

29

5/15/2015

30

“Letters should never be forced into a preconceived framework, for instance a square.”

Lazio Moholy-Nagy

▪

5/15/2015

31

5/15/2015

32

5/15/2015

33

5/15/2015

34

5/15/2015

35

5/15/2015

36

This headline is here because of the rule of thirds

5/15/2015

37

▪

5/15/2015

38

5/15/2015

39

5/15/2015

40

5/15/2015

41

5/15/2015

42

5/15/2015

43

5/15/2015

44

5/15/2015

45

5/15/2015

46

5/15/2015

47

5/15/2015

48

5/15/2015

49

5/15/2015

50

5/15/2015

51

5/15/2015

52

5/15/2015

53

[email protected]