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 24 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 25 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 26 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 34 http://fontfeed.com/archives/font-or-typeface/ ## Slide 37 http://www.typophile.com/node/16843 https://en.wikipedia.org/wiki/Typeface https://en.wikipedia.org/wiki/Font ## Slide 38 https://www.marksimonson.com/fonts/view/proxima-nova ## Slide 39 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 40 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## 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 45 Georgia Pro • Helvetica Neue • Courier • Menlo ## Slide 46 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 49 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 50 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 51 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 52 “File:Font types.svg”. Wikipedia, The Free Encyclopedia, 28 Feb 2008, https://en.wikipedia.org/wiki/File:Font_types.svg. Web. 21 Sep 2022. Public domain. ## Slide 53 Wikipedia contributors. “Typeface”. Wikipedia, The Free Encyclopedia, 13 Sep 2022, https://en.wikipedia.org/w/index.php?title=Typeface&oldid=1110106643. Web. 21 Sep 2022. ## Slide 56 Width of 1100pt From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 57 40pt text From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 58 From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 66 https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 67 As to why you should avoid em or %, see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 71 I multiplied the sizes by 4 so they can be seen ## Slide 72 I multiplied the sizes by 4 so they can be seen ## Slide 73 http://type-scale.com ## Slide 74 http://type-scale.com ## Slide 75 http://type-scale.com ## Slide 86 http://en.wikipedia.org/wiki/File:Typography_Line_Terms.svg ## Slide 87 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 88 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 89 A counter is named from the idea of a counter-space or hole https://en.wikipedia.org/wiki/Counter_(typography) ## Slide 90 A counter is named from the idea of a counter-space or hole Wikipedia contributors. “Counter (typography)”. Wikipedia, The Free Encyclopedia, 29 Jan. 2022, https://en.wikipedia.org/w/index.php?title=Counter_(typography)&oldid=1068630740. Web. 10 Apr. 2022. ## Slide 91 Wikipedia contributors. “Counter (typography)”. Wikipedia, The Free Encyclopedia, 29 Jan. 2022, https://en.wikipedia.org/w/index.php?title=Counter_(typography)&oldid=1068630740. Web. 10 Apr. 2022. ## Slide 92 Wikipedia contributors. “Counter (typography)”. Wikipedia, The Free Encyclopedia, 29 Jan. 2022, https://en.wikipedia.org/w/index.php?title=Counter_(typography)&oldid=1068630740. Web. 10 Apr. 2022. ## Slide 93 Georgia Pro, Avenir Next, & CMU Serif Upright Italic ## Slide 98 Arial is a knock-off of Helvetica Verdana is a great screen font Trebuchet is still bundled with Windows & macOS http://en.wikipedia.org/wiki/File:ArialMTsp.svg http://en.wikipedia.org/wiki/File:VerdanaSpecimen.svg https://en.wikipedia.org/wiki/File:TrebuchetMS_SP.svg ## Slide 99 King Sidharth: http://www.64notes.com/design/stop-helvetica-arial/, 22 May 2013 Matthew Butterick: https://practicaltypography.com/helvetica-and-arial-alternatives.html http://en.wikipedia.org/wiki/File:ArialMTsp.svg ## Slide 100 Ilene Strizver: https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 101 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 102 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 103 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 104 https://books.google.com/books?id=6UHOApOVw2EC&pg=PP96&lpg=PP96&dq=%22In+a+way,+The+Beatles+are+the+Helvetica+of+pop;+just+like+Helvetica+is+The+Beatles+of+typefaces%22&source=bl&ots=Atfpim-zuM&sig=ACfU3U1G7jXJEujUHJvu0CogOXTXkhxLKw&hl=en&sa=X&ved=2ahUKEwjajNed4qbuAhWNW80KHUMVARwQ6AEwCXoECAoQAg#v=onepage&q=%22In%20a%20way%2C%20The%20Beatles%20are%20the%20Helvetica%20of%20pop%3B%20just%20like%20Helvetica%20is%20The%20Beatles%20of%20typefaces%22&f=false ## Slide 105 Wikipedia contributors. “Verdana”. Wikipedia, The Free Encyclopedia, 19 Sep. 2022, https://en.wikipedia.org/wiki/Verdana. Web. 21 Sep. 2022. http://en.wikipedia.org/wiki/File:VerdanaSpecimen.svg ## Slide 106 Wikipedia contributors. “Trebuchet MS”. Wikipedia, The Free Encyclopedia, 12 Sep. 2022, https://en.wikipedia.org/w/index.php?title=Trebuchet_MS&oldid=1109903256. Web. 21 Sep. 2022. https://en.wikipedia.org/wiki/File:TrebuchetMS_SP.svg ## Slide 107 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 108 https://practicaltypography.com/times-new-roman.html https://en.wikipedia.org/wiki/Georgia_(typeface): The New York Times switching typeface ## Slide 109 https://practicaltypography.com/times-new-roman.html https://en.wikipedia.org/wiki/Georgia_(typeface): The New York Times switching typeface ## Slide 110 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 111 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 112 https://en.wikipedia.org/wiki/Georgia_(typeface) https://docs.microsoft.com/en-us/typography/font-list/georgia-pro For more on ligatures, see the font-variant-ligatures section later. ## Slide 113 Andalé Mono was replaced by Lucida Console in Windows ME through Windows 7 (see https://en.wikipedia.org/w/index.php?title=Lucida&oldid=1141384594), 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 116 Impact is still included with Windows; used widely in memes Wikipedia contributors. “Impact (typeface)”. Wikipedia, The Free Encyclopedia, 5 July 2022, https://en.wikipedia.org/wiki/Impact_%28typeface%29. Web. 21 Sep. 2022. Edwards, Phil. “The reason every meme uses that one font”. Vox, 26 July 2105, https://www.vox.com/2015/7/26/9036993/meme-font-impact. Web. 21 Sep 2022. Blythwood. “File:Impact font sample png.png”. Wikipedia, The Free Encyclopedia, 13 June 2015, https://en.wikipedia.org/wiki/File:Impact_font_sample_png.png. Web. 21 Sep 2022. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 117 DO NOT WANT: “Do Not Want”. CAT MACROS, 21 Sep 2009, https://catmacros.wordpress.com/2009/09/21/do-not-want/. Web. 21 Sep 2022. MONORAIL CAT: ohmyjosh. “Monorail Cat”. Know Your Meme, 24 Aug 2020, https://knowyourmeme.com/memes/monorail-cat. Web. 21 Sep 2022. INVASION KITTIES: “Invasion Kitties Accept Your Offering”. https://katurday.com. Web. 5 July 2008. Photo of cats by Scott Granneman. INVISIBLE BIKE: Y F. “Invisible Bike”. Know Your Meme, 11 Nov 2019, https://knowyourmeme.com/memes/invisible-bike. 20 Sep 2007. I IZ NOT IN TEH HOLIDAY SPIRIK: Granneman, Scott. “I Iz Not In Teh Holiday Spirik”. 23 Dec 2007. Author’s personal collection. WE HAZ A BIZNESS PLAN: Web. 5 July 2008. Photo of cats by Scott Granneman. ## Slide 118 GearedBull at English Wikipedia. “File:ComicSansSpec3.svg”. Wikipedia, The Free Encyclopedia, 25 Oct 2006, https://en.wikipedia.org/wiki/File:ComicSansSpec3.svg. Web. 21 Sep 2022. Public domain. ## Slide 119 Kadavy, David. “Why You Hate Comic Sans”. Design for Hackers, 25 Jan 2011, http://kadavy.net/blog/posts/why-you-hate-comic-sans/. Web. 31 July 2014. Licensed CC BY-NC-SA 3.0: https://creativecommons.org/licenses/by-nc-sa/3.0/. ## Slide 120 “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 123 https://www.flickr.com/photos/seavoi/4812991976/in/pool-comicsans/ ## Slide 124 https://www.flickr.com/photos/gordhandasvb/2196308811/in/pool-comicsans/ ## Slide 125 https://www.flickr.com/photos/25315751@N04/4464757271/in/pool-comicsans/ ## Slide 126 https://www.flickr.com/photos/cliveandrews/3507417373/in/pool-comicsans/ ## Slide 127 https://www.flickr.com/photos/41002268@N03/5043228104/in/pool-comicsans/ ## Slide 128 https://www.flickr.com/photos/10569361@N00/5892792372/in/pool-comicsans/ ## Slide 129 https://www.flickr.com/photos/xxv/5446317470/in/pool-comicsans/ ## Slide 130 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 131 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 132 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 134 http://www.fontshop.com/fontlist/alternatives/comic_sans/ ## Slide 135 http://www.comicbookfonts.com ## Slide 136 http://www.comicbookfonts.com/Most-Popular-s/1843.htm ## Slide 137 Microsoft. “Windows 10 font list”. Microsoft Docs, 21 September 2020, https://docs.microsoft.com/en-us/typography/fonts/windows_10_font_list. Web. 1 December 2021. Microsoft. “Windows 11 font list”. Microsoft Docs, 16 September 2021, https://docs.microsoft.com/en-us/typography/fonts/windows_11_font_list. Web. 1 December 2021. ## Slide 138 Arial Nova: https://www.microsoft.com/en-us/p/arial-nova/9ns5ct1mz7m8#activetab=pivot:overviewtab Georgia Pro: https://www.microsoft.com/en-us/p/georgia-pro/9n9dzg1xt2mb#activetab=pivot:overviewtab Gill Sans Nova: https://www.microsoft.com/en-us/p/gill-sans-nova/9pk93bg0z1jj?activetab=pivot:overviewtab Neue Haas Grotesk Text Pro: Not available in the Microsoft Store (?) Rockwell Nova: https://www.microsoft.com/en-us/p/rockwell-nova/9n57vdp26cd7?activetab=pivot:overviewtab Verdana Pro: https://www.microsoft.com/en-us/p/verdana-pro/9n8d67vhhdc2?activetab=pivot:overviewtab ## Slide 139 Microsoft. “How to install fonts that are missing after upgrading to Windows client”. Microsoft Documentation, 29 November 2021, https://docs.microsoft.com/en-us/windows/deployment/windows-10-missing-fonts. Web. 1 December 2021. ## Slide 142 Moyogo. “File:CandaraSpecimen.svg”. Wikipedia, The Free Encyclopedia, 13 June 2015, https://en.wikipedia.org/wiki/File:CandaraSpecimen.svg. Web. 21 Sep 2022. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 143 User:Stannered. “File:Constantia sample alt.svg”. Wikipedia, The Free Encyclopedia, 20 Mar 2007, https://en.wikipedia.org/wiki/File:Constantia_sample_alt.svg. Web. 21 Sep 2022. Public domain. ## Slide 144 Hunt, Paul. “File:CorbelSpec.svg”. Wikipedia, The Free Encyclopedia, 24 May 2007, https://en.wikipedia.org/wiki/File:CorbelSpec.svg. Web. 21 Sep 2022. Public domain. ## Slide 145 Blythwood. “File:Calibri sample image.png”. Wikipedia, The Free Encyclopedia, 22 Oct 2016, https://en.wikipedia.org/wiki/File:Calibri_sample_image.png. Web. 21 Sep 2022. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 146 Blythwood. “File:Calibri sample image.png”. Wikipedia, The Free Encyclopedia, 22 Oct 2016, https://en.wikipedia.org/wiki/File:Calibri_sample_image.png. Web. 21 Sep 2022. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 147 Sun Ladder. “File:CambriaSpecimen.svg”. Wikipedia, The Free Encyclopedia, 22 Jan 2009, https://en.wikipedia.org/wiki/File:CambriaSpecimen.svg. Web. 21 Sep 2022. Public domain. ## Slide 149 GJo. “File:ConsolasSP.svg”. Wikipedia, The Free Encyclopedia, 8 June 2007, https://en.wikipedia.org/wiki/File:ConsolasSP.svg. Web. 21 Sep 2022. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/. ## Slide 150 GJo. “File:ConsolasSP.svg”. Wikipedia, The Free Encyclopedia, 8 June 2007, https://en.wikipedia.org/wiki/File:ConsolasSP.svg. Web. 21 Sep 2022. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/. ## Slide 152 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 153 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 154 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 155 http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 157 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 158 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 160 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 161 “adobe-fonts/source-serif: Typeface for setting text in many sizes, weights, and languages. Designed to complement Source Sans.”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts/source-serif. Web. 11 Mar 2023. ## Slide 162 “adobe-fonts/source-serif: Typeface for setting text in many sizes, weights, and languages. Designed to complement Source Sans.”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts/source-serif. Web. 11 Mar 2023. ## Slide 163 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 164 “adobe-fonts/source-sans: Sans serif font family for user interface environments”. GitHub, 7 Sep 2021, https://github.com/adobe-fonts/source-sans. Web. 11 Mar 2023. ## Slide 165 “adobe-fonts/source-sans: Sans serif font family for user interface environments”. GitHub, 7 Sep 2021, https://github.com/adobe-fonts/source-sans. Web. 11 Mar 2023. ## Slide 166 “Release Fonts version 3.046 (OTF, TTF, WOFF, WOFF2, Variable) · adobe-fonts/source-sans”. GitHub, 14 July 2021, https://github.com/adobe-fonts/source-sans/releases/tag/3.046R. Web. 11 Mar 2023. ## Slide 167 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 168 “adobe-fonts/source-code-pro: Monospaced font family for user interface and coding environments”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts/source-code-pro. Web. 11 Mar 2023. ## Slide 169 “adobe-fonts/source-code-pro: Monospaced font family for user interface and coding environments”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts/source-code-pro. Web. 11 Mar 2023. ## Slide 170 “Release Roman fonts version 2.038, Italic fonts version 1.058 and VAR fonts version 1.018 (OTF, TTF, WOFF, WOFF2) · adobe-fonts/source-code-pro”. GitHub, 14 Jan 2021, https://github.com/adobe-fonts/source-code-pro/releases/tag/2.038R-ro/1.058R-it/1.018R-VAR. Web. 11 Mar 2023. ## Slide 180 https://codepen.io/websanity/pen/wQMdwd?editors=1100 ## Slide 183 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 184 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 204 FIXME add font-kerning, font-optical-sizing, ## Slide 206 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 211 Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022. ## Slide 213 https://drafts.csswg.org/css-values-4/#lengths, Editor’s Draft, 15 July 2021 ## Slide 215 https://drafts.csswg.org/css-values-4/#absolute-lengths, Editor’s Draft, 15 July 2021 ## Slide 219 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#ch, Editor’s Draft, 15 July 2021 https://johndjameson.com/blog/making-sense-of-ch-units/ Unicode 0030 ## Slide 220 https://drafts.csswg.org/css-values-4/#ch, Editor’s Draft, 15 July 2021 ## Slide 221 writing-mode also specifies the order in which the rendering engine lays out block-level content https://drafts.csswg.org/css-values-4/#ch, Editor’s Draft, 15 July 2021 ## Slide 222 https://codepen.io/websanity/pen/rqjNBe?editors=1100 ## Slide 223 https://drafts.csswg.org/css-values-4/#ch, Editor’s Draft, 15 July 2021 ## Slide 224 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#ex, Editor’s Draft, 15 July 2021 ## Slide 226 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#em, Editor’s Draft, 15 July 2021 ## Slide 227 http://codepen.io/websanity/pen/Ghvaz?editors=110 ## Slide 228 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#rem, Editor’s Draft, 15 July 2021 ## Slide 229 http://codepen.io/websanity/pen/Ghvaz?editors=110 ## Slide 230 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#cap, Editor’s Draft, 15 July 2021 ## Slide 231 https://drafts.csswg.org/css-values-4/#cap, Editor’s Draft, 15 July 2021 ## Slide 233 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#ic, Editor’s Draft, 15 July 2021 Unicode 6C34 CJK: Chinese/Japanese/Korean ## Slide 234 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#lh, Editor’s Draft, 15 July 2021 https://drafts.csswg.org/css-values-4/#rlh, Editor’s Draft, 15 July 2021 ## Slide 235 ch: https://caniuse.com/#feat=ch-unit ex: https://caniuse.com/mdn-css_types_length_ex em: rem: https://caniuse.com/mdn-css_types_length_rem & https://caniuse.com/rem ## Slide 236 MDN contributors. “”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 3 Mar 2022. cap: “types: : cap unit”. Can I Use, https://caniuse.com/mdn-css_types_length_cap. Web. 3 Mar 2022. MDN Web Docs [@mdn]. “length.json”. GitHub, 14 Feb. 2022, https://github.com/mdn/browser-compat-data/blob/23c7b13e7cf82ba8777bbf9529fbbcfbe130a776/css/types/length.json. Web. 3 Mar 2022. ic: “types: : ic unit”. Can I Use, https://caniuse.com/mdn-css_types_length_ic. Web. 3 Mar 2022. MDN Web Docs [@mdn]. “length.json”. GitHub, 14 Feb. 2022, https://github.com/mdn/browser-compat-data/blob/23c7b13e7cf82ba8777bbf9529fbbcfbe130a776/css/types/length.json. Web. 3 Mar 2022. lh: “types: : lh unit”. Can I Use, https://caniuse.com/mdn-css_types_length_lh. Web. 3 Mar 2022. rlh: * “types: : rlh unit”. Can I Use, https://caniuse.com/mdn-css_types_length_rlh. Web. 3 Mar 2022. ## Slide 237 For browser compatibility tables, see CSS Data Types ## Slide 238 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#viewport-relative-lengths, Editor’s Draft, 15 July 2021 ## Slide 239 Slides: https://www.granneman.com/downloads/web-dev/CSS-Data-Types.pdf Notes: https://www.granneman.com/downloads/web-dev/CSS-Data-Types.txt ## Slide 240 https://developer.mozilla.org/en-US/docs/Web/CSS/length https://drafts.csswg.org/css-values-4/#viewport-relative-lengths, Editor’s Draft, 15 July 2021 ## Slide 241 https://drafts.csswg.org/css-values-4/#percentages, Editor’s Draft, 15 July 2021 ## Slide 242 https://drafts.csswg.org/css-values-3/ ## Slide 244 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 245 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 246 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 247 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 248 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 249 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 250 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 253 https://codepen.io/websanity/pen/YrmLPX?editors=1100 ## Slide 258 https://codepen.io/websanity/pen/VWaMRq?editors=1100 ## Slide 259 FIXME add font-feature-settings after font-variant ## Slide 264 Spectral: https://fonts.google.com/specimen/Spectral/?query=spectral Spectral SC: https://fonts.google.com/specimen/Spectral+SC/?query=spectral ## Slide 266 https://en.wikipedia.org/wiki/Small_caps Titling capitals: https://en.wikipedia.org/wiki/Titling_capitals ## Slide 267 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 268 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 269 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 270 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 274 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 276 https://caniuse.com/#feat=mdn-css_properties_font-variant https://caniuse.com/#feat=mdn-css_properties_font-variant_css_fonts_shorthand ## Slide 278 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 280 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch ## Slide 284 https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch ## Slide 285 https://caniuse.com/#search=font-stretch ## Slide 289 http://codepen.io/websanity/full/xORwbV/ ## Slide 290 http://www.w3.org/TR/css3-fonts/ ## Slide 306 Khan, Arnold. “The Call of Cthulhu- A Lovecraftian Tale”. Medium, 29 Apr 2020, https://medium.com/@talhaobair/the-call-of-cthulhu-a-lovecraftian-story-a4d34d75167e. Web. 21 Sep 2022. ## Slide 307 Epstein, Adam. “‘Bird Box’ taps into a Lovecraftian horror tradition rising from the deep”. Quartz, 9 Jan 2019, https://qz.com/quartzy/1517797/bird-box-taps-into-a-lovecraftian-horror-tradition-rising-from-the-deep/. Web. 21 Sep 2022. ## Slide 308 Brown, Kristen V. “The 6-Feet Rule Will Guide Architects in a Post-Covid World”. Bloomberg Businessweek, 17 July 2020, https://www.bloomberg.com/news/articles/2020-07-17/coronavirus-pandemic-how-the-crisis-will-influence-architects?srnd=businessweek-v2. Web. 21 Sep 2022. ## Slide 309 Brown, Kristen V. “The 6-Feet Rule Will Guide Architects in a Post-Covid World”. Bloomberg Businessweek, 17 July 2020, https://www.bloomberg.com/news/articles/2020-07-17/coronavirus-pandemic-how-the-crisis-will-influence-architects?srnd=businessweek-v2. Web. 21 Sep 2022. ## Slide 310 Remnick, David. “John Lewis’s Legacy and America’s Redemption”. The New Yorker, 18 July 2020, https://www.newyorker.com/magazine/2020/07/27/how-to-redeem-america. Web. 21 Sep 2022. NY Irvin: Commercial copy, called New Yorker Type ($55 each for Regular & Bold): https://www.myfonts.com/fonts/wiescherdesign/new-yorker-type/ Neutraface is used by Wendy’s in their advertising ## Slide 311 Remnick, David. “John Lewis’s Legacy and America’s Redemption”. The New Yorker, 18 July 2020, https://www.newyorker.com/magazine/2020/07/27/how-to-redeem-america. Web. 21 Sep 2022. NY Irvin: Commercial copy, called New Yorker Type ($55 each for Regular & Bold): https://www.myfonts.com/fonts/wiescherdesign/new-yorker-type/ Neutraface is used by Wendy’s in their advertising ## Slide 318 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 319 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 320 https://chnsa.ws/198 takes you to https://gist.github.com/rsgranne/9d6811abad116f74575666c12093c08a ## Slide 322 MewenLeHo et al. “Reboot”. Bootstrap v5.2, 16 Nov 2022, https://getbootstrap.com/docs/5.2/content/reboot/#native-font-stack. Web. 21 Nov 2022. ## Slide 323 MewenLeHo et al. “Reboot”. Bootstrap v5.2, 16 Nov 2022, https://getbootstrap.com/docs/5.2/content/reboot/#native-font-stack. Web. 21 Nov 2022. ## Slide 324 https://chnsa.ws/24i takes you to https://gist.github.com/rsgranne/3f5c42ab5722c9dc14d1b768e1ffc176 ## Slide 325 As of 21 Nov 2022 ## Slide 328 FIXME add tab-size, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-emphasis-skip?? ## Slide 329 FIXME ## Slide 333 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 334 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 335 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 336 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 337 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 338 https://codepen.io/websanity/pen/WNrrbrN?editors=1100 ## Slide 339 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 342 http://codepen.io/websanity/pen/qvcKo?editors=010 ## Slide 345 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 346 http://codepen.io/websanity/pen/HEtsg ## Slide 348 https://codepen.io/websanity/pen/KqzgOP?editors=1100 ## Slide 350 https://codepen.io/websanity/pen/yLeoQwB?editors=1100 ## Slide 351 https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation FIXME ## Slide 352 https://caniuse.com/#feat=css-hanging-punctuation ## Slide 353 Steve Jobs quoting Wayne Gretzky introducing iPhone at 1:18:00, 2007-01-09, https://www.youtube.com/watch?v=VQKMoT-6XSg ## Slide 356 https://en.wikipedia.org/wiki/File:Punctuation-Spaces.svg https://en.wikipedia.org/wiki/Whitespace_character ## Slide 357 https://en.wikipedia.org/wiki/Whitespace_character ## Slide 359 FIXME add https://www.w3.org/TR/css-ui-3/#text-overflow ## Slide 367 https://commons.wikimedia.org/wiki/File:Ampersand_Evolution.svg https://en.wikipedia.org/wiki/Ampersand ## Slide 371 Woodford, Allayne. “Text justification and accessibility”. Access iQ, 6 Aug 2015, http://www.accessiq.org/news/news-features/2015/08/text-justification-and-accessibility. Web. 21 Sep 2022. ## Slide 372 WebSanity. http://codepen.io/websanity/pen/rbdsu. ## Slide 375 FIXME ## Slide 377 FIXME ## Slide 379 FIXME add size, page-orientation, marks, bleed, page ## Slide 384 http://www.nlm.nih.gov/hmd/sowhatsnew/edifice.html ## Slide 387 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 395 https://www.w3.org/TR/WOFF2/ ## Slide 397 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 404 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 411 “Font Library”. The Font Library, https://fontlibrary.org/en. Web. 19 Sep 2022. 1,392 font families ## Slide 412 Rich, Micah & The League of Moveable Type. “The League of Moveable Type – the first open-source font foundry”. The League of Moveable Type, https://www.theleagueofmoveabletype.com/. Web. 19 Sep 2022. 17 fonts ## Slide 413 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 414 The Google Fonts Team. “About Google Fonts”. Google Fonts, https://web.archive.org/web/20150201064844/http://www.google.com/fonts#AboutPlace:about ## Slide 415 Google. “Frequently Asked Questions”. Google Fonts, 3 Mar 2020, https://web.archive.org/web/20200721081556/https://developers.google.com/fonts/faq2. Web. 21 July 2020. ## Slide 417 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 418 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 419 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 420 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 422 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 423 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 424 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 425 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 426 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 427 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro/tester?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 428 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro/glyphs?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 429 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro/glyphs?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 430 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro/glyphs?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 431 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro/about?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 432 Google. “Source Sans Pro - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Source+Sans+Pro/about?query=source+sans+pro. Web. 20 Sep 2022. ## Slide 434 https://duckduckgo.com/?q=best+google+fonts ## Slide 435 Bültge, Frank. “Beautiful web type combinations — maybe the best typefaces combinations from the Google web fonts directory”. Beautiful Web Type Combinations, 5 Apr 2019, http://bueltge.de/free-web-font-combinations/. Web. 21 Sep 2022. ## Slide 436 Wiebe, Matt. “462 Google Web Fonts Families”. Better Google Web Fonts, 17 Jan 2014, http://somadesign.ca/demos/better-google-fonts/. Web. 21 Sep 2022. ## Slide 437 Shoaf, Jeremiah. “Five Fresh Headline & Body Text Pairings on Google Fonts”. Typewolf, 12 Oct 2016, https://www.typewolf.com/blog/google-fonts-combinations. Web. 21 Sep 2022. ## Slide 438 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 439 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 440 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 441 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 442 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 443 Shoaf, Jeremiah. “Brandon Grotesque Font Combinations & Free Alternatives • Typewolf”. Typewolf, 6 Oct 2016, https://www.typewolf.com/site-of-the-day/fonts/brandon-grotesque. Web. 31 Oct 2022. ## Slide 444 Shoaf, Jeremiah. “Brandon Grotesque Font Combinations & Free Alternatives • Typewolf”. Typewolf, 6 Oct 2016, https://www.typewolf.com/site-of-the-day/fonts/brandon-grotesque. Web. 31 Oct 2022. ## Slide 445 http://www.fonts.com/web-fonts/google ## Slide 447 http://www.fonts.com/web-fonts/google ## Slide 449 Adobe. “Adobe Fonts | Explore unlimited fonts”. Adobe Fonts, https://fonts.adobe.com/?ref=tk.com. Web. 19 Sep 2022. Formerly called Typekit 2,852 font families ## Slide 450 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 451 Adobe. “About | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/about. Web. 19 Sep 2022. ## Slide 452 “Fonts by Hoefler&Co.”. Hoefler&Co., 19 Sep 2022, https://www.typography.com/. Web. 19 Sep 2022. ## Slide 453 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 454 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 455 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 456 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 457 “Fonts for Print, Products and Screens | MyFonts”. MyFonts, https://www.myfonts.com/. Web. 19 Sep 2022. 130,000 fonts ## Slide 458 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 459 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 460 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 463 See CSS - Typography - Google Fonts demo.markdown ## Slide 464 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300 ## Slide 465 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 466 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 467 See CSS - Typography - Google Fonts demo.markdown ## Slide 470 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 471 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 472 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 473 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 474 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 475 https://google-webfonts-helper.herokuapp.com/fonts/arimo ## Slide 476 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 477 https://en.wikipedia.org/wiki/Latin_Extended-A http://www.unicode.org/charts/PDF/U0100.pdf ## Slide 478 https://en.wikipedia.org/wiki/Latin_Extended-B http://www.unicode.org/charts/PDF/U0180.pdf ## Slide 479 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 480 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 481 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 482 https://google-webfonts-helper.herokuapp.com/fonts ## Slide 483 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 484 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 485 https://google-webfonts-helper.herokuapp.com/fonts/arimo?subsets=latin,latin-ext ## Slide 494 FIXME ## Slide 496 FIXME add https://www.axis-praxis.org/specimens/__DEFAULT__ ## Slide 502 In this example I’ve shown 3, but there could be fewer or a lot more — it depends upon the typographer ## Slide 509 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 511 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 514 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 515 https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis ## Slide 516 Deveria, Alexis [Fyrd]. “CSS property: font-synthesis”. Can I use…, 21 Sep 2022, https://caniuse.com/mdn-css_properties_font-synthesis. Web. 21 Sep 2022. ## Slide 518 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 519 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 521 https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing ## Slide 523 Deveria, Alexis [Fyrd]. “CSS property: font-optical-sizing”. Can I use…, 21 Sep 2022, https://caniuse.com/mdn-css_properties_font-optical-sizing. Web. 21 Sep 2022. ## Slide 526 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 534 https://pypi.org/project/fonttools/ Also see https://github.com/fonttools/fonttools ## Slide 535 https://www.python.org/downloads/ https://brew.sh ## Slide 545 MDN contributors. “font-variation-settings”. MDN Web Docs, 9 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings. Web. 21 Sep 2022. Deveria, Alexis [Fyrd]. “CSS at-rule: @font-face: font-variation-settings”. Can I use…, 21 Sep 2022, https://caniuse.com/mdn-css_at-rules_font-face_font-variation-settings. Web. 21 Sep 2022. Deveria, Alexis [Fyrd]. “Variable fonts”. Can I use…, 21 Sep 2022, https://caniuse.com/variable-fonts. Web. 21 Sep 2022. ## Slide 547 https://typography.guru/discover/6/, 2020-08-16 ## Slide 550 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 551 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 556 http://www.adobe.com/type/browser/classifications.html ## Slide 559 https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 560 Futura Std https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 561 Caxton Roman Book https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 562 Avenir Next https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 563 Didot https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 564 Source Serif Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 565 CMU Serif https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 566 Oswald https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 567 Adobe Caslon Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 570 http://www.tlccreative.com/samples/OS_Fonts_by_TLC.pdf ## Slide 577 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 582 FIXME add hyphens ## Slide 584 http://codepen.io/websanity/pen/ctIvl?editors=110 Safari ## Slide 585 http://codepen.io/websanity/pen/ctIvl?editors=110 Firefox ## Slide 593 http://www.fontsquirrel.com ## Slide 597 40 typefaces on this slide ## Slide 598 34 typefaces on this slide 74 typefaces in totum