# From Metal to system-ui — narration script

Runtime 8:19. Timecodes are when each chapter starts; the film's animation is keyed to these cue times, so a recorded voice-over should keep each line near its timecode.

## 0:00 · A history in one line

- `0:01` These two lines of CSS are font stacks: lists of typefaces, tried in order. The browser uses the first one it has.
- `0:11` But read them from right to left, and they're also a history: one of serifs, one without. Each name was made for a different technology, and every technology changed what letters look like.

## 0:25 · Cast in metal

- `0:26` Start before any of these names, in Mainz, around fourteen fifty. Johannes Gutenberg's system cast letters in metal, each a separate piece called a sort, identical and reusable by the hundred.
- `0:40` His Bible's font had about two hundred ninety sorts: many more than the alphabet, because imitating handwriting took variant letters, joined letters and abbreviations. A font was never just an alphabet, and it still isn't.
- `0:58` The print shop's words are still in your CSS. A font was a casting. Capitals lived in the upper case, small letters in the lower case, nearer the hand. Strips of lead between the lines were leading: your line height. And the em was a square piece of type, as wide as the type was tall, named for the capital M.

## 1:23 · Times New Roman, 1932

- `1:23` Next name, from the right: Times New Roman. By the late eighteen hundreds, machines set the type. The Linotype, in use at a New York newspaper from eighteen eighty-six, cast a whole line at a time from a keyboard. Every typeface had to be made for the machine.
- `1:44` Times New Roman was made for a newspaper, The Times of London, and first used in nineteen thirty-two: narrow, to fit more words in a column, and sturdy enough for fast presses. It became the default serif of personal computers decades later, which is why it sits in so many stacks today.

## 2:07 · No serifs at all

- `2:07` Now the second line, the sans serifs. In eighteen sixteen, a London type founder, William Caslon the Fourth, showed capitals with no serifs at all. By the eighteen thirties, sans serifs were common enough to be sold as grotesques, a name that tells you what many people thought of them.
- `2:29` They were made to sell things. The industrial century wanted type that shouted across a street, on posters mixing a dozen faces at once. Plain letters started out as the loudest thing on the wall.

## 2:44 · A cause, then a style

- `2:45` In the nineteen twenties, sans serifs became a cause. Designers around the Bauhaus wanted letters built from simple shapes for an industrial world. Paul Renner's Futura, in nineteen twenty-seven, has an o that is nearly a circle. A year later, Eric Gill's Gill Sans took a more classical route.
- `3:08` After the Second World War, Swiss designers made it a style: grids, asymmetric layouts, and type meant to be neutral. Nineteen fifty-seven gave it two faces. Helvetica, named in Latin for Switzerland, went on to sign subways and airlines. And Univers, whose designer, Adrian Frutiger, numbered its styles on a grid of weight and width.
- `3:35` That grid is the idea behind CSS font weights, one hundred to nine hundred, and behind variable fonts: a family as a coordinate system. And it's the look of this course, too: its grid, its hairline rules and its plain sans serif all come from the Swiss style.

## 3:56 · Georgia, 1996

- `3:56` Then screens. A screen of the nineteen nineties had about seventy-two to ninety-six pixels per inch, so a letter at reading size was a handful of pixels tall. Outlines designed for print fell apart.
- `4:12` For Microsoft, Matthew Carter, whose career ran from cutting metal punches by hand to digital type, designed Verdana and Georgia in nineteen ninety-six, starting from the pixels themselves. Large lowercase letters, generous spacing, and letters like a lowercase l and a capital I drawn so they can't be confused.
- `4:39` Microsoft gave them away, with Arial, Times New Roman and a few others, as the Core fonts for the Web. For a decade, that short list was web typography. Designers wrote stacks of fonts the reader might already have, and hoped.
- `4:57` And Arial, from nineteen eighty-two, was drawn with Helvetica's exact character widths, so a document set in one could switch to the other without a single line breaking differently. That's why Arial sits next to Helvetica in so many stacks.

## 5:18 · The missing years

- `5:18` It wasn't for lack of a standard. CSS2, in nineteen ninety-eight, had @font-face: a way to send a font with the page. But browsers couldn't agree on a format, type foundries feared that a font on a web server was a font anyone could copy, and the next revision of CSS took the rule out.
- `5:40` So designers faked it. They exported headings as pictures, which looked right, but couldn't be selected, searched, translated or enlarged, and gave a screen reader nothing but alt text. Others drew text with Flash. Real, readable text might have happened but at the expense of accessibility.

## 6:02 · Literata, a web font

- `6:03` The thaw began in two thousand eight, when Safari loaded ordinary font files with at font face, and Firefox and Chrome followed. Services such as Typekit and Google Fonts made licensing simple, and a format of its own, WOFF, made a font file plainly meant for the web.
- `6:23` In a few years the web went from a dozen shared fonts to thousands. The question changed from "which font will they have?" to "how many should a page load, how fast, and who learns about the visit?"
- `6:38` Which brings us to the first name in our stack: Literata, commissioned by Google for reading books on a screen, and later released free for anyone to use. A web font, sent by the site itself.

## 6:54 · system-ui

- `6:54` And then the story turned around. Operating systems got typefaces of their own, tuned for screens and many languages: Segoe UI on Windows, Roboto on Android, San Francisco on Apple's devices. Each one is a sans serif, built to be clear at small sizes, heirs to that idea of neutral type.
- `7:17` By twenty seventeen, sites such as GitHub were setting their interfaces in the system font, and CSS gained a name for it: system-ui. It downloads nothing, because the reader already has it.
- `7:34` So web type has come full circle, with a difference. Twenty years ago, a page used the reader's fonts because it had no choice. Today it can choose them, because they are fast, private and familiar.

## 7:52 · Read your stack backwards

- `7:52` Every technology changed the letters: metal, machines, pixels and the web each left their mark on the type we use now.
- `8:03` A CSS font stack represents both that history and our philosophy of progressive enhancement: there is always something to fall back to, so users can read our words.