1
00:00:01,200 --> 00:00:07,978
These two lines of CSS are font stacks: lists of typefaces, tried in order.

2
00:00:08,189 --> 00:00:11,485
The browser uses the first one it has.

3
00:00:11,685 --> 00:00:18,115
But read them from right to left, and they're also a history: one of serifs, one without.

4
00:00:18,419 --> 00:00:25,545
Each name was made for a different technology, and every technology changed what letters look like.

5
00:00:26,245 --> 00:00:31,259
Start before any of these names, in Mainz, around fourteen fifty.

6
00:00:31,655 --> 00:00:40,616
Johannes Gutenberg's system cast letters in metal, each a separate piece called a sort, identical and reusable by the hundred.

7
00:00:40,816 --> 00:00:53,156
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.

8
00:00:53,181 --> 00:00:57,834
A font was never just an alphabet, and it still isn't.

9
00:00:58,035 --> 00:01:01,412
The print shop's words are still in your CSS.

10
00:01:01,553 --> 00:01:03,618
A font was a casting.

11
00:01:04,014 --> 00:01:10,096
Capitals lived in the upper case, small letters in the lower case, nearer the hand.

12
00:01:10,307 --> 00:01:15,065
Strips of lead between the lines were leading: your line height.

13
00:01:15,276 --> 00:01:22,809
And the em was a square piece of type, as wide as the type was tall, named for the capital M.

14
00:01:23,509 --> 00:01:27,455
Next name, from the right: Times New Roman.

15
00:01:27,851 --> 00:01:31,541
By the late eighteen hundreds, machines set the type.

16
00:01:31,752 --> 00:01:39,621
The Linotype, in use at a New York newspaper from eighteen eighty-six, cast a whole line at a time from a keyboard.

17
00:01:40,018 --> 00:01:44,149
Every typeface had to be made for the machine.

18
00:01:44,349 --> 00:01:59,011
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.

19
00:01:59,396 --> 00:02:07,265
It became the default serif of personal computers decades later, which is why it sits in so many stacks today.

20
00:02:07,965 --> 00:02:11,214
Now the second line, the sans serifs.

21
00:02:11,355 --> 00:02:19,747
In eighteen sixteen, a London type founder, William Caslon the Fourth, showed capitals with no serifs at all.

22
00:02:20,051 --> 00:02:29,209
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.

23
00:02:29,410 --> 00:02:31,579
They were made to sell things.

24
00:02:31,720 --> 00:02:39,706
The industrial century wanted type that shouted across a street, on posters mixing a dozen faces at once.

25
00:02:39,917 --> 00:02:44,617
Plain letters started out as the loudest thing on the wall.

26
00:02:45,317 --> 00:02:49,460
In the nineteen twenties, sans serifs became a cause.

27
00:02:49,764 --> 00:02:56,008
Designers around the Bauhaus wanted letters built from simple shapes for an industrial world.

28
00:02:56,405 --> 00:03:02,486
Paul Renner's Futura, in nineteen twenty-seven, has an o that is nearly a circle.

29
00:03:02,697 --> 00:03:08,047
A year later, Eric Gill's Gill Sans took a more classical route.

30
00:03:08,248 --> 00:03:17,105
After the Second World War, Swiss designers made it a style: grids, asymmetric layouts, and type meant to be neutral.

31
00:03:17,408 --> 00:03:20,913
Nineteen fifty-seven gave it two faces.

32
00:03:21,054 --> 00:03:26,613
Helvetica, named in Latin for Switzerland, went on to sign subways and airlines.

33
00:03:26,696 --> 00:03:35,205
And Univers, whose designer, Adrian Frutiger, numbered its styles on a grid of weight and width.

34
00:03:35,404 --> 00:03:47,105
That grid is the idea behind CSS font weights, one hundred to nine hundred, and behind variable fonts: a family as a coordinate system.

35
00:03:47,293 --> 00:03:56,277
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.

36
00:03:56,977 --> 00:03:58,484
Then screens.

37
00:03:58,510 --> 00:04:08,690
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.

38
00:04:08,993 --> 00:04:12,741
Outlines designed for print fell apart.

39
00:04:12,941 --> 00:04:27,985
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.

40
00:04:28,498 --> 00:04:39,200
Large lowercase letters, generous spacing, and letters like a lowercase l and a capital I drawn so they can't be confused.

41
00:04:39,401 --> 00:04:47,189
Microsoft gave them away, with Arial, Times New Roman and a few others, as the Core fonts for the Web.

42
00:04:47,586 --> 00:04:51,485
For a decade, that short list was web typography.

43
00:04:51,789 --> 00:04:57,719
Designers wrote stacks of fonts the reader might already have, and hoped.

44
00:04:57,920 --> 00:05:12,744
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.

45
00:05:12,885 --> 00:05:17,910
That's why Arial sits next to Helvetica in so many stacks.

46
00:05:18,611 --> 00:05:20,571
It wasn't for lack of a standard.

47
00:05:20,875 --> 00:05:28,445
CSS2, in nineteen ninety-eight, had @font-face: a way to send a font with the page.

48
00:05:28,445 --> 00:05:40,181
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.

49
00:05:40,380 --> 00:05:42,178
So designers faked it.

50
00:05:42,389 --> 00:05:54,218
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.

51
00:05:54,428 --> 00:05:56,586
Others drew text with Flash.

52
00:05:56,890 --> 00:06:02,693
Real, readable text might have happened but at the expense of accessibility.

53
00:06:03,393 --> 00:06:12,087
The thaw began in two thousand eight, when Safari loaded ordinary font files with at font face, and Firefox and Chrome followed.

54
00:06:12,484 --> 00:06:23,012
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.

55
00:06:23,212 --> 00:06:28,504
In a few years the web went from a dozen shared fonts to thousands.

56
00:06:28,715 --> 00:06:32,442
The question changed from "which font will they have?"

57
00:06:32,442 --> 00:06:38,791
to "how many should a page load, how fast, and who learns about the visit?"

58
00:06:38,990 --> 00:06:50,203
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.

59
00:06:50,287 --> 00:06:54,011
A web font, sent by the site itself.

60
00:06:54,712 --> 00:06:57,230
And then the story turned around.

61
00:06:57,278 --> 00:07:09,327
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.

62
00:07:09,677 --> 00:07:17,768
Each one is a sans serif, built to be clear at small sizes, heirs to that idea of neutral type.

63
00:07:17,967 --> 00:07:29,413
By twenty seventeen, sites such as GitHub were setting their interfaces in the system font, and CSS gained a name for it: system-ui.

64
00:07:29,542 --> 00:07:34,289
It downloads nothing, because the reader already has it.

65
00:07:34,489 --> 00:07:39,294
So web type has come full circle, with a difference.

66
00:07:39,783 --> 00:07:45,424
Twenty years ago, a page used the reader's fonts because it had no choice.

67
00:07:45,623 --> 00:07:52,204
Today it can choose them, because they are fast, private and familiar.

68
00:07:52,904 --> 00:08:02,956
Every technology changed the letters: metal, machines, pixels and the web each left their mark on the type we use now.

69
00:08:03,156 --> 00:08:15,112
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.