Font stacks with CSS variables

on YouTube ↗12m

" summary

A tiny CSS ponyfill implements the new generic family system-ui by declaring a root variable like --system-ui and replacing it with an explicit local font stack for UI fonts plus a separate stack for emoji, wired together with unicode-range rules so emoji only use emoji fonts. The repo provides platform-specific names (Linux has six emoji fonts), falls back to sans-serif, avoids web-font downloads and runtime JS side effects, and works in the browsers the author cares about though some emoji quirks remain.

AI-written summary · about

" chapters (4)

1. 0:00Intro
2. 1:40SystemUI
3. 3:30Why SystemUI
4. 6:40Demo

" related talks

• 10mHow we internationalized our typography stackFrancesco Cutolo · Config 2022
• 33mVariable Fonts and the Future of Web DesignJason Pamental · Web Unleashed 2017
• 21mCreate expressive and readable typography with variable fontsMichael Gilbert, Tobias Kunisch, Sehee Lee · Google I/O 2022
• 40mCSS Fonts 4Chris Lilley · FrontMania 2018
• 33mVariable Fonts: WTF?Bianca Berning · Pixel Pioneers Bristol 2022
• 20mDynamic Typographic Systems with Variable FontsJason Pamental · dotCSS 2019
• 36mVariable Fonts and Dynamic Typography with CSSJason Pamental · Web Unleashed 2018
• 42mTypography for FrontendsElena Ramírez · FrontFest 2020