Notes for CSS - Typography By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 http://www.granneman.com ## Slide 5 In particular, Jan Tschichold… * directed the visual identity of Penguin Books for 10 years following World War II designed the Sabon typeface: https://en.wikipedia.org/wiki/Sabon (the typeface used on the slide is Crimson Text , a close approximation of Sabon) For more, see https://en.wikipedia.org/wiki/Jan_Tschichold ## Slide 6 http://favstar.fm/users/kanyewest/status/21409201572 ## Slide 7 https://ia.net/know-how/the-web-is-all-about-typography-period ## Slide 8 http://webdesign.tutsplus.com/articles/web-design-basix-why-typography-matters--webdesign-1937 ## Slide 9 Futura • Comic Sans MS • Lucida Handwriting • Perpetua Titling MT ## Slide 10 Franklin Caslon, based on works printed by Benjamin Franklin c. 1750 ## Slide 15 Chinese, Arabic, French, Russian, Hebrew Linguists use /ʃ/ to represent the phoneme, while represents the grapheme https://en.wikipedia.org/wiki/Grapheme https://en.wikipedia.org/wiki/Phoneme https://en.wikipedia.org/wiki/Character_(computing) ## Slide 26 https://en.wikipedia.org/wiki/Noto_fonts https://www.fonts.com/font/monotype-font-bureau/georgia-pro/regular https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 27 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 28 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 29 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 30 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 31 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 36 http://fontfeed.com/archives/font-or-typeface/ ## Slide 39 http://www.typophile.com/node/16843 https://en.wikipedia.org/wiki/Typeface https://en.wikipedia.org/wiki/Font ## Slide 40 https://www.marksimonson.com/fonts/view/proxima-nova ## Slide 41 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 42 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 43 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 44 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 45 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 47 Georgia Pro • Helvetica Neue • Courier • Menlo ## Slide 48 http://commons.wikimedia.org/wiki/File:Serif_and_sans-serif_02.svg http://en.wikipedia.org/wiki/File:Serif_and_sans-serif_03.svg ## Slide 55 http://en.wikipedia.org/wiki/File:Typography_Line_Terms.svg ## Slide 56 Note the overshoot with the e; for more, see http://www.slate.com/blogs/the_eye/2015/04/09/tobias_frere_jones_explains_the_optical_illusion_that_tricks_our_brains.html http://en.wikipedia.org/wiki/File:Typoghaphia.svg http://en.wikipedia.org/wiki/Typeface_anatomy ## Slide 57 Note the overshoot with the e; for more, see http://www.slate.com/blogs/the_eye/2015/04/09/tobias_frere_jones_explains_the_optical_illusion_that_tricks_our_brains.html http://en.wikipedia.org/wiki/File:Typoghaphia.svg http://en.wikipedia.org/wiki/Typeface_anatomy ## Slide 60 Width of 1100 ## Slide 61 40pt ## Slide 70 https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 71 As to why you should avoid em or %, see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 75 Multiplied sizes by 4 so they can be seen! ## Slide 76 Multiplied sizes by 4 so they can be seen! ## Slide 77 http://type-scale.com ## Slide 78 http://type-scale.com ## Slide 79 http://type-scale.com ## Slide 87 Arial is an inferior knock-off of Helvetica Verdana is a great screen font http://en.wikipedia.org/wiki/File:ArialMTsp.svg http://en.wikipedia.org/wiki/File:VerdanaSpecimen.svg ## Slide 88 http://www.64notes.com/design/stop-helvetica-arial/, 22 May 2013 ## Slide 89 Times New Roman: OK for print, but horrible for screens Georgia was made for screens & is a great typeface https://en.wikipedia.org/wiki/File:Times_New_Roman-sample.svg https://en.wikipedia.org/wiki/File:GeorgiaSpecimenAIB.svg ## Slide 90 https://practicaltypography.com/times-new-roman.html ## Slide 91 Andalé Mono replaced by Lucida Console in Windows ME onwards, but still comes on macOS Courier New is an inferior knockoff of Courier (see Courier at https://en.wikipedia.org/wiki/Courier_(typeface)); macOS uses Courier https://en.wikipedia.org/wiki/File:AndaleMono.svg https://en.wikipedia.org/wiki/File:Courier.svg ## Slide 93 Trebuchet is still bundled with Windows & macOS; widely used on websites Impact is still included with Windows; used widely in memes https://en.wikipedia.org/wiki/File:TrebuchetMS_SP.svg https://en.wikipedia.org/wiki/File:Impact_font_sample_png.png ## Slide 94 http://en.wikipedia.org/wiki/File:ComicSansSpec3.svg ## Slide 95 http://kadavy.net/blog/posts/why-you-hate-comic-sans/ ## Slide 96 “childish and inappropriate”: http://mashable.com/2013/03/01/pope-benedict-comic-sans-album/ • “much-maligned”: http://www.salon.com/2013/03/01/the_vatican_celebrates_pope_emeritus_with_comic_sans/ • “much-mocked”: http://petapixel.com/2013/03/01/virtual-photo-album-for-ex-pope-benedict-xvi-mocked-over-comic-sans/ • “middle-school”: http://newsfeed.time.com/2010/07/09/scathing-cavs-owner-dan-gilbert-blasts-lebron-in-comic-sans/ • ”clown costume”: http://bancomicsans.com/main/?page_id=7 • “worst font ever”: http://techcrunch.com/2010/07/08/cleveland-cavs-owner-letter-lebron/ • “oh-so-mockable”: http://www.cnn.com/2010/TECH/web/07/09/comic.sans.cavs.james/index.html?hpt=T2 ## Slide 97 https://www.flickr.com/photos/seavoi/4812991976/in/pool-comicsans/ ## Slide 98 https://www.flickr.com/photos/gordhandasvb/2196308811/in/pool-comicsans/ ## Slide 99 https://www.flickr.com/photos/25315751@N04/4464757271/in/pool-comicsans/ ## Slide 100 https://www.flickr.com/photos/cliveandrews/3507417373/in/pool-comicsans/ ## Slide 101 https://www.flickr.com/photos/41002268@N03/5043228104/in/pool-comicsans/ ## Slide 102 https://www.flickr.com/photos/10569361@N00/5892792372/in/pool-comicsans/ ## Slide 103 https://www.flickr.com/photos/xxv/5446317470/in/pool-comicsans/ ## Slide 104 Slides used by CERN to announce the discovery of the Higgs Boson! https://cms-docdb.cern.ch/cgi-bin/PublicDocDB/ShowDocument?docid=6126
 http://blog.indezine.com/2012/07/higgs-boson-comic-sans-and-bad.html ## Slide 105 Slides used by CERN to announce the discovery of the Higgs Boson! https://cms-docdb.cern.ch/cgi-bin/PublicDocDB/ShowDocument?docid=6126 http://blog.indezine.com/2012/07/higgs-boson-comic-sans-and-bad.html ## Slide 106 Slides used by CERN to announce the discovery of the Higgs Boson! https://cms-docdb.cern.ch/cgi-bin/PublicDocDB/ShowDocument?docid=6126 http://blog.indezine.com/2012/07/higgs-boson-comic-sans-and-bad.html ## Slide 108 http://www.fontshop.com/fontlist/alternatives/comic_sans/ ## Slide 109 http://www.comicbookfonts.com ## Slide 110 http://www.comicbookfonts.com/Most-Popular-s/1843.htm ## Slide 122 On Windows, Helvetica is aliased to Arial & Times is aliased to Times New Roman; on macOS all those fonts are available separately http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 123 On Windows, Helvetica is aliased to Arial & Times is aliased to Times New Roman; on macOS all those fonts are available separately http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 124 Safari for Windows hasn’t been updated since 2011 (5.1.7) http://www.webkeydesign.com/380/default-fonts-safari-6/ https://en.wikipedia.org/wiki/Safari_(web_browser)#Safari_5 https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 125 http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 127 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 128 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 130 https://github.com/adobe-fonts ## Slide 131 https://github.com/adobe-fonts/source-serif-pro ## Slide 132 https://github.com/adobe-fonts/source-serif-pro/releases ## Slide 133 https://github.com/adobe-fonts ## Slide 134 https://github.com/adobe-fonts/source-sans-pro ## Slide 135 https://github.com/adobe-fonts/source-sans-pro/releases ## Slide 136 https://github.com/adobe-fonts/source-sans-pro/releases ## Slide 137 https://github.com/adobe-fonts ## Slide 138 https://github.com/adobe-fonts/source-code-pro ## Slide 139 https://github.com/adobe-fonts/source-code-pro/releases ## Slide 140 https://github.com/adobe-fonts/source-code-pro/releases/tag/2.030R-ro%2F1.050R-it ## Slide 141 https://github.com/adobe-fonts/source-code-pro/releases/tag/2.030R-ro%2F1.050R-it ## Slide 152 FIXME add font-kerning, font-optical-sizing, ## Slide 154 https://en.wikipedia.org/wiki/Traditional_point-size_names https://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4 http://www.thefullwiki.org/Point_(typography) ## Slide 160 https://drafts.csswg.org/css-values-4/#absolute-lengths ## Slide 164 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://johndjameson.com/blog/making-sense-of-ch-units/ Unicode 0030 ## Slide 166 writing-mode also specifies the order in which the rendering engine lays out block-level content ## Slide 167 https://codepen.io/websanity/pen/rqjNBe?editors=1100 ## Slide 172 http://codepen.io/websanity/pen/Ghvaz?editors=110 ## Slide 174 http://codepen.io/websanity/pen/Ghvaz?editors=110 ## Slide 177 https://drafts.csswg.org/css-values-4/#length-advance-measure https://drafts.csswg.org/css-values-4/#font-relative-lengths Unicode 6C34 CJK: Chinese/Japanese/Korean ## Slide 179 https://caniuse.com/#feat=ch-unit FIXME ## Slide 180 https://developer.mozilla.org/en-US/docs/Web/CSS/length ## Slide 182 FIXME ## Slide 183 https://developer.mozilla.org/en-US/docs/Web/CSS/length FIXME ## Slide 184 https://developer.mozilla.org/en-US/docs/Web/CSS/length ## Slide 186 https://drafts.csswg.org/css-values-3/ ## Slide 188 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 189 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 190 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 191 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 192 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 193 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 194 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 197 https://codepen.io/websanity/pen/YrmLPX?editors=1100 ## Slide 201 https://codepen.io/websanity/pen/VWaMRq?editors=1100 ## Slide 202 FIXME add font-feature-settings after font-variant ## Slide 207 Spectral: https://fonts.google.com/specimen/Spectral/?query=spectral Spectral SC: https://fonts.google.com/specimen/Spectral+SC/?query=spectral ## Slide 209 https://en.wikipedia.org/wiki/Small_caps Titling capitals: https://en.wikipedia.org/wiki/Titling_capitals ## Slide 210 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 211 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 212 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 213 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 217 office: Georgia & Georgia Pro floor: Georgia & Georgia Pro Thus: Georgia Pro & Linux Libertine stairs: Georgia Pro & Hoefler Text loft: Hoefler Text & Georgia Pro archaeology: Georgia Pro & Adobe Caslon Pro foetus: Georgia Pro & Adobe Caslon Pro ## Slide 219 https://caniuse.com/#feat=mdn-css_properties_font-variant https://caniuse.com/#feat=mdn-css_properties_font-variant_css_fonts_shorthand ## Slide 221 FIXME reorder https://caniuse.com/#feat=font-variant-alternates https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian https://caniuse.com/#feat=font-variant-numeric ## Slide 223 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch ## Slide 227 https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch ## Slide 228 https://caniuse.com/#search=font-stretch ## Slide 232 http://codepen.io/websanity/full/xORwbV/ ## Slide 233 http://www.w3.org/TR/css3-fonts/ ## Slide 253 https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack ## Slide 254 https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack ## Slide 256 FIXME add tab-size, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-emphasis-skip?? ## Slide 260 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 261 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 262 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 263 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 264 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 265 https://codepen.io/websanity/pen/WNrrbrN?editors=1100 ## Slide 266 https://caniuse.com/#feat=css-textshadow Kerning adjusts space by adding or reducing; letter-spacing only adds http://www.w3.org/TR/css-text-3/#letter-spacing-property http://www.w3.org/TR/css-text-3/#word-spacing ## Slide 269 http://codepen.io/websanity/pen/qvcKo?editors=010 ## Slide 272 Before that, they were called majuscule & minuscule (spelled correctly, as it derives from minus) https://en.wikipedia.org/wiki/File:A_Typesetters_Sorting_Case.jpg ## Slide 273 http://codepen.io/websanity/pen/HEtsg ## Slide 275 https://codepen.io/websanity/pen/KqzgOP?editors=1100 ## Slide 276 https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation FIXME ## Slide 277 https://caniuse.com/#feat=css-hanging-punctuation ## Slide 280 https://en.wikipedia.org/wiki/File:Punctuation-Spaces.svg https://en.wikipedia.org/wiki/Whitespace_character ## Slide 281 https://en.wikipedia.org/wiki/Whitespace_character ## Slide 283 FIXME add ## Slide 293 http://www.accessiq.org/news/news-features/2015/08/text-justification-and-accessibility ## Slide 294 http://codepen.io/websanity/pen/rbdsu ## Slide 297 FIXME ## Slide 299 FIXME ## Slide 301 FIXME add size, page-orientation, marks, bleed, page ## Slide 307 http://www.nlm.nih.gov/hmd/sowhatsnew/edifice.html ## Slide 310 https://caniuse.com/#feat=mdn-css_selectors_first https://caniuse.com/#feat=mdn-css_selectors_left https://caniuse.com/#feat=mdn-css_selectors_right https://caniuse.com/#feat=mdn-css_at-rules_page https://caniuse.com/#feat=css-paged-media ## Slide 318 https://www.w3.org/TR/WOFF2/ ## Slide 320 https://caniuse.com/#search=eot https://caniuse.com/#search=otf https://caniuse.com/#search=woff https://caniuse.com/#search=woff2 https://caniuse.com/#feat=svg-fonts ## Slide 327 Sometimes different local & remote fonts have the same name—those who download get the correct font, while those with the similarly-named font pre-installed get the wrong one ## Slide 334 http://www.webfonts.info See http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding ## Slide 335 http://openfontlibrary.org/en 286 font families ## Slide 336 http://www.theleagueofmoveabletype.com ## Slide 337 https://fonts.google.com or http://www.google.com/fonts 809 font families (typefaces) & 1753 fonts https://www.fonts.com/web-fonts/google?showGoogleFontsDialog=true ## Slide 338 https://fonts.google.com or http://www.google.com/fonts 987 typefaces ## Slide 339 https://fonts.google.com or http://www.google.com/fonts ## Slide 340 https://fonts.google.com or http://www.google.com/fonts ## Slide 341 https://fonts.google.com or http://www.google.com/fonts ## Slide 342 https://fonts.google.com or http://www.google.com/fonts ## Slide 347 https://web.archive.org/web/20150201064844/http://www.google.com/fonts#AboutPlace:about ## Slide 348 https://developers.google.com/fonts/faq2#can_i_use_these_fonts_commercially_to_make_a_logo_for_print_media_for_broadcast_ebooks_apps_or_sewing_machines_and_apparel ## Slide 350 https://fonts.google.com/specimen/Oswald ## Slide 351 https://fonts.google.com/specimen/Oswald ## Slide 352 https://fonts.google.com/specimen/Oswald ## Slide 353 https://fonts.google.com/specimen/Oswald ## Slide 354 https://fonts.google.com/specimen/Oswald ## Slide 355 https://fonts.google.com/specimen/Oswald ## Slide 356 https://fonts.google.com/specimen/Oswald ## Slide 357 https://fonts.google.com/specimen/Oswald ## Slide 358 https://fonts.google.com/specimen/Oswald ## Slide 359 https://fonts.google.com/specimen/Oswald ## Slide 360 https://fonts.google.com/specimen/Oswald ## Slide 361 https://fonts.google.com/specimen/Oswald ## Slide 363 https://duckduckgo.com/?q=best+google+fonts ## Slide 364 http://hellohappy.org/beautiful-web-type/ ## Slide 370 http://bueltge.de/free-web-font-combinations/ ## Slide 371 http://somadesign.ca/demos/better-google-fonts/ ## Slide 372 https://www.typewolf.com/blog/google-fonts-combinations ## Slide 373 https://www.typewolf.com ## Slide 374 https://www.typewolf.com ## Slide 375 https://www.typewolf.com ## Slide 376 https://www.typewolf.com ## Slide 377 https://www.typewolf.com ## Slide 378 https://www.typewolf.com/site-of-the-day/fonts/brandon-grotesque ## Slide 379 https://www.typewolf.com/site-of-the-day/fonts/brandon-grotesque ## Slide 380 http://www.fonts.com/web-fonts/google ## Slide 382 http://www.fonts.com/web-fonts/google ## Slide 384 http://typekit.com ## Slide 386 http://help.typekit.com/customer/portal/articles/529506-getting-started-with-typekit-and-creative-cloud ## Slide 390 See CSS - Typography - Google Fonts demo.markdown ## Slide 391 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300 ## Slide 392 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 393 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 394 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 396 https://en.wikipedia.org/wiki/Latin_Extended-A http://www.unicode.org/charts/PDF/U0100.pdf ## Slide 397 https://en.wikipedia.org/wiki/Latin_Extended-B http://www.unicode.org/charts/PDF/U0180.pdf ## Slide 399 http://fonts.googleapis.com/css?family=Oswald https://developers.google.com/fonts/docs/technical_considerations ## Slide 401 http://caniuse.com/#search=woff2 ## Slide 403 http://caniuse.com/#search=ttf ## Slide 407 http://caniuse.com/#search=woff ## Slide 409 See CSS - Typography - Google Fonts demo.markdown ## Slide 412 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 413 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 414 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 415 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 416 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 417 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 418 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 420 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 421 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 422 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 423 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 424 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 425 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 426 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 439 In this example I’ve shown 3, but there could be fewer or a lot more — it depends upon the typographer ## Slide 446 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 448 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 452 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 453 https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis ## Slide 454 https://caniuse.com/#feat=mdn-css_properties_font-synthesis ## Slide 456 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 457 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 459 https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing ## Slide 461 https://caniuse.com/#feat=mdn-css_properties_font-synthesis ## Slide 464 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 472 https://pypi.org/project/fonttools/ Also see https://github.com/fonttools/fonttools ## Slide 483 https://caniuse.com/#feat=mdn-css_properties_font-synthesis ## Slide 488 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 489 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 494 http://www.adobe.com/type/browser/classifications.html ## Slide 497 https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 498 Futura Std https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 499 Caxton Roman Book https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 500 Avenir Next https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 501 Didot https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 502 Source Serif Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 503 CMU Serif https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 504 Oswald https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 505 Adobe Caslon Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 508 http://www.tlccreative.com/samples/OS_Fonts_by_TLC.pdf ## Slide 515 http://en.wikipedia.org/wiki/File:AndaleMono.svg ## Slide 516 http://en.wikipedia.org/wiki/File:Courier.svg ## Slide 518 http://en.wikipedia.org/wiki/File:TrebuchetMS_SP.svg ## Slide 519 http://en.wikipedia.org/wiki/File:Webdings-big.png ## Slide 521 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 526 FIXME add hyphens ## Slide 528 http://codepen.io/websanity/pen/ctIvl?editors=110 Safari ## Slide 529 http://codepen.io/websanity/pen/ctIvl?editors=110 Firefox ## Slide 537 http://www.fontsquirrel.com