Notes for CSS - Typography - Condensed By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 4 http://www.granneman.com ## Slide 6 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 7 Butterick, Matthew. “Why does typography matter?”. Butterick’s Practical Typography, 16 July 2023, https://practicaltypography.com/why-does-typography-matter.html. Web. 1 Aug 2023. Image: Steckler, Ashley & Zack Glaser. “Fair & Ethical AI, with Matthew Butterick”. Lawyerist, 30 Mar 2023, https://lawyerist.com/podcast/copyright-infringement-ai/. Web. 1 Aug 2023. Fair use. Modified by converting to the WebP format. ## Slide 8 “Web Design Is 95% Typography”. iA, 19 Oct 2006, https://ia.net/know-how/the-web-is-all-about-typography-period. Web. 1 Aug 2023. ## Slide 9 Butterick, Matthew. “What is good typography?”. Butterick’s Practical Typography, 16 July 2023, https://practicaltypography.com/what-is-good-typography.html. Web. 1 Aug 2023. ## Slide 10 Butterick, Matthew. “What is good typography?”. Butterick’s Practical Typography, 16 July 2023, https://practicaltypography.com/what-is-good-typography.html. Web. 1 Aug 2023. Image: Steckler, Ashley & Zack Glaser. “Fair & Ethical AI, with Matthew Butterick”. Lawyerist, 30 Mar 2023, https://lawyerist.com/podcast/copyright-infringement-ai/. Web. 1 Aug 2023. Fair use. Modified by converting to the WebP format. ## Slide 11 Futura • Comic Sans MS • Lucida Handwriting • Perpetua Titling MT ## Slide 19 http://fontfeed.com/archives/font-or-typeface/ ## Slide 22 http://www.typophile.com/node/16843 https://en.wikipedia.org/wiki/Typeface https://en.wikipedia.org/wiki/Font ## Slide 23 https://www.marksimonson.com/fonts/view/proxima-nova ## Slide 24 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 25 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 26 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 27 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 28 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 30 schreef means “line, stroke of the pen”. The Oxford English Dictionary says the first use of serif in English was in 1830. Wikipedia contributors. “Serif”. Wikipedia, The Free Encyclopedia, 14 Sep. 2023, https://en.wikipedia.org/wiki/Serif. Web. 19 Sep. 2023. “According to Monotype, the term ‘grotesque’ originates from Italian: grottesco, meaning ‘belonging to the cave’ due to their simple geometric appearance. The term arose because of adverse comparisons that were drawn with the more ornate Modern Serif and Roman typefaces that were the norm at the time.” Wikipedia contributors. “Sans-serif”. Wikipedia, The Free Encyclopedia, 11 Sep. 2023, https://en.wikipedia.org/wiki/Sans-serif. Web. 19 Sep. 2023. Georgia Pro • Helvetica Neue • Courier • Menlo ## Slide 31 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 35 Width of 1100pt From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 36 40pt text From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 37 From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 45 https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 46 As to why you should avoid em or %, see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 49 I multiplied the sizes by 4 so they can be seen ## Slide 63 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 64 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 65 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 66 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 67 https://practicaltypography.com/times-new-roman.html https://en.wikipedia.org/wiki/Georgia_(typeface): The New York Times switching typeface ## Slide 68 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 69 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 72 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 73 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 74 “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 77 https://www.flickr.com/photos/seavoi/4812991976/in/pool-comicsans/ ## Slide 78 https://www.flickr.com/photos/gordhandasvb/2196308811/in/pool-comicsans/ ## Slide 79 https://www.flickr.com/photos/25315751@N04/4464757271/in/pool-comicsans/ ## Slide 80 https://www.flickr.com/photos/cliveandrews/3507417373/in/pool-comicsans/ ## Slide 81 https://www.flickr.com/photos/41002268@N03/5043228104/in/pool-comicsans/ ## Slide 82 https://www.flickr.com/photos/10569361@N00/5892792372/in/pool-comicsans/ ## Slide 83 https://www.flickr.com/photos/xxv/5446317470/in/pool-comicsans/ ## Slide 85 http://www.fontshop.com/fontlist/alternatives/comic_sans/ ## Slide 86 http://www.comicbookfonts.com ## Slide 87 http://www.comicbookfonts.com/Most-Popular-s/1843.htm ## Slide 88 Lanman, Joe. “File:Calendar Card - January.jpg”. Wikipedia, The Free Encyclopedia, 22 Jan 2007, https://commons.wikimedia.org/wiki/File:Calendar_Card_-_January.jpg. Web. 6 Apr 2023. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by converting to WebP format. ## Slide 89 Digital River GmbH. “MyCommerce Online Store”. The Enschedé Font Foundry, 2023, https://order.shareit.com/product?vendorid=200282378&productid=300959751. Web. 30 Mar 2023. ## Slide 90 Digital River GmbH. “MyCommerce Online Store”. The Enschedé Font Foundry, 2003, https://order.shareit.com/product?vendorid=200282378&productid=300959745. Web. 30 Mar 2023. ## Slide 91 “JHA Bodoni Ritalic Font | Webfont & Desktop”. MyFonts, https://www.myfonts.com/collections/bodoni-ritalic-font-jha. Web. 30 Mar 2023. ## Slide 92 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 93 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 94 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 97 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 98 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 99 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 101 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 102 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 104 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 105 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 106 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 107 http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 109 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 117 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 118 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 138 FIXME add font-kerning, font-optical-sizing, ## Slide 140 font-size plays a key role in creating focal points ## Slide 144 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 146 https://drafts.csswg.org/css-values-4/#lengths, Editor’s Draft, 15 July 2021 ## Slide 148 https://drafts.csswg.org/css-values-4/#absolute-lengths, Editor’s Draft, 15 July 2021 ## Slide 152 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 153 http://codepen.io/websanity/pen/Ghvaz?editors=110 ## Slide 154 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 155 http://codepen.io/websanity/pen/Ghvaz?editors=110 ## Slide 156 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 157 For browser compatibility tables, see CSS Data Types ## Slide 158 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 159 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 160 https://drafts.csswg.org/css-values-4/#percentages, Editor’s Draft, 15 July 2021 ## Slide 162 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 163 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 164 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 165 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 166 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 167 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 168 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 171 https://codepen.io/websanity/pen/YrmLPX?editors=1100 ## Slide 174 https://codepen.io/websanity/pen/VWaMRq?editors=1100 ## Slide 177 http://codepen.io/websanity/full/xORwbV/ ## Slide 178 http://www.w3.org/TR/css3-fonts/ ## Slide 186 FIXME add tab-size, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-emphasis-skip?? 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 194 http://codepen.io/websanity/pen/qvcKo?editors=010 ## Slide 197 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 198 http://codepen.io/websanity/pen/HEtsg ## Slide 201 https://codepen.io/websanity/pen/KqzgOP?editors=1100 ## Slide 202 https://en.wikipedia.org/wiki/File:Punctuation-Spaces.svg https://en.wikipedia.org/wiki/Whitespace_character ## Slide 203 https://en.wikipedia.org/wiki/Whitespace_character ## Slide 205 FIXME add https://www.w3.org/TR/css-ui-3/#text-overflow ## Slide 206 https://commons.wikimedia.org/wiki/File:Ampersand_Evolution.svg https://en.wikipedia.org/wiki/Ampersand ## Slide 210 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 211 WebSanity. http://codepen.io/websanity/pen/rbdsu. FIXME cite & more examples ## Slide 221 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 222 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 223 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 224 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 225 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 226 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 227 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 232 FIXME: Add example screenshot showing same text on macOS, Windows, iPhone, & Android ## Slide 234 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 235 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 236 https://chnsa.ws/198 takes you to https://gist.github.com/rsgranne/9d6811abad116f74575666c12093c08a ## Slide 239 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 240 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 241 https://chnsa.ws/24i takes you to https://gist.github.com/rsgranne/3f5c42ab5722c9dc14d1b768e1ffc176 ## Slide 250 https://www.w3.org/TR/WOFF2/ ## Slide 251 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 257 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 258 Caslon Antique & _P22 Franklin Caslon Regular ## Slide 265 “Font Library”. The Font Library, https://fontlibrary.org/en. Web. 19 Sep 2022. 1,392 font families ## Slide 266 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 267 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 268 The Google Fonts Team. “About Google Fonts”. Google Fonts, https://web.archive.org/web/20150201064844/http://www.google.com/fonts#AboutPlace:about ## Slide 269 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 271 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 272 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 273 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 274 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 277 See CSS - Typography - Google Fonts demo.markdown ## Slide 278 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300 ## Slide 279 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 280 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 281 “fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap”. Google, 20 Sep 2023, https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap. Web. 20 Sep 2023. ## Slide 282 See CSS - Typography - Google Fonts demo.markdown ## Slide 285 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 286 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 287 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 288 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 289 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 290 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 291 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 292 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 293 https://en.wikipedia.org/wiki/Latin_Extended-A http://www.unicode.org/charts/PDF/U0100.pdf ## Slide 294 https://en.wikipedia.org/wiki/Latin_Extended-B http://www.unicode.org/charts/PDF/U0180.pdf ## Slide 295 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 296 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 297 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 298 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 299 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 300 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 301 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts/arimo?subsets=latin. Web. 06 Sep 2023. ## Slide 310 FIXME ## Slide 317 http://webdesign.tutsplus.com/articles/web-design-basix-why-typography-matters--webdesign-1937 ## Slide 318 Franklin Caslon, based on works printed by Benjamin Franklin c. 1750 ## Slide 322 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 329 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 330 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 331 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 332 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 333 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 334 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 340 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 341 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 342 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 343 http://www.adobe.com/type/browser/classifications.html ## Slide 345 “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 346 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 350 I multiplied the sizes by 4 so they can be seen ## Slide 351 http://type-scale.com ## Slide 352 http://type-scale.com ## Slide 353 http://type-scale.com ## Slide 355 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 356 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 357 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 358 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 359 Georgia Pro, Avenir Next, & CMU Serif Upright Italic ## Slide 362 https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 363 Futura Std https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 364 Caxton Roman Book https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 365 Avenir Next https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 366 Didot https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 367 Source Serif Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 368 CMU Serif https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 369 Oswald https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 370 Adobe Caslon Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 373 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 374 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 375 Ilene Strizver: https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 376 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 377 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 378 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 379 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 380 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 381 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 382 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 383 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 384 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 385 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 386 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 387 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 389 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 390 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 391 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 393 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 394 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 395 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 398 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 399 “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 400 “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 401 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 402 “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 403 “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 404 “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 405 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 406 “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 407 “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 408 “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 412 https://codepen.io/websanity/pen/wQMdwd?editors=1100 ## Slide 415 http://www.tlccreative.com/samples/OS_Fonts_by_TLC.pdf ## Slide 424 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 425 https://drafts.csswg.org/css-values-4/#ch, Editor’s Draft, 15 July 2021 ## Slide 426 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 427 https://codepen.io/websanity/pen/rqjNBe?editors=1100 ## Slide 428 https://drafts.csswg.org/css-values-4/#ch, Editor’s Draft, 15 July 2021 ## Slide 429 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 431 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 432 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 433 https://drafts.csswg.org/css-values-4/#cap, Editor’s Draft, 15 July 2021 ## Slide 435 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 436 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 437 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 438 For browser compatibility tables, see CSS Data Types ## Slide 439 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 440 https://drafts.csswg.org/css-values-3/ ## Slide 444 FIXME add font-feature-settings after font-variant ## Slide 449 Spectral: https://fonts.google.com/specimen/Spectral/?query=spectral Spectral SC: https://fonts.google.com/specimen/Spectral+SC/?query=spectral ## Slide 451 https://en.wikipedia.org/wiki/Small_caps Titling capitals: https://en.wikipedia.org/wiki/Titling_capitals ## Slide 452 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 453 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 454 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 455 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 459 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 461 https://caniuse.com/#feat=mdn-css_properties_font-variant https://caniuse.com/#feat=mdn-css_properties_font-variant_css_fonts_shorthand ## Slide 463 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 465 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch ## Slide 469 https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch ## Slide 470 https://caniuse.com/#search=font-stretch ## Slide 472 FIXME add tab-size, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-emphasis-skip?? ## Slide 475 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 476 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 477 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 478 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 479 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 480 https://codepen.io/websanity/pen/WNrrbrN?editors=1100 ## Slide 481 https://caniuse.com/#feat=css-textshadow ## Slide 484 https://codepen.io/websanity/pen/KqzgOP?editors=1100 ## Slide 496 FIXME ## Slide 498 FIXME ## Slide 500 FIXME add size, page-orientation, marks, bleed, page ## Slide 505 http://www.nlm.nih.gov/hmd/sowhatsnew/edifice.html ## Slide 508 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 510 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 515 As of 21 Nov 2022 ## Slide 517 FIXME add hyphens ## Slide 519 http://codepen.io/websanity/pen/ctIvl?editors=110 Safari ## Slide 520 http://codepen.io/websanity/pen/ctIvl?editors=110 Firefox ## Slide 530 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 532 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 533 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 534 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 535 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 536 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 537 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 538 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 539 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 540 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 541 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 542 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 544 https://duckduckgo.com/?q=best+google+fonts ## Slide 545 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 546 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 547 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 548 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 549 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 550 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 551 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 552 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 553 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 554 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 555 http://www.fonts.com/web-fonts/google ## Slide 557 http://www.fonts.com/web-fonts/google ## Slide 559 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 560 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 561 Adobe. “About | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/about. Web. 19 Sep 2022. ## Slide 562 “Fonts by Hoefler&Co.”. Hoefler&Co., 19 Sep 2022, https://www.typography.com/. Web. 19 Sep 2022. ## Slide 563 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 564 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 565 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 566 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 567 “Fonts for Print, Products and Screens | MyFonts”. MyFonts, https://www.myfonts.com/. Web. 19 Sep 2022. 130,000 fonts ## Slide 568 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 569 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 570 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 571 http://www.fontsquirrel.com ## Slide 575 FIXME add https://www.axis-praxis.org/specimens/__DEFAULT__ ## Slide 581 In this example I’ve shown 3, but there could be fewer or a lot more — it depends upon the typographer ## Slide 588 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 590 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 593 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 594 https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis ## Slide 595 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 597 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 598 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 600 https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing ## Slide 602 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 605 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 613 https://pypi.org/project/fonttools/ Also see https://github.com/fonttools/fonttools ## Slide 614 https://www.python.org/downloads/ https://brew.sh ## Slide 624 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 626 https://typography.guru/discover/6/, 2020-08-16 ## Slide 627 29 typefaces on this slide ## Slide 628 30 typefaces on this slide ## Slide 629 20 typefaces on this slide 79 typefaces in totum