forked from marthar/webfall-2015
-
Notifications
You must be signed in to change notification settings - Fork 0
/
9.html
executable file
·512 lines (433 loc) · 12.4 KB
/
9.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Web of Typographic Love</title>
<meta name="viewport" content="width=1024">
<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="dist/coderdeck-core.min.css" type="text/css">
<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<script src='dist/jquery.min.js'></script>
<script src="dist/modernizr.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='src/jquery.min.js'>SCRIPTEND
</head>
<body>
CODE
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-plain'>
<html>
<title>test</title>
<link rel="stylesheet" href="reset.css">
<body>
CODE
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-css-playground'>
<html>
<title>test</title>
CODE
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text <p></p>
<div class='stuff'><div> with class "stuff"</div>
<div id='my-div'><div> with id "my-div"</div>
</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>
CODE
</style>
<body>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<h3>Pargraph of text <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<!-- Create any number of elements with class slide within the container -->
<article class='slide slide-subhead'>
<h1>Typography & the Web</h1>
<h3 class="center"><a href='http://acacheung.github.io/webspring-2016/9.html'>http://acacheung.github.io/webspring-2016/9.html</a></h3>
</article>
<article class="slide slide-list">
<h2>In the past we were limited to...</h2>
<ul>
<li>
<h3><a href="http://www.cssfontstack.com/">Web-safe fonts (working with system fonts like Arial, Georgia, Verdana, Times, Trebuchet)</a></h3>
</li>
</ul>
</article>
<article class="slide slide-list">
<h2>Today we have @font-face</h2>
<pre> @font-face {
src: url(Beautiful-ES.ttf);
font-family: "Beautiful";
}</pre>
</article>
<article class='slide slide-list'>
<h2>Pros</h2>
<ul>
<li>
<h3>We have more fonts to use!</h3>
</li>
<li>
<h3>Dynamic, selectable, printable, and easily edited text</h3>
</li>
<li>
<h3>Easy to implement</h3>
</li>
</ul>
</article>
<article class='slide slide-list'>
<h2>Cons</h2>
<ul>
<li>
<h3>Easy to overuse</h3>
</li>
<li>
<h3>Licensing - if it’s not open sourced and you don’t have a license - don’t use it</h3>
</li>
<li>
<h3>Can have FOUT (flash of unstyled text)</h3>
</li>
</ul>
</article>
<article class='slide slide-accent'>
<h1>Where do you find fonts?</h1>
</article>
<article class='slide slide-subhead'>
<h1>Hosted Platforms</h1>
</article>
<article class='slide slide-list'>
<h2><a href="http://typekit.com/">Typekit</a></h2>
<img src="images/typekit.jpg">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://fontdeck.com/">FontDeck</a></h2>
<img src="images/fontdeck.png">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.fonts.com/">Fonts.com</a></h2>
<img src="images/fontscom.jpg">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.typography.com/cloud/welcome/">Hoefler Cloud Typography</a></h2>
<img src="images/hoefler.jpg">
</div></div>
</article>
<article class='slide slide-subhead'>
<h1>Buying a License</h1>
</article>
<article class='slide slide-list'>
<h2><a href="http://new.myfonts.com/">MyFonts</a></h2>
<img src="images/myfonts.jpg">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.fontspring.com/">FontSpring</a></h2>
<img src="images/fontspring.png">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.webtype.com/">Webtype</a></h2>
<img src="images/webtype.jpg">
</div></div>
</article>
<article class='slide slide-subhead'>
<h1>Free Fonts</h1>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.google.com/webfonts#ChoosePlace:select">Google Web Fonts</a></h2>
<img src="images/googlefont.png">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.fontsquirrel.com/">Font Squirrel</a></h2>
<img src="images/fontsquirrel.jpg">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.theleagueofmoveabletype.com/">The League of Moveable Type</a></h2>
<img src="images/leaguetype.jpg">
</div></div>
</article>
<article class='slide slide-list'>
<h2>Free Problems</h2>
<ul>
<li>
<h3>Quality not guaranteed</h3>
</li>
<li>
<h3>Unknown rendering (hinting)</h3>
</li>
<li>
<h3>Poorly drawn</h3>
</li>
<li>
<h3>Poorly kerned</h3>
</li>
</ul>
</article>
<article class='slide slide-list'>
<h2><br/>Complete Sets<br/></h2>
<img src='images/free-font.png'/>
</article>
<article class='slide slide-list'>
<h2><br/>Font Hinting<br/></h2>
<img src='images/hinting.png'/>
<a href="http://en.wikipedia.org/wiki/Font_hinting">via Wikipedia</a>
</article>
<article class='slide slide-list'>
<h2><br/>Kerning<br/></h2>
<img src='images/kerning.png'/>
</article>
<article class='slide slide-list'>
<h2>Licensing</h2>
<ul>
<li class="slide">
<h3>Make sure you own the license</h3>
</li>
<li class="slide">
<h3>Read the End User License Agreement (EULA)</h3>
</li>
<li class="slide">
<h3>Desktop licenses are not the same as web</h3>
</li>
<li class="slide">
<h3>Avoid liability issues</h3>
</li>
</ul>
</article>
<article class='slide slide-list'>
<h2>Check your 1, I, and l</h2>
<p>Does the number one, capital “i”, and lowercase “L” need to be distinct?</p>
<img src='images/ls.png'/>
</article>
<article class='slide slide-list'>
<h2><br/>Readability<br/></h2>
<p>At small sizes fonts with larger variation in weights will be harder to read.</p>
<img src='images/readability.png'/>
</article>
<article class='slide slide-list'>
<h2><br/>Headline vs Text<br/></h2>
<img src='images/headline.png'/>
</article>
<article class='slide slide-list'>
<h2><br/>Appropriate<br/></h2>
<p>Always honor your content and audience first.
Choose fonts that are relevant to your subject before choosing what’s new and trendy.</p>
<img src='images/lobster.png'/>
</article>
<article style='background-image:url(images/nytimes.png);' class='slide slide-background'>
</article>
<article class='slide slide-subhead'>
<a href="http://typecast.com/blog/a-more-modern-scale-for-web-typography"><h1>A Scale for Web Type</h1></a>
</article>
<article class='slide slide-subhead'>
<h1>You need to decide what’s important</h1>
</article>
<article class='slide slide-list'>
<h2><a href="http://yvettesbridalformal.com/">yvettesbridalformal.com</a></h2>
<img src="images/yvettes.png">
</div></div>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.creativemornings.com/">creativemornings.com</a></h2>
<img src="images/cmornings.png">
</div></div>
</article>
<article class='slide slide-subhead'>
<img src='images/cmorning-close.png'/>
<p>big headline, med body, small detail, red box for emphasis, red type for emphasis</p>
</article>
<article class='slide slide-list'>
<h2>Size</h2>
<h3>16px is the new minimum body text size</h3>
</article>
<article class='slide slide-list'>
<h2>Space</h2>
<ul>
<li>
<h3>Keep line length readable, not too long or short.</h3>
</li>
<li>
<h3>Adjust the line-height to give more</h3>
</li>
<li>
<h3>White space</h3>
</li>
</ul>
</article>
<article class='slide slide-list'>
<h2>How Many Characters Per Line?</h2>
<h3>According to Robert Bringhurst 45 to 75.<br/>
Recent web studies show that 66 might be the “web ideal”</h3>
</article>
<article class='slide slide-list'>
<h2>Line Height</h2>
<img src='images/line-height.png'/>
</article>
<article class='slide slide-list'>
<h2>Letter Spacing</h2>
<img src='images/letter-spacing.png'/>
</article>
<article class='slide slide-list'>
<h2><a href="http://smartquotesforsmartpeople.com/">Be Smart not Dumb</a></h2>
<h3 class="big"><em>'dumb double quotes'<br/>
“smart double quotes”</em>
</h3>
<h3 class="big"><em>'dumb single quotes'<br/>
‘smart single quotes’</em>
</h3>
</article>
<article class='slide slide-subhead'>
<h1><a href="http://www.jimgodfreydesign.com/typeSins.pdf">Thirty-Four Typographic Sins by Jim Godfrey</a></h1>
</article>
<article class='slide slide-accent'>
<h1>Getting your fonts into your site</h1>
</article>
<article class='slide slide-list'>
<h2>@font-face</h2>
<ul>
<li>
<h3>Adds “font-family” fonts you can use with CSS</h3>
</li>
<li>
<h3>Use a generator like fontsquirrel.com
</h3>
</li>
</ul>
</article>
<article class='slide slide-list'>
<h2><a href="http://www.font-face.com/#green_content">How to use</a></h2>
<pre>
@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}</pre>
<p><em>Don’t write this - cut and paste from your generator</em></p>
</article>
<article class='slide slide-list'>
<h2>Link Code</h2>
<pre><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre>
<p><em><a href="https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans">Example from Google Fonts for Open Sans</a></em></p>
</article>
<article class='slide slide-list'>
<h2>Your CSS</h2>
<pre>h2 { font-family: "Open Sans", sans-serif; }</pre>
<p><em>Style as Usual</em></p>
</article>
<article class='slide slide-list'>
<h2>In the Wild</h2>
<ul>
<li><a href="http://www.typewolf.com/">http://www.typewolf.com/</a></li>
<li><a href="http://www.typeandgrids.com/blog">http://www.typeandgrids.com/blog/</a></li>
<li><a href="http://blog.typekit.com/category/using-type/">http://blog.typekit.com/category/using-type/</a></li>
</ul>
</article>
<article class='slide slide-list'>
<h2><a href="http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects">Font Effect Demos</a></h2>
<img src="images/spooner.png">
</div></div>
</article>
<article class='slide slide-list'>
<h2>More Resources</h2>
<ul>
<li>
<h3>lettering.js</h3>
</li>
<li>
<h3>typebutter.com</h3>
</li>
<li>
<h3>fittextjs.com</h3>
</li>
<li>
<h3>http://kerningjs.com/</h3>
</li>
<li>
<h3>http://www.kernjs.com/</h3>
</li>
<li>
<h3>ifontyou.com</h3>
</li>
<li>
<h3>typedia.com</h3>
</li>
<li>
<h3>ilovetype.com</h3>
</li>
</ul>
</article>
<article class='slide slide-list'>
<h2>Exercise: Implement Dobot Typekit fonts</h2>
<p>If you don't have Typekit, use Roboto Slab on Google Fonts</p>
</article>
<article class='slide slide-list'>
<h1>Presentations</h1>
</article>
<article class='slide slide-list'>
<h1>Review and working class</h1>
</article>
<article class='slide slide-homework'>
<h2>Homework</h2>
<ul>
<li>
<h3><a href='http://www.alistapart.com/articles/on-web-typography/'>On Web Typography by Jason Santa Maria</a>
</h3>
</li>
<li>
<h3><a href='http://www.jordanm.co.uk/post/93444774181/how-i-test-type-and-layout'>How I Test Type and Layout</a>
</h3>
</li>
<li>
<h3>** FINAL PROJECT - Write all HTML for your final site, have all pages connected, ALL IMAGES UPLOADED, HTML validates, begin CSS **</h3>
</li>
<li>
<h3>If you have not presented your discussion topic, you will present next class.</h3>
</li>
<li>
<h3>What you will be graded on: <br>
Attendance (5%)<br>
Intro Homework (5%)<br>
Blog post (10%)<br>
Blog post discussion (10%)<br>
Dobot HTML (10%)<br>
Dobot CSS (10%)<br>
Dobot Responsive (Extra Credit)<br>
Poster League (Extra Credit)<br>
Final Project (50%)</h3>
</li>
</ul>
</ul>
</article>
<script src='dist/coderdeck.min.js'></script>
<!-- Prettify -->
<script src="src/prettify.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>