WEBVTT

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.