View
861
Download
0
Category
Preview:
DESCRIPTION
Citation preview
Server tuning with terminal
Just my
Typeholy crap you guys you’re gonna
learn so much about typography today
Introductions9:00–9:15
Introductions9:00–9:15
Wh!t is t"po#r!ph" $or?9:15–10:00
Introductions9:00–9:15
Wh!t is t"po#r!ph" $or?9:15–10:00
T"po#r!phic person!lit": choosin# !nd p!irin# t"pe$!ces
10:00-11:00
Introductions9:00–9:15
Wh!t is t"po#r!ph" $or?9:15–10:00
T"po#r!phic person!lit": choosin# !nd p!irin# t"pe$!ces
10:00-11:00
11:00–11:15 Bre!k
Introductions9:00–9:15
Wh!t is t"po#r!ph" $or?9:15–10:00
T"po#r!phic person!lit": choosin# !nd p!irin# t"pe$!ces
10:00-11:00
11:00–11:15 Bre!k
11:15–11:45 Open critique
Introductions9:00–9:15
Wh!t is t"po#r!ph" $or?9:15–10:00
T"po#r!phic person!lit": choosin# !nd p!irin# t"pe$!ces
10:00-11:00
11:00–11:15 Bre!k
11:15–11:45 Open critique
11:45–12:30 Underst!ndin# web t"po#r!ph"
Introductions9:00–9:15
Wh!t is t"po#r!ph" $or?9:15–10:00
T"po#r!phic person!lit": choosin# !nd p!irin# t"pe$!ces
10:00-11:00
11:00–11:15 Bre!k
11:15–11:45 Open critique
11:45–12:30 Underst!ndin# web t"po#r!ph"12:30–13:30 Lunch
13:30-13:45 A rundown o$ web$ont services
13:30-13:45 A rundown o$ web$ont services13:45:–15:00 Implementin# web$onts (M"Fonts,
Goo#le Web Fonts, T"pekit)
13:30-13:45 A rundown o$ web$ont services13:45:–15:00 Implementin# web$onts (M"Fonts,
Goo#le Web Fonts, T"pekit)
15:00–15:15 Co$$ee Bre!k
13:30-13:45 A rundown o$ web$ont services13:45:–15:00 Implementin# web$onts (M"Fonts,
Goo#le Web Fonts, T"pekit)
15:00–15:15 Co$$ee Bre!k
15:15–16:00 An exercise: web$onts in !ction
13:30-13:45 A rundown o$ web$ont services13:45:–15:00 Implementin# web$onts (M"Fonts,
Goo#le Web Fonts, T"pekit)
15:00–15:15 Co$$ee Bre!k
15:15–16:00 An exercise: web$onts in !ction
16:00–16:50 T"pec!st, letterin#.js, other tools, !nd open time
13:30-13:45 A rundown o$ web$ont services13:45:–15:00 Implementin# web$onts (M"Fonts,
Goo#le Web Fonts, T"pekit)
15:00–15:15 Co$$ee Bre!k
15:15–16:00 An exercise: web$onts in !ction
16:00–16:50 T"pec!st, letterin#.js, other tools, !nd open time
16:50–17:00 Wr!p-up, hu#s, !nd $istbumps
IntroductionsWho !ou "re, where !ou work, wh"t !ou do,
where !ou’re #rom, wh"t !ou w"nt to $et out o# tod"!
What is typography for?
T!po$r"ph! exists to honor content.
T!po$r"ph! must o#ten dr"w "ttention to itsel# be#ore it will be re"d. Yet in order to be re"d, it must relinquish the "ttention it h"s dr"wn.
What do you know about
typography on the web?
Underst"ndin$ letters
Lo$os
Guidelines #or letters
The tops o# letters "re e"sier to re"d th"n the bottoms.
Mixed c"se is e"sier to re"d th"n "ll c"ps.
looking at letterforms differently
An exercise
dm!ll.me/ZnQ#QMdm!ll.me/1!UU"9j
Letter
Letter
R"lew"! He"v!, 300pt
Letter
R"lew"! He"v!, 300pt
Lor" It"lic, 24pt
Drawing type
An exercise
typographic personality
Stereot!pes
Stereot!pe-o$r"ph!
Partner up
An exercise
Ch"r"cter ch"r"cter
Historic"l Context
Foundr! Stereot!pe-o$r"ph!
T!pe-inspired inter#"ces
Critiquin$ T!pe
Open critique
breaktime
webfonts
The di##erence between desktop #onts "nd web#onts
Choosing webfonts
Hintin$
Comp"rin$ web#onts services b! on-screen renderin$
Comp"rin$ renderin$ "cross browsers
implementing webfonts
Web-s"#e #onts vs. web#onts
SERIF
Geor$i", Times New Rom"n, Book Antiqu", P"l"tino
SANS-SERIF
Ari"l, Comic S"ns, Genev", Helvetic", Imp"ct, Lucid" S"ns, T"hom", Trebuchet MS, Verd"n"
Web-safe
h1 {font-family: Georgia, ‘Times New Roman’, serif;
}
h1 {font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
@font-face { font-family: 'Sentinel'; src: url('sentinel.ttf');}
h1 {font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
@font-face { font-family: 'Sentinel'; src: url('sentinel.eot?#iefix') format('embedded-opentype'), url('sentinel.woff') format('woff'), url('sentinel.ttf') format('truetype'), url('sentinel.svg#svgFontName') format('svg');}
h1 {font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
Movie titles
An exercise
Thanks!B u
@d"nielm"ll d"n@d"nielm"ll.com
Recommended