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 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) Wikipedia contributors. “Jan Tschichold”. Wikipedia, The Free Encyclopedia, 30 Sep. 2024, https://en.wikipedia.org/wiki/Jan_Tschichold. Web. 20 Jan. 2025. Image: “Jan Tschichold”. ADC, 4 July 2014. Internet Archive, https://web.archive.org/web/20140704025520/http://adcglobal.org/hall-of-fame/jan-tschichold/. Web. 7 July 2020. Fair use. Modified by converting to the WebP format. ## 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 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 9 “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 10 Futura • Comic Sans MS • Lucida Handwriting • Perpetua Titling MT ## Slide 18 http://fontfeed.com/archives/font-or-typeface/ ## Slide 19 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 20 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 21 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 22 Gable, Gene. “Scanning Around With Gene: When Letraset Was King”. CreativePro Network, 17 Sep. 2010, https://creativepro.com/scanning-around-gene-when-letraset-was-king/. Web. 17 Oct. 2024. Fair use. Modified by converting to the WebP format. ## Slide 23 harleypeddie. “File:Compacta Bold Letraset transfers.jpg”. Wikipedia, The Free Encyclopedia, 3 Jan. 2011, https://en.wikipedia.org/wiki/File:Compacta_Bold_Letraset_transfers.jpg. Web. 16 Oct. 2024. Licensed CC BY 2.0: https://creativecommons.org/licenses/by/2.0/. Modified by converting to the WebP format. ## Slide 24 Font files on macOS 14.3 Sonoma, 13 Feb. 2024. ## Slide 26 WebSanity. “Font Weights: Names & CSS”. CodePen, 21 June 2016, http://codepen.io/websanity/full/xORwbV/. Web. 13 Jan. 2017. ## Slide 30 http://www.typophile.com/node/16843 https://en.wikipedia.org/wiki/Typeface https://en.wikipedia.org/wiki/Font ## Slide 31 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 32 https://www.marksimonson.com/fonts/view/proxima-nova ## 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 37 http://www.myfonts.com/fonts/ascender/georgia-pro/ ## Slide 39 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 40 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 45 Width of 1100pt From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 46 40pt text From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 47 From H.P. Lovecraft’s “The Shadow Out of Time”, 1936 ## Slide 55 https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 56 As to why you should avoid em or %, see https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ## Slide 59 I multiplied the sizes by 4 so they can be seen ## Slide 73 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 74 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 75 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 76 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 77 https://practicaltypography.com/times-new-roman.html https://en.wikipedia.org/wiki/Georgia_(typeface): The New York Times switching typeface ## Slide 78 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 79 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 82 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 83 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 84 “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 87 Voigts, Sean. “Comic Sans Meets Ambulance”. Flickr, 20 July 2020, https://www.flickr.com/photos/seavoi/4812991976/in/pool-comicsans/. Web. 19 Jan. 2025. Fair use. ## Slide 88 Gordhandas, Vineet. “IMG_1282”. Flickr, 16 Jan. 2008, https://www.flickr.com/photos/gordhandasvb/2196308811/in/pool-comicsans/. Web. 19 Jan. 2025. Fair use. ## Slide 89 Cooper, Colt. “Sex Offender Notice in Comic Sans”. Flickr, 26 Mar. 2010, https://www.flickr.com/photos/25315751@N04/4464757271/in/pool-comicsans/. Web. 19 Jan. 2025. Fair use. ## Slide 90 Clive Andrews. “The most inappropriate use of Comic Sans ever...”. Flickr, 6 May 2009, https://www.flickr.com/photos/cliveandrews/3507417373/in/pool-comicsans/. Web. 19 Jan. 2025. Fair use. ## Slide 91 Carbon Arc. “Multiple whammy?”. Flickr, 2 Oct. 2010, https://www.flickr.com/photos/41002268@N03/5043228104/in/pool-comicsans/. Web. 19 Jan. 2025. Licensed CC BY-NC-SA 2.0: https://creativecommons.org/licenses/by-nc-sa/2.0/. ## Slide 92 dialzero. “law offices of comic sans”. Flickr, 2 July 2011, https://www.flickr.com/photos/10569361@N00/5892792372/in/pool-comicsans/. Web. 19 Jan. 2025. Fair use. ## Slide 93 Pomeroy, Steve. “Antique comic sans”. Flickr, 14 Feb. 2011, https://www.flickr.com/photos/xxv/5446317470/in/pool-comicsans/. Web. 19 Jan. 2025. Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/. ## Slide 95 Monotype. “Comic sans alternative Fonts”. MyFonts, https://www.myfonts.com/pages/tags/comic%20sans%20alternative-fonts?queryId=ccda254575d1beafcc1c9527f1a7f919&eventName=&index=universal_search_data&objectIDs=&positions=2&inline=true&userquery=comic%20sans. Web. 19 Jan 2025. ## Slide 96 Monotype. “Comic sans alternative Fonts”. MyFonts, https://www.myfonts.com/pages/tags/comic%20sans%20alternative-fonts?queryId=ccda254575d1beafcc1c9527f1a7f919&eventName=&index=universal_search_data&objectIDs=&positions=2&inline=true&userquery=comic%20sans. Web. 19 Jan 2025. ## Slide 97 “Comicraft - The World’s Greatest Comic Book Fonts”. Comic Book Fonts, http://www.comicbookfonts.com. Web. 30 July 2014. ## Slide 98 “Most Popular”. Comic Book Fonts,http://www.comicbookfonts.com/Most-Popular-s/1843.htm. Web. 30 July 2014. ## Slide 99 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 100 Screenshot taken on 2 Apr. 2024 ## Slide 102 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 103 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 104 “JHA Bodoni Ritalic Font | Webfont & Desktop”. MyFonts, https://www.myfonts.com/collections/bodoni-ritalic-font-jha. Web. 30 Mar 2023. ## Slide 105 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 106 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 107 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 109 “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 110 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 111 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 112 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 114 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 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 117 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 118 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 119 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 120 http://www.zachleat.com/web/font-family-reunion/ https://github.com/zachleat/font-family-reunion/blob/master/artifacts/font-families-notes.txt ## Slide 122 http://www.zachleat.com/web/font-family-reunion/ http://fontfamily.io https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface) ## Slide 130 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 131 Google. “Bungee Spice - Google Fonts”. Google Fonts, https://fonts.google.com/specimen/Bungee+Spice. Web. 19 Sep 2022. ## Slide 151 FIXME add font-kerning, font-optical-sizing, ## Slide 153 font-size plays a key role in creating focal points ## Slide 157 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 159 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 161 https://drafts.csswg.org/css-values-4/#absolute-lengths, Editor’s Draft, 15 July 2021 ## Slide 164 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 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 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 168 WebSanity. “CSS: em vs rem”. CodePen, 17 Jan 2024, https://codepen.io/websanity/pen/NWbaBp?editors=1100. Web. 17 Jan 2024. ## Slide 169 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 170 For browser compatibility tables, see CSS Data Types ## Slide 171 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 172 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 173 https://drafts.csswg.org/css-values-4/#percentages, Editor’s Draft, 15 July 2021 ## Slide 175 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 176 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 177 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 178 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 179 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 180 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 181 WebSanity. “CSS: text sizing & scaling”. CodePen, 4 Aug. 2014, http://codepen.io/websanity/pen/zldkg?editors=010. Web. 20 Jan. 2025. ## Slide 184 WebSanity. “CSS: line-height property with different values”. CodePen, 26 Oct. 2016, https://codepen.io/websanity/pen/YrmLPX?editors=1100. Web. 20 Jan. 2025. ## Slide 187 WebSanity. “CSS: font-style property”. CodePen, 11 June 2017, https://codepen.io/websanity/pen/VWaMRq?editors=1100. Web. 20 Jan. 2025. ## Slide 190 WebSanity. “Font Weights: Names & CSS”. CodePen, 21 June 2016, http://codepen.io/websanity/full/xORwbV/. Web. 13 Jan. 2017. ## Slide 191 Daggett, John et al. “CSS Fonts Module Level 3: W3C Recommendation”. World Wide Web Consortium (W3C), 20 Sep. 2018, http://www.w3.org/TR/css3-fonts/. Web. 20 Jan. 2025. ## Slide 199 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 207 WebSanity. “CSS: text-decoration property”. CodePen, 11 May 2014, http://codepen.io/websanity/pen/qvcKo?editors=010. Web. 20 Jan. 2025. ## Slide 210 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 211 http://codepen.io/websanity/pen/HEtsg ## Slide 213 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 214 WebSanity. “CSS: text-indent property”. CodePen, 11 June 2017, https://codepen.io/websanity/pen/KqzgOP?editors=1100. Web. 24 Oct 2023. ## Slide 215 Wikipedia contributors. “Whitespace character”. Wikipedia, The Free Encyclopedia, 6 Jan. 2025, https://en.wikipedia.org/wiki/Whitespace_character. Web. 20 Jan. 2025. User:H3xx. “File:Punctuation-Spaces.svg”. Wikipedia, The Free Encyclopedia, 8 August. 2011, https://en.wikipedia.org/wiki/File:Punctuation-Spaces.svg. Web. 20 Jan. 2025. Licensed CC BY-SA 3.0: https://creativecommons.org/licenses/by-sa/3.0/. ## Slide 216 Wikipedia contributors. “Whitespace character”. Wikipedia, The Free Encyclopedia, 6 Jan. 2025, https://en.wikipedia.org/wiki/Whitespace_character. Web. 20 Jan. 2025. ## Slide 218 FIXME add https://www.w3.org/TR/css-ui-3/#text-overflow ## Slide 219 Wikipedia contributors. “Ampersand”. Wikipedia, The Free Encyclopedia, 13 Jan. 2025, https://en.wikipedia.org/wiki/Ampersand. Web. 20 Jan. 2025. Javi C. S. (PNG) & Gian Luca Ruggero (SVG). “File:Ampersand Evolution.svg”. Wikipedia, The Free Encyclopedia, 13 Feb. 2008, https://commons.wikimedia.org/wiki/File:Ampersand_Evolution.svg. Web. 20 Jan. 2025. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 224 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 225 WebSanity. “CSS: text-align property”. CodePen, 31 Jan. 2022, http://codepen.io/websanity/pen/rbdsu. Web. 20 Jan. 2025. ## Slide 234 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 235 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 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 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 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 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 240 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 245 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 246 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 247 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 248 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 249 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 250 Klammer, Dan. “system-fonts/modern-font-stacks: System font stack CSS organized by typeface classification for every modern operating system”. Modern Font Stacks, 31 July 2024, https://github.com/system-fonts/modern-font-stacks#old-style. Web. 14 Sep 2024. ## Slide 251 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 252 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 253 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 254 Klammer, Dan. “Modern Font Stacks”. Modern Font Stacks, 31 July 2024, https://modernfontstacks.com/. Web. 14 Sep 2024. ## Slide 255 FIXME: Add example screenshot showing same text on macOS, Windows, iPhone, & Android ## Slide 257 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 258 https://getbootstrap.com/docs/5.1/content/reboot/#native-font-stack ## Slide 259 https://chnsa.ws/198 takes you to https://gist.github.com/rsgranne/9d6811abad116f74575666c12093c08a ## Slide 262 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 263 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 264 https://chnsa.ws/24i takes you to https://gist.github.com/rsgranne/3f5c42ab5722c9dc14d1b768e1ffc176 ## Slide 267 Gilbertson, David. “Web fonts: when you need them, when you don’t”. Medium, 13 Aug. 2017, https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae. Web. 17 Jan. 2018. Fair use. Modified by converting to the WebP format. ## Slide 269 Wikipedia contributors. “TrueType”. Wikipedia, The Free Encyclopedia, 17 Oct. 2023, https://en.wikipedia.org/wiki/TrueType. Web. 2 Nov. 2023. ## Slide 270 Wikipedia contributors. “OpenType”. Wikipedia, The Free Encyclopedia, 23 Oct. 2023, https://en.wikipedia.org/wiki/OpenType. Web. 2 Nov. 2023. ## Slide 271 Wikipedia contributors. “Embedded OpenType”. Wikipedia, The Free Encyclopedia, 13 Dec. 2021, https://en.wikipedia.org/wiki/Embedded_OpenType. Web. 2 Nov. 2023. ## Slide 272 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 273 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 274 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 280 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 281 Caslon Antique & _P22 Franklin Caslon Regular ## Slide 288 “Font Library”. The Font Library, https://fontlibrary.org/en. Web. 19 Sep 2022. 1,392 font families ## Slide 289 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 290 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 291 The Google Fonts Team. “About Google Fonts”. Google Fonts, https://web.archive.org/web/20150201064844/http://www.google.com/fonts#AboutPlace:about ## Slide 292 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 294 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 295 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 296 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 297 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 300 See CSS - Typography - Google Fonts demo.markdown ## Slide 301 “Oswald”. Google Fonts, https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300. Web. 25 May 2020. ## Slide 302 “Oswald”. Google Fonts, https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300. Web. 25 May 2020. ## Slide 303 “Oswald”. Google Fonts, https://fonts.google.com/specimen/Oswald?query=oswald&sidebar.open&selection.family=Oswald:wght@300. Web. 25 May 2020. ## Slide 304 “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 305 See CSS - Typography - Google Fonts demo.markdown ## Slide 308 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 309 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 310 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 311 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. Web. 06 Sep 2023. ## Slide 312 Ranftl, Mario [majodev]. “google webfonts helper”. google webfonts helper, 1 June 2023, https://gwfh.mranftl.com/fonts. 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 314 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 315 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 316 https://en.wikipedia.org/wiki/Latin_Extended-A http://www.unicode.org/charts/PDF/U0100.pdf ## Slide 317 https://en.wikipedia.org/wiki/Latin_Extended-B http://www.unicode.org/charts/PDF/U0180.pdf ## Slide 318 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 319 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 320 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 321 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 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 323 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 324 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 333 FIXME ## Slide 336 29 typefaces on this slide ## Slide 337 30 typefaces on this slide ## Slide 338 20 typefaces on this slide 79 typefaces in totum ## Slide 340 Slides: https://granneman.com/downloads/web-dev/CSS-Typography-Condensed.pdf Notes: https://granneman.com/downloads/web-dev/CSS-Typography-Condensed.txt ## Slide 341 https://www.granneman.com/presentations/all-presentations ## Slide 345 http://webdesign.tutsplus.com/articles/web-design-basix-why-typography-matters--webdesign-1937 ## Slide 346 Franklin Caslon, based on works printed by Benjamin Franklin c. 1750 ## Slide 350 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 357 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 358 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 359 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 360 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 361 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 362 https://www.indiantypefoundry.com/fonts/recia/glyphs#details ## Slide 368 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 369 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 370 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 371 http://www.adobe.com/type/browser/classifications.html ## Slide 373 “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 374 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 378 I multiplied the sizes by 4 so they can be seen ## Slide 379 http://type-scale.com ## Slide 380 http://type-scale.com ## Slide 381 http://type-scale.com ## Slide 383 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 384 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 385 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 386 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 387 Georgia Pro, Avenir Next, & CMU Serif Upright Italic ## Slide 390 Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 391 Futura Std Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 392 Caxton Roman Book Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 393 Avenir Next Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 394 Didot Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 395 Source Serif Pro Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 396 CMU Serif Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 397 Oswald Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 398 Adobe Caslon Pro Schott, Ben. “The Weird Words and Phrases Designers Use to Test Their Fonts”. Wired, 8 May 2017, https://www.wired.com/2017/05/weird-words-phrases-designers-use-test-fonts/. Web. 27 July 2024. ## Slide 401 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 402 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 403 Ilene Strizver: https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 404 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 405 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 406 https://creativepro.com/helvetica-vs-arial-difference/ ## Slide 407 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 408 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 409 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 410 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 411 https://en.wikipedia.org/wiki/Georgia_(typeface) ## Slide 412 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 413 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 414 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 415 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 417 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 418 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 419 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 421 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 422 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 423 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 426 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 427 “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 428 “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 429 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 430 “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 431 “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 432 “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 433 “Adobe Fonts”. GitHub, 20 Jan 2023, https://github.com/adobe-fonts. Web. 11 Mar 2023. ## Slide 434 “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 435 “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 436 “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 440 https://codepen.io/websanity/pen/wQMdwd?editors=1100 ## Slide 443 http://www.tlccreative.com/samples/OS_Fonts_by_TLC.pdf ## 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. https://johndjameson.com/blog/making-sense-of-ch-units/ Unicode 0030 ## Slide 453 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 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 455 WebSanity. “CSS: ch unit for floated images”. CodePen, 9 Oct. 2018, https://codepen.io/websanity/pen/rqjNBe?editors=1100. Web. 18 Jan 2024. ## Slide 456 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 457 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 459 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 460 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 461 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 463 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 464 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 465 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 466 For browser compatibility tables, see CSS Data Types ## Slide 467 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 468 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 472 FIXME add font-feature-settings after font-variant ## Slide 477 Spectral: https://fonts.google.com/specimen/Spectral/?query=spectral Spectral SC: https://fonts.google.com/specimen/Spectral+SC/?query=spectral ## Slide 479 https://en.wikipedia.org/wiki/Small_caps Titling capitals: https://en.wikipedia.org/wiki/Titling_capitals ## Slide 480 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps ## Slide 481 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 482 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 483 https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric ## Slide 487 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 489 https://caniuse.com/#feat=mdn-css_properties_font-variant https://caniuse.com/#feat=mdn-css_properties_font-variant_css_fonts_shorthand ## Slide 491 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 493 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch ## Slide 497 https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch ## Slide 498 https://caniuse.com/#search=font-stretch ## Slide 500 FIXME add tab-size, text-emphasis, text-emphasis-color, text-emphasis-position, text-emphasis-style, text-emphasis-skip?? ## Slide 503 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 504 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 505 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 506 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 507 https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow ## Slide 508 https://codepen.io/websanity/pen/WNrrbrN?editors=1100 ## Slide 509 https://caniuse.com/#feat=css-textshadow ## Slide 512 https://codepen.io/websanity/pen/KqzgOP?editors=1100 ## Slide 524 FIXME ## Slide 526 FIXME ## Slide 528 FIXME add size, page-orientation, marks, bleed, page ## Slide 533 http://www.nlm.nih.gov/hmd/sowhatsnew/edifice.html ## Slide 536 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 538 http://safalra.com/web-design/typography/web-safe-fonts-myth/ ## Slide 543 As of 21 Nov 2022 ## Slide 545 FIXME add hyphens ## Slide 547 http://codepen.io/websanity/pen/ctIvl?editors=110 Safari ## Slide 548 http://codepen.io/websanity/pen/ctIvl?editors=110 Firefox ## Slide 558 Google. “Browse Fonts - Google Fonts”. Google Fonts, https://fonts.google.com/. Web. 19 Sep 2022. ## Slide 560 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 561 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 562 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 563 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 564 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 565 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 566 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 567 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 568 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 569 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 570 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 572 https://duckduckgo.com/?q=best+google+fonts ## Slide 573 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 574 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 575 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 576 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 577 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 578 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 579 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 580 Shoaf, Jeremiah. “What’s Trending in Type - Typewolf”. Typewolf, 31 Oct 2016, https://www.typewolf.com. Web. 31 Oct 2022. ## Slide 581 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 582 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 583 http://www.fonts.com/web-fonts/google ## Slide 585 http://www.fonts.com/web-fonts/google ## Slide 587 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 588 Adobe. “Search fonts | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/fonts. Web. 19 Sep 2022. ## Slide 589 Adobe. “About | Adobe Fonts”. Adobe Fonts, https://fonts.adobe.com/about. Web. 19 Sep 2022. ## Slide 590 “Fonts by Hoefler&Co.”. Hoefler&Co., 19 Sep 2022, https://www.typography.com/. Web. 19 Sep 2022. ## Slide 591 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 592 “Cloud & Self Hosted | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/webfonts. Web. 19 Sep 2022. ## Slide 593 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 594 “Download Gotham Fonts | Fonts by Hoefler&Co.”. Hoefler&Co., https://www.typography.com/fonts/gotham/styles/gothamcomplete. Web. 19 Sep 2022. ## Slide 595 “Fonts for Print, Products and Screens | MyFonts”. MyFonts, https://www.myfonts.com/. Web. 19 Sep 2022. 130,000 fonts ## Slide 596 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 597 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 598 “Professional Font Management for Businesses”. Monotype Fonts, https://www.monotypefonts.com/a/content/plans-individuals. Web. 19 Sep 2022. ## Slide 599 http://www.fontsquirrel.com ## Slide 603 FIXME add https://www.axis-praxis.org/specimens/__DEFAULT__ ## Slide 609 In this example I’ve shown 3, but there could be fewer or a lot more — it depends upon the typographer ## Slide 616 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 618 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 621 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 622 https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis ## Slide 623 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 625 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 626 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 628 https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing ## Slide 630 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 633 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide ## Slide 641 https://pypi.org/project/fonttools/ Also see https://github.com/fonttools/fonttools ## Slide 642 https://www.python.org/downloads/ https://brew.sh ## Slide 652 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 654 https://typography.guru/discover/6/, 2020-08-16