Notes for CSS - Typography - Condensed By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Slides: https://granneman.com/downloads/web-dev/CSS-Typography-Condensed.pdf Notes: https://granneman.com/downloads/web-dev/CSS-Typography-Condensed.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 5 http://www.granneman.com ## Slide 7 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 8 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 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. 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 10 “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 11 Futura • Comic Sans MS • Lucida Handwriting • Perpetua Titling MT ## Slide 19 http://fontfeed.com/archives/font-or-typeface/ ## Slide 20 Michele M. F. “File:Wood letterpress blocks.jpg”. Wikipedia, The Free Encyclopedia, 24 Nov. 2013, https://en.wikipedia.org/wiki/File:Wood_letterpress_blocks.jpg. Web. 14 Feb 2024. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. Modified by converting to the WebP format. ## Slide 21 Norro. “Metal movable type (rotated 180°!)”. Wikipedia, The Free Encyclopedia, 28 Sep 2004, https://commons.wikimedia.org/wiki/File:Metal_movable_type_edit.jpg. Web. 16 Feb 2023. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/. ## Slide 22 Wikipedia contributors. “Letraset”. Wikipedia, The Free Encyclopedia, 26 Oct. 2023, https://en.wikipedia.org/wiki/Letraset. Web. 13 Feb. 2024. Wikipedia contributors. “Dry transfer”. Wikipedia, The Free Encyclopedia, 9 Oct. 2022, https://en.wikipedia.org/wiki/Dry_transfer. Web. 13 Feb. 2024. Smith, Martin. “Knightmare! Scenarios: 1. Chess in a Time of Letraset” The Streatham & Brixton Chess Blog, 8 June 2013, https://streathambrixtonchess.blogspot.com/2013/06/knightmare-scenarios-1-chess-in-time-of.html. Web. 13 Feb 2024. Fair use. Modified by converting to the WebP format. ## Slide 23 Font files on macOS 14.3 Sonoma, 13 Feb. 2024. ## Slide 25 WebSanity. “Font Weights: Names & CSS”. CodePen, 21 June 2016, http://codepen.io/websanity/full/xORwbV/. Web. 13 Jan. 2017. ## Slide 29 http://www.typophile.com/node/16843 https://en.wikipedia.org/wiki/Typeface https://en.wikipedia.org/wiki/Font ## Slide 30 Anonymous. “Poster for an auction held by Messrs. Barber & Son on behalf of the the Coalbrookdale Company in 1910”. Wikipedia, The Free Encyclopedia, 13 Nov 2019, https://en.wikipedia.org/wiki/File:Coalbrookdale_Company_auction_poster_-_1910.jpg. Web. 16 Feb 2023. Public domain. ## Slide 31 https://www.marksimonson.com/fonts/view/proxima-nova ## Slide 32 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 33 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 34 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 35 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 36 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 38 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 39 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 44 Width of 1100pt From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 45 40pt text From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 46 From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 54 https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 55 As to why you should avoid em or %, see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 58 I multiplied the sizes by 4 so they can be seen ## Slide 72 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 73 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 74 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 75 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 76 https://practicaltypography.com/times-new-roman.html https://en.wikipedia.org/wiki/Georgia_(typeface): The New York Times switching typeface ## Slide 77 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 78 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 81 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 82 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 83 “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 86 https://www.flickr.com/photos/seavoi/4812991976/in/pool-comicsans/ ## Slide 87 https://www.flickr.com/photos/gordhandasvb/2196308811/in/pool-comicsans/ ## Slide 88 https://www.flickr.com/photos/25315751@N04/4464757271/in/pool-comicsans/ ## Slide 89 https://www.flickr.com/photos/cliveandrews/3507417373/in/pool-comicsans/ ## Slide 90 https://www.flickr.com/photos/41002268@N03/5043228104/in/pool-comicsans/ ## Slide 91 https://www.flickr.com/photos/10569361@N00/5892792372/in/pool-comicsans/ ## Slide 92 https://www.flickr.com/photos/xxv/5446317470/in/pool-comicsans/ ## Slide 94 http://www.fontshop.com/fontlist/alternatives/comic_sans/ ## Slide 95 http://www.comicbookfonts.com ## Slide 96 http://www.comicbookfonts.com/Most-Popular-s/1843.htm ## Slide 97 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 98 Screenshot taken on 2 Apr. 2024 ## Slide 100 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 101 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 102 “JHA Bodoni Ritalic Font | Webfont & Desktop”. MyFonts, https://www.myfonts.com/collections/bodoni-ritalic-font-jha. Web. 30 Mar 2023. ## Slide 103 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 104 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 105 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 107 “Microsoft® ClearType® Font Collection”. Internet Archive. Ascender Corporation, https://web.archive.org/web/20081221072417/http://www.ascendercorp.com/pdf/MSClearTypeFontCollection.pdf. Web. 21 Sep 2023. ## Slide 108 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 109 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 110 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 112 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 113 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 115 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 116 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 117 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 118 http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 120 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 128 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 129 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 149 FIXME add font-kerning, font-optical-sizing, ## Slide 151 font-size plays a key role in creating focal points ## Slide 155 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 157 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. https://drafts.csswg.org/css-values-4/#lengths, Editor’s Draft, 15 July 2021 ## Slide 159 https://drafts.csswg.org/css-values-4/#absolute-lengths, Editor’s Draft, 15 July 2021 ## Slide 162 Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 163 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 164 WebSanity. “CSS: em vs rem”. CodePen, 17 Jan 2024, https://codepen.io/websanity/pen/NWbaBp?editors=1100. Web. 17 Jan 2024. ## Slide 165 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 166 WebSanity. “CSS: em vs rem”. CodePen, 17 Jan 2024, https://codepen.io/websanity/pen/NWbaBp?editors=1100. Web. 17 Jan 2024. ## Slide 167 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 168 For browser compatibility tables, see CSS Data Types ## Slide 169 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 170 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 171 https://drafts.csswg.org/css-values-4/#percentages, Editor’s Draft, 15 July 2021 ## Slide 173 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 174 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 175 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 176 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 177 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 178 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 179 http://codepen.io/websanity/pen/zldkg?editors=010 ## Slide 182 https://codepen.io/websanity/pen/YrmLPX?editors=1100 ## Slide 185 https://codepen.io/websanity/pen/VWaMRq?editors=1100 ## Slide 188 WebSanity. “Font Weights: Names & CSS”. CodePen, 21 June 2016, http://codepen.io/websanity/full/xORwbV/. Web. 13 Jan. 2017. ## Slide 189 http://www.w3.org/TR/css3-fonts/ ## Slide 197 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 205 http://codepen.io/websanity/pen/qvcKo?editors=010 ## Slide 208 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 209 http://codepen.io/websanity/pen/HEtsg ## Slide 211 Etemad, Elika J. [fantasai]. “8.1. First Line Indentation: the text-indent property”. World Wide Web Consortium. CSS Text Module Level 3, 20 Oct 2023, https://drafts.csswg.org/css-text/#text-indent-property. Web. 24 Oct 2023. MDN contributors. “text-indent”. MDN Web Docs, 2 Oct 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent. Web. 24 Oct 2023. ## Slide 212 WebSanity. “CSS: text-indent property”. CodePen, 11 June 2017, https://codepen.io/websanity/pen/KqzgOP?editors=1100. Web. 24 Oct 2023. ## Slide 213 https://en.wikipedia.org/wiki/File:Punctuation-Spaces.svg https://en.wikipedia.org/wiki/Whitespace_character ## Slide 214 https://en.wikipedia.org/wiki/Whitespace_character ## Slide 216 FIXME add https://www.w3.org/TR/css-ui-3/#text-overflow ## Slide 217 https://commons.wikimedia.org/wiki/File:Ampersand_Evolution.svg https://en.wikipedia.org/wiki/Ampersand ## Slide 222 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 223 WebSanity. http://codepen.io/websanity/pen/rbdsu. FIXME cite & more examples ## Slide 233 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 234 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 235 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 236 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 237 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 238 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 239 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 244 FIXME: Add example screenshot showing same text on macOS, Windows, iPhone, & Android ## Slide 246 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 247 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 248 https://chnsa.ws/198 takes you to https://gist.github.com/rsgranne/9d6811abad116f74575666c12093c08a ## Slide 251 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 252 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 253 https://chnsa.ws/24i takes you to https://gist.github.com/rsgranne/3f5c42ab5722c9dc14d1b768e1ffc176 ## Slide 258 Wikipedia contributors. “TrueType”. Wikipedia, The Free Encyclopedia, 17 Oct. 2023, https://en.wikipedia.org/wiki/TrueType. Web. 2 Nov. 2023. ## Slide 259 Wikipedia contributors. “OpenType”. Wikipedia, The Free Encyclopedia, 23 Oct. 2023, https://en.wikipedia.org/wiki/OpenType. Web. 2 Nov. 2023. ## Slide 260 Wikipedia contributors. “Embedded OpenType”. Wikipedia, The Free Encyclopedia, 13 Dec. 2021, https://en.wikipedia.org/wiki/Embedded_OpenType. Web. 2 Nov. 2023. ## Slide 261 Wikipedia contributors. “Web Open Font Format”. Wikipedia, The Free Encyclopedia, 27 Aug. 2023, https://en.wikipedia.org/wiki/Web_Open_Font_Format. Web. 2 Nov. 2023. Kew, Jonathan et al. “WOFF File Format 1.0”. World Wide Web Consortium (W3C), 13 Dec 2012, https://www.w3.org/TR/WOFF/Overview.html. Web. 2 Nov 2023. ## Slide 262 Wikipedia contributors. “Web Open Font Format”. Wikipedia, The Free Encyclopedia, 27 Aug. 2023, https://en.wikipedia.org/wiki/Web_Open_Font_Format. Web. 2 Nov. 2023. Levantovsky, Vladimir & Raph Levien. “WOFF File Format 2.0”. World Wide Web Consortium (W3C), 10 Mar 2022, https://www.w3.org/TR/WOFF2/. Web. 2 Nov 2023. ## Slide 263 Deveria, Alexis [@Fyrd]. “EOT - Embedded OpenType fonts”. Can I use…, 1 Nov 2023, https://caniuse.com/eot. Web. 2 Nov 2023. Deveria, Alexis [@Fyrd]. “TTF/OTF - TrueType and OpenType font support”. Can I use…, 1 Nov 2023, https://caniuse.com/ttf. Web. 2 Nov 2023. Deveria, Alexis [@Fyrd]. “WOFF - Web Open Font Format”. Can I use…, 1 Nov 2023, https://caniuse.com/woff. Web. 2 Nov 2023. Deveria, Alexis [@Fyrd]. “WOFF 2.0 - Web Open Font Format”. Can I use…, 1 Nov 2023, https://caniuse.com/woff2. Web. 2 Nov 2023. Deveria, Alexis [@Fyrd]. “SVG fonts”. Can I use…, 1 Nov 2023, https://caniuse.com/svg-fonts. Web. 2 Nov 2023. ## Slide 269 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 270 Caslon Antique & _P22 Franklin Caslon Regular ## Slide 277 “Font Library”. The Font Library, https://fontlibrary.org/en. Web. 19 Sep 2022. 1,392 font families ## Slide 278 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 279 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 280 The Google Fonts Team. “About Google Fonts”. Google Fonts, https://web.archive.org/web/20150201064844/http://www.google.com/fonts#AboutPlace:about ## Slide 281 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 283 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 284 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 285 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 286 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 289 See CSS - Typography - Google Fonts demo.markdown ## Slide 290 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300 ## Slide 291 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 292 https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300;400;700 ## Slide 293 “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 294 See CSS - Typography - Google Fonts demo.markdown ## Slide 297 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 298 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 299 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 300 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 301 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 302 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 303 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 304 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 305 https://en.wikipedia.org/wiki/Latin_Extended-A http://www.unicode.org/charts/PDF/U0100.pdf ## Slide 306 https://en.wikipedia.org/wiki/Latin_Extended-B http://www.unicode.org/charts/PDF/U0180.pdf ## Slide 307 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 308 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 309 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 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 311 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 312 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 313 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 322 FIXME ## Slide 325 29 typefaces on this slide ## Slide 326 30 typefaces on this slide ## Slide 327 20 typefaces on this slide 79 typefaces in totum ## Slide 329 Slides: https://granneman.com/downloads/web-dev/CSS-Typography-Condensed.pdf Notes: https://granneman.com/downloads/web-dev/CSS-Typography-Condensed.txt ## Slide 330 https://www.granneman.com/presentations/all-presentations ## Slide 334 http://webdesign.tutsplus.com/articles/web-design-basix-why-typography-matters--webdesign-1937 ## Slide 335 Franklin Caslon, based on works printed by Benjamin Franklin c. 1750 ## Slide 339 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 346 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 347 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 348 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 349 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 350 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 351 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 357 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 358 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 359 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 360 http://www.adobe.com/type/browser/classifications.html ## Slide 362 “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 363 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 367 I multiplied the sizes by 4 so they can be seen ## Slide 368 http://type-scale.com ## Slide 369 http://type-scale.com ## Slide 370 http://type-scale.com ## Slide 372 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 373 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 374 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 375 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 376 Georgia Pro, Avenir Next, & CMU Serif Upright Italic ## Slide 379 https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 380 Futura Std https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 381 Caxton Roman Book https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 382 Avenir Next https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 383 Didot https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 384 Source Serif Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 385 CMU Serif https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 386 Oswald https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 387 Adobe Caslon Pro https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/?mbid=synd_digg&ref=webdesignernews.com ## Slide 390 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 391 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 392 Ilene Strizver: https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 393 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 394 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 395 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 396 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 397 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 398 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 399 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 400 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 401 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 402 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 403 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 404 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 406 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 407 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 408 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 410 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 411 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 412 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 415 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 416 “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 417 “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 418 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 419 “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 420 “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 421 “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 422 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 423 “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 424 “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 425 “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 429 https://codepen.io/websanity/pen/wQMdwd?editors=1100 ## Slide 432 http://www.tlccreative.com/samples/OS_Fonts_by_TLC.pdf ## Slide 441 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. https://johndjameson.com/blog/making-sense-of-ch-units/ Unicode 0030 ## Slide 442 Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 443 writing-mode also specifies the order in which the rendering engine lays out block-level content Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 444 WebSanity. “CSS: ch unit for floated images”. CodePen, 9 Oct. 2018, https://codepen.io/websanity/pen/rqjNBe?editors=1100. Web. 18 Jan 2024. ## Slide 445 Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 446 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 448 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 449 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 450 Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 452 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. Unicode 6C34 CJK: Chinese/Japanese/Korean ## Slide 453 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024. ## Slide 454 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 455 For browser compatibility tables, see CSS Data Types ## Slide 456 MDN contributors. “”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024. Atkins, Tab & Elika J. Etemad / fantasai. “6.1.2. Viewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#viewport-relative-lengths. Web. 18 Jan 2024. ## Slide 457 Atkins, Tab & Elika J. Etemad / fantasai. “CSS Values and Units Module Level 4”. World Wide Web Consortium (W3C), 18 Dec. 2023, https://www.w3.org/TR/css-values-4/. Web. 18 Jan 2024. ## Slide 461 FIXME add font-feature-settings after font-variant ## Slide 466 Spectral: https://fonts.google.com/specimen/Spectral/?query=spectral Spectral SC: https://fonts.google.com/specimen/Spectral+SC/?query=spectral ## Slide 468 https://en.wikipedia.org/wiki/Small_caps Titling capitals: https://en.wikipedia.org/wiki/Titling_capitals ## Slide 469 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 470 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 471 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 472 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 476 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 478 https://caniuse.com/#feat=mdn-css_properties_font-variant https://caniuse.com/#feat=mdn-css_properties_font-variant_css_fonts_shorthand ## Slide 480 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 482 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch ## Slide 486 https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch ## Slide 487 https://caniuse.com/#search=font-stretch ## Slide 489 FIXME add tab-size, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-emphasis-skip?? ## Slide 492 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 493 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 494 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 495 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 496 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 497 https://codepen.io/websanity/pen/WNrrbrN?editors=1100 ## Slide 498 https://caniuse.com/#feat=css-textshadow ## Slide 501 https://codepen.io/websanity/pen/KqzgOP?editors=1100 ## Slide 513 FIXME ## Slide 515 FIXME ## Slide 517 FIXME add size, page-orientation, marks, bleed, page ## Slide 522 http://www.nlm.nih.gov/hmd/sowhatsnew/edifice.html ## Slide 525 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 527 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 532 As of 21 Nov 2022 ## Slide 534 FIXME add hyphens ## Slide 536 http://codepen.io/websanity/pen/ctIvl?editors=110 Safari ## Slide 537 http://codepen.io/websanity/pen/ctIvl?editors=110 Firefox ## Slide 547 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 549 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 550 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 551 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 552 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 553 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 554 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 555 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 556 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 557 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 558 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 559 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 561 https://duckduckgo.com/?q=best+google+fonts ## Slide 562 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 563 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 564 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 565 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 566 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 567 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 568 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 569 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 570 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 571 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 572 http://www.fonts.com/web-fonts/google ## Slide 574 http://www.fonts.com/web-fonts/google ## Slide 576 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 577 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 578 Adobe. “About | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/about. Web. 19 Sep 2022. ## Slide 579 “Fonts by Hoefler&Co.”. Hoefler&Co., 19 Sep 2022, https://www.typography.com/. Web. 19 Sep 2022. ## Slide 580 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 581 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 582 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 583 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 584 “Fonts for Print, Products and Screens | MyFonts”. MyFonts, https://www.myfonts.com/. Web. 19 Sep 2022. 130,000 fonts ## Slide 585 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 586 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 587 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 588 http://www.fontsquirrel.com ## Slide 592 FIXME add https://www.axis-praxis.org/specimens/__DEFAULT__ ## Slide 598 In this example I’ve shown 3, but there could be fewer or a lot more — it depends upon the typographer ## Slide 605 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 607 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 610 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 611 https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis ## Slide 612 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 614 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 615 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 617 https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing ## Slide 619 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 622 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 630 https://pypi.org/project/fonttools/ Also see https://github.com/fonttools/fonttools ## Slide 631 https://www.python.org/downloads/ https://brew.sh ## Slide 641 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 643 https://typography.guru/discover/6/, 2020-08-16