Death to Icon Fonts

on YouTube ↗31m

" summary

One in ten people have dyslexia and changing to a dyslexic font breaks icon fonts into empty boxes, removing logos, stars and other cues; screen readers sometimes read glyphs as “black star favorite” or as gibberish. Opera Mini (~2.8M users) and iOS ad-blockers can omit web fonts. SVGs with <title>/<desc>, inline sprites or img+role restore accessibility, multicolor and animation, and GitHub switches to SVG; performance is noted as slower (~SVG vs icon fonts 5× claim) but fallbacks like PNGs or grunticon work.

AI-written summary · about

" chapters (16)

1. 0:00Introduction and personal story
2. 5:22Icon fonts breaking dyslexic fonts
3. 7:26Screen reader accessibility issues
4. 10:59Opera Mini and emerging markets
5. 12:25Private use area and mobile bugs
6. 13:51iOS 9 content blocker impact
7. 14:59Pros and cons of icon fonts
8. 16:01SVG as the better alternative
9. 22:20Using SVGs in practice
10. 23:23SVG fallbacks and support
11. 24:27Icon fonts vs SVGs performance
12. 24:47Live demo comparison
13. 26:57GitHub’s switch to SVGs
14. 27:40Context matters for icons
15. 28:46Building the web for everyone
16. 29:55Q&A session

" related talks

• 39mThe Death of Icon Fonts Component Based SVG Icon SystemsKristie Giles · UtahJS Conf 2017
• 56mIcons and the Web: Symbols of the Modern AgeTim G. Thomas · NDC London 2019
• 47mThe Scoville Scale of Web Font Loading OpinionsZach Leatherman · beyond tellerrand Düsseldorf 2019
• 53mDealing with High Contrast Mode, Custom Stylesheets, and Icon FontsHans Hillen · Inclusive Design 24 2014
• 46mResponsive TypographyJason Pamental · FITC Web Unleashed 2014
• 31mVariable Fonts & ReadabilityDamien Senger · CSSConf Budapest 2019
• 51mTypography on the WebJohn Daggett · CSS Day 2015
• 46mRESPONSIBLE RESPONSIVE TYPOGRAPHY: A CRASH-COURSE ON VARIABLE FONTS AND ACCESSIBILITYDamien Senger · jsday 2020