Better Products Through Typography

Slide 1

Slide 1 text

typo graphy r ctic l ri er for eo le ki thi s

Slide 2

Slide 2 text

djangoproject.com skillsapp.com

Slide 3

Slide 3 text

http://commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Daniel Kahneman The general principle is that anything you can do to reduce cognitive strain will help you [be persuasive], so you should ﬁrst maximize legibility.

Slide 6

Slide 6 text

abcdefghijklmnopqrstuvwxyz Georgia abcdefghijklmnopqrstuvwxyz Helvetica abcdefghijklmnopqrstuvwxyz Trebuchet abcdefghijklmnopqrstuvwxyz Comic Sans abcdefghijklmnopqrstuvwxyz Baskerville

Slide 7

Slide 7 text

1.5% http://cl.ly/0D2R0b30412R Baskerville had a “agreement” advantage

Slide 8

Slide 8 text

682 http://cl.ly/0D2R0b30412R with a sample size of 45,524 that’s more people who are convinced

Slide 9

Slide 9 text

SCIENCE it works, bitches http://xkcd.com/54/

Slide 10

Slide 10 text

the art and science of presenting textual information

Slide 11

Slide 11 text

http://flic.kr/p/6M3YRd

Slide 12

Slide 12 text

Philip Johnson All architecture is shelter, all great architecture is the design of space that contains, cuddles, exalts, or stimulates the persons in that space.

Slide 13

Slide 13 text

Oliver Reichenstein, iA Web Design is 95% Typography bit.ly/wd95type 100% Easy-to-Read Standard bit.ly/100e2r

Slide 14

Slide 14 text

for Legibility for Beauty

Slide 15

Slide 15 text

for Legibility for Beauty for Practicality

Slide 16

Slide 16 text

http://flic.kr/p/72sx9H

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

http://flic.kr/p/aqdKUb

Slide 19

Slide 19 text

& micro macro

Slide 20

Slide 20 text

& micro macro

Slide 21

Slide 21 text

phi, the golden ratio 1.618 : 1 φ

Slide 22

Slide 22 text

A + B A B

Slide 23

Slide 23 text

A + B A B A is to AS is to 1 1.618 1 1.618

Slide 24

Slide 24 text

http://flic.kr/p/4EqibM

Slide 25

Slide 25 text

2 2 3

Slide 26

Slide 26 text

2 2 3

Slide 27

Slide 27 text

2 2 3

Slide 28

Slide 28 text

2 2 3

Slide 29

Slide 29 text

http://retinart.net/graphic-design/secret-law-of-page-harmony/

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

http://flic.kr/p/2pgYeH GUT ENB ERG h 1436 A.D. g

Slide 32

Slide 32 text

http://flic.kr/p/eT6WG

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

2 3 2

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

size measure leading the three primary factors of legibility are

Slide 37

Slide 37 text

size measure leading Aa The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost The path of the righteous man is beset on all sides by t selfish and the tyranny of evil men. Blessed is he who, charity and good will, shepherds the weak through the for he is truly his brother's keeper and the finder of los

Slide 38

Slide 38 text

size

Slide 39

Slide 39 text

M 1 em

Slide 40

Slide 40 text

the typographical scale a a a a a a a a a a a a a a a a a 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 96 +1 +2 +3 +12

Slide 41

Slide 41 text

M M The quick brown fox jumps over a lazy dog. The quick brown fox jumps over a lazy dog. TIMES GEORGIA

Slide 42

Slide 42 text

http://www.wilsonminer.com/posts/2008/oct/20/relative-

Slide 43

Slide 43 text

measure

Slide 44

Slide 44 text

GOOD BAD Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.

Slide 45

Slide 45 text

Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing. Saccade (Eye Movement)

Slide 46

Slide 46 text

PRO TIPS Stick to a measure of about 66 characters (~33em)

Slide 47

Slide 47 text

http://flic.kr/p/6K4YWb

Slide 48

Slide 48 text

leading

Slide 49

Slide 49 text

Slide 50

Slide 50 text

PRO TIPS Body text should have about 1.3–1.6em of leading

Slide 51

Slide 51 text

PRO TIPS longer lines need more leading

Slide 52

Slide 52 text

WAVE

Slide 53

Slide 53 text

WAVE WAVE WAVE WAVE

Slide 54

Slide 54 text

WAVE WAVE WAVE WAVE

Slide 55

Slide 55 text

PRO TIPS really large text usually needs to be hand-kerned to look good

Slide 56

Slide 56 text

& micro macro

Slide 57

Slide 57 text

http://flic.kr/p/5vwCoW

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Serif versus Sans-Serif

Slide 63

Slide 63 text

q 2 A q 2 A serif sans-serif

Slide 64

Slide 64 text

serif sans-serif q 2 A q 2 A

Slide 65

Slide 65 text

G R A G R A G R A

Slide 66

Slide 66 text

but what about fonts?

Slide 67

Slide 67 text

The path of the righteous man is beset on all sides by the iniquities of the selﬁsh and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the ﬁnder of lost children. The path of the righteous man is beset on all sides by the iniquities of the sel sh and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the nder of lost children.

Slide 68

Slide 68 text

GOOD BAD Jackdaws Love My Quartz Sphinx The path of the righteous man is beset on all sides by the iniquities of the selﬁsh and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the ﬁnder of lost children. by Stiv Hamburger Jackdaws Love My Quartz Sphinx The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger

Slide 69

Slide 69 text

GOOD BAD Jackdaws Love My Quartz Sphinx The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger J ckd ws Love My Qu rtz S hi x The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger

Slide 70

Slide 70 text

PRO TIPS choose at most one or two typefaces

Slide 71

Slide 71 text

PRO TIPS pair for contrast too similar isn’t good

Slide 72

Slide 72 text

GOOD BAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.

Slide 73

Slide 73 text

PRO TIPS use a serif for body or “running” text

Slide 74

Slide 74 text

PRO TIPS use a sans-serif for titles or “display” text

Slide 75

Slide 75 text

PRO TIPS mostly a matter of convention and expectations http://www.useit.com/alertbox/web-typography.html http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/