0:00 / 7:01
Chapter 1 · Text with nothing to draw
Chapters
Keyboard
- Space Play or pause
- ← → Back or ahead 5 seconds
- [ ] Previous or next chapter
- C Captions · M Mute · F Full screen
Transcript
Notes for class
- Watch beside Web fonts and performance. Its loading lab and fallback demo are the two demos in this film.
- The text in the film is drawn live in the fonts it names: Fraunces and Inter, served beside this page, and Arial and the system interface font from your own device. Where a device lacks Arial, a similar font stands in.
- The
font-displayperiods are the CSS Fonts Level 4 recommendations (block about 3 seconds; swap and fallback at most 100 milliseconds; fallback's swap period about 3 seconds). Browsers may use other timings. The waterfall timings are illustrative, not a measurement. - UC San Diego's home page was measured in Chrome on 27 October 2026: its
brix_sans.csswas 2,116,306 bytes, uncompressed, render-blocking, sent withCache-Control: no-store, and held six Brix Sans fonts as base64 text. This site's IBM Plex was measured on Image Performance the same day: seven files, 414,288 bytes on a first visit, none on the next. - The narration is a synthetic voice (ElevenLabs). Timing follows the narration track, so a recorded voice-over can replace it cue for cue using the transcript.
- With Reduce Motion turned on in the operating system, the film keeps its fades and drops the sliding motion.
- Set in Atkinson Hyperlegible Next and Mono, typefaces the Braille Institute designed for readers with low vision.
Take it with you
- Video (MP4, 1080p, 7:01, 11 MB), with English captions built in
- Captions: WebVTT or SRT, for Canvas or YouTube
- Narration script (plain text) with chapter timecodes, for recording your own voice-over