Why type matters

1. Type is the interface

Look at any application you used today and subtract the type. What is left is a few icons, some colored rectangles and perhaps a photograph. The labels, buttons, menus, error messages, prices, dates, names, instructions and the content itself are all text. On the web this is even more true than elsewhere: HTML is a text format, and most of what CSS styles is text. Interface design is, to a large degree, the design of text.

That makes type the one design decision a developer cannot avoid. A page with no images is still a page; a page with no type is nothing. Even a page that never names a font has made a choice: the browser's default, which on most systems is a serif at 16 pixels: usually Times New Roman or a look-alike, a face first made for The Times of London in 1932 and now quietly setting unstyled pages everywhere. system-ui is a choice too, and a good one for many interfaces, but it is still a choice with a voice, the voice of the operating system.

The course's slides make the point with a picture of an early Macintosh font menu: Chicago, Courier, Geneva, Helvetica, Palatino, Times and a dozen others, with Bold, Italic, Outline and Shadow below them. Ever since personal computers put a menu like that on every desk, choosing a typeface has been something everyone can do and few people are taught to do. The slide that follows shows what happens when nobody decides: a bar chart whose title is in one face, subtitle in another and labels in a third, and a 1990s web page with patterned backgrounds and type in every color available. Its caption is the deck's thesis in one line: bad typography is bad user experience.

Type sets the reading order

Type does more than carry words. It tells the reader what to read first. Another slide shows a card whose largest, boldest line says "You'll read this first." Below it, smaller and lighter, "Then you'll read this next." Then a paragraph of small body text explaining that it takes the most effort and most people will not read it unless they are interested, a highlighted aside, and finally, in the smallest type of all, "And, if we're lucky, you'll notice this." The card is a demonstration of its own content: size, weight and position decide the order, and the reader follows without thinking about it.

This is why typography is a usability matter and not only an aesthetic one. A page whose headings are barely larger than its body text makes the reader do the sorting. A form whose labels are lighter than its placeholder text invites the wrong answers. A dashboard where every number is the same size cannot say which one matters. Choosing and pairing, page 04 of this section, treats hierarchy in detail; for now the point is simply that the reader experiences the type before the content.

2. The font is a tone of voice

Speech carries two messages at once: the words, and the way they are said. "We need to talk" means something different whispered, shouted or sung. Type works the same way. The letters spell the words, and the shapes of the letters set the tone, often before the reader has consciously read anything. The deck states the rule as "It's not just what you write, but how you type treat it."

Its demonstration is a bad-news message, a headline and a line beneath it, set in typeface after typeface. Here are twelve of them, rendered from fonts installed on a Mac, since most of these faces cannot be served from this site:

Read down the list and notice how the message changes while the words stay put. In Times New Roman and Georgia it reads like a newspaper report: somebody accountable is telling you the facts. In Helvetica it is a corporate statement, calm and a little cold. Bodoni makes it elegant, which is odd for a loss. Impact turns it into a tabloid headline, and Rockwell into a notice pinned on a wall. Then the casual and decorative faces arrive, and the message falls apart. In Comic Sans or Marker Felt, an 87% drop sounds like a joke or a children's party; in Snell Roundhand, like an invitation to a wedding where something went badly wrong; in Papyrus and Trattatello, like a menu at a themed restaurant. Nobody would say that the words had changed. Everyone can hear that the message has.

None of these faces is bad. Snell Roundhand is the right voice for a wedding invitation, and Impact was designed for exactly the shouting headlines it is known for. The failures are mismatches between the voice and the message. That is the most useful way to think about choosing type: not "which font is good" but "which voice does this message need, for this reader, in this place."

A rough map of voices

Voices can be described along a few axes. Two of the most useful are formal to casual and quiet to loud. The map below places the twelve faces on them. It is one reading, not a measurement, and a reader from another culture or another decade might place some of them differently, but most people agree on the broad regions:

Other axes are worth having in mind: traditional to modern (Times New Roman against Futura), warm to cool (Georgia against Helvetica), human to mechanical (a script against a typewriter face). Weight and width move a face along the axes too. The deck's slide on weight and spacing lists the associations: bold reads as loud, important and authoritative; thin as clean, professional and sophisticated; italic as elegant or in motion; condensed as modern, urgent or hip. These are tendencies learned from the type around us, not laws, and they shift with time and place. They are strong enough, though, that ignoring them is a choice with consequences.

Try your own message

The demo sets a headline and a line of body copy in the section's eight free fonts, which this site can serve: Inter, Literata, Fraunces, Bitter, Recursive in its casual style, Caveat, Bungee and Atkinson Hyperlegible Next. Each card has a short note on what that face tends to say. Type your own words, or try the presets.

3. Trust, credibility, personality and boredom

The deck lists three things a font can do to a message, for better or worse:

• it can improve or ruin trustworthiness and credibility;
• it can improve or ruin personality, the sense that a human is speaking;
• it can cause or fight visual boredom, which affects how much of the message gets through at all.

Credibility

Whether type affects belief has been tested, informally but at scale. In 2012 the filmmaker Errol Morris put a quiz on the website of The New York Times. Readers were shown a passage by the physicist David Deutsch about the risk of an asteroid striking the Earth, and asked whether they agreed with it. What they did not know was that the passage appeared in one of six typefaces, chosen at random: Baskerville, Computer Modern, Georgia, Helvetica, Comic Sans and Trebuchet. About 45,000 people answered. Baskerville drew the most agreement, with Computer Modern second, and Comic Sans did worse. The effect was small: the psychologist David Dunning, who analyzed the results, put Baskerville's advantage at about 1.5%. Morris himself said it was not a true experiment, but the direction matches what the tone specimens above make obvious: some faces sound like they know what they are talking about.

The deck's summary slide puts the tendencies plainly. Serif faces tend to look more traditionally credible, because centuries of books, newspapers and legal documents have taught readers to associate them with authority. Sans serif faces tend to be the least intrusive and draw the least attention to themselves, which is why they dominate interfaces. Decorative faces tend to look goofier and less credible than plain ones, which is fine for a party flyer and a problem for a bank.

A well-known case shows how fast a mismatch is noticed. On 4 July 2012, CERN held the seminar at which its two large experiments announced the discovery of a particle consistent with the Higgs boson, one of the biggest results in physics in decades. The ATLAS presentation was set in Comic Sans, and a large share of the public reaction online was about the font rather than the physics. The science was not affected in the least. The attention it got was.

Personality

Credibility is not the only goal. A face with no personality can make a friendly product sound like a tax form, and a startup, a children's museum and a funeral home should not all sound the same. The deck's examples set three sentences side by side: a calm serif saying "The spectacle before us was indeed sublime," a plain sans describing a storm as "so beautiful yet terrific," and a hand-lettered face saying "A red flare silhouetted the jagged edge of a wing." Each would sound a little wrong in the others' type. Personality is the reason brands commission their own typefaces and the reason a well-chosen display face on a single headline can make a page feel like someone made it.

Boredom, and its opposite

Type can fail by being too uniform. A page where every line is the same size, weight and face gives the eye nothing to hold on to; readers skim it, or leave. The opposite failure, a new font for every element because the menu offers them, is more common among beginners, and Choosing and pairing explains why one or two families usually suffice.

The deck also includes a joke that has circulated widely online, the "font alignment chart" borrowed from role-playing games: Times New Roman as lawful good, Georgia as neutral good, Garamond as chaotic good, Arial as lawful neutral, Cambria as true neutral, Calibri as chaotic neutral, Courier as lawful evil, Comic Sans as neutral evil, and Papyrus, inevitably, as chaotic evil. It is a joke, but it works only because almost everyone has absorbed the same associations. That shared reading is what a typeface choice taps into, whether the person choosing knows it or not.

4. Small details, real consequences

A developer can get the code, the server, the security and the performance right and still have the work rejected because the type looks wrong. The author of this course makes this point from his own career: he has lost work over subtle reproduction details after getting all the technical parts right. The deck's slide on it ends with a warning to students to ignore these topics at their peril.

That can seem unfair until you look at it from the client's side. A client or a product manager usually cannot judge a database schema, a caching strategy or the quality of a test suite. They can see, instantly, that the heading in the build is not the heading in the design: the weight is a little heavier, the letters are a little wider, the line breaks in a different place, the quotation marks are straight instead of curly. They approved one thing and received another. To them, the visible details are the evidence of care, and when those are off they reasonably wonder what else is.

The details that cause this are mostly small and mostly typographic:

• a fallback font showing because the web font never loaded, or loaded only on the developer's machine, where it happened to be installed;
• a medium weight in the design and a regular weight on the page, or a bold that the browser faked;
• line height, letter spacing or size a little off, so text wraps differently and a button label breaks onto two lines;
• straight quotes and hyphens where the design had curly quotes and dashes;
• numbers in a table that do not line up because the face uses proportional figures;
• a name with an accent drawn in a different font from the rest of the word.

Each is a few minutes to fix once noticed, and each is found by looking, not by testing. The habit worth building is to compare the build with the design side by side, at the same size, on more than one device, before calling the work done. Later pages in this section explain the causes and the CSS for each item in the list.

5. Letters that must not be confused

Tone is about how type sounds. Legibility is more basic: whether each letter can be told from every other. In running text, readers recognize whole words from their shapes and context, and they are forgiving. Outside running text, they cannot be. The deck's slide on type challenges names two problems: lack of differentiation, where two characters are drawn almost alike, and optical confusion, where a combination of characters looks like a different one. A specimen slide from a type foundry lists the usual suspects; here they are in seven common faces:

The groups fail in different ways. In Helvetica, Arial and Gill Sans, capital I, lowercase l and often the digit 1 are a single vertical stroke, distinguished by a slight difference in height, if at all. In Futura, whose capital O is a near-perfect circle, the zero is barely narrower. Georgia avoids that confusion with old-style figures, but creates another: its zero is as short as a lowercase o. The pairs rn and m, cl and d depend on spacing, and at small sizes or with tight letter spacing they merge in almost any face. Verdana, designed for screens in the 1990s, gives the capital I crossbars and makes the zero narrow, and Menlo, a coding font, gives every one of these characters its own shape.

Where confusion costs something

In a novel, none of this matters much; the word "Illinois" is readable in any face. It matters wherever characters stand alone, without words around them to help:

• Code. A variable named l next to the literal 1, or O next to 0, is a bug waiting to be read wrong. Coding fonts exist for this reason, and they are why code samples on this site are set in a monospace face with distinct forms.
• Passwords, codes and keys. A temporary password, a gift card number, a license key or a two-factor recovery code is a string of characters with no meaning to guess from. If the reader has to retype it, every ambiguous character is a chance to fail. Systems that generate such codes often leave the confusable characters out entirely: Douglas Crockford's Base32 encoding, for example, excludes I and L because they can be confused with 1, and O because it can be confused with 0.
• Identifiers and data. Order numbers, flight codes, serial numbers, account IDs and the cells of a spreadsheet are read character by character, often aloud over the phone.
• Addresses. A link to rnicrosoft.com looks like a link to Microsoft in many sans serif faces at small sizes. Look-alike domains are a standard phishing technique, and type that blurs rn into m helps the attacker.

Case adds a trap of its own. A display face with only capitals, such as Bungee in the tone demo, draws a password like "lIl1O0o" as "LIL1000": the difference between capital and lowercase, which a password depends on, is simply gone. Text transformed with text-transform: uppercase has the same problem. For data that must be retyped, a face that keeps every character distinct is a functional requirement, not a style preference. The demo's "Confusable letters" preset shows the eight free fonts side by side; Atkinson Hyperlegible Next, designed for exactly this, is the one where every character in the row is different. The details, page 09 of this section, shows how to ask a font for a slashed zero and tabular figures in CSS.

6. Type decides who can read

The previous sections assumed readers who read comfortably. Many do not, and for them type is a matter of access rather than tone. Thin weights and light gray text fail readers with low vision first. Fonts marketed for dyslexia have mostly not been shown to improve reading, and many guides recommend letting readers adjust size and spacing instead. Older readers, small screens in sunlight, and readers who set their own fonts or zoom all need type that keeps working when conditions or settings change; WCAG protects that control by requiring that text can be resized to 200% (1.4.4), that real text be used rather than images of text (1.4.5), and that nothing breaks when line, letter and word spacing increase (1.4.12). Scripts matter as much as eyes: a font made for English may lack the letters of Polish or Turkish and almost certainly lacks Arabic or Chinese, and a missing character is drawn from another font or shown as an empty box that type designers call tofu, which is why Google named its Noto family, aimed at every script in Unicode, for "no more tofu." Even this section's Latin subset of Inter draws the Ł of Łódź from a fallback font. Choosing and pairing covers choosing type for every reader and language, including the story of Atkinson Hyperlegible; Type for people, page 10 of this section, will go further, and the CSS section's accessibility and internationalization parts cover the CSS side.

7. The developer as the bridge

On most teams, someone else chooses the type. A designer works in Figma, Sketch or a similar tool, picks families, sizes and weights, and hands over a design. The developer turns it into HTML and CSS that a browser renders on a reader's device. The developer is the bridge between the two, and it is a longer bridge than it looks, because a design tool and a browser are very different places for type. In the design tool the fonts are installed, the screen is known, the text is the text the designer typed, and nothing ever loads late. On the web, none of that is true.

What gets lost in translation

Five losses account for most of the difference between a design and its build. Each has a page later in the section; here they are in outline.

• Fallback fonts. If the web font is not available, the browser uses the next family in the stack, then the generic family at the end. The designer's machine has the font installed, so the mockup always looks right; the reader's may not. A font with no web license, a typo in a path, a blocked request or a slow load all produce the same result: the page in a typeface nobody chose.
• Wrong weights. A design that uses Regular, Medium and SemiBold needs three weights (or one variable font). If the CSS loads only Regular and Bold, a request for weight 500 quietly gets the nearest available, which by the CSS font matching rules is the regular 400. Nothing fails; the type is just lighter than designed.
• Faux bold and faux italic. When no bold or italic face exists, browsers synthesize one, smearing the regular outlines wider or slanting them. The result is legible but visibly clumsy, with thickened counters and slanted letters that are not true italics.
• Missing glyphs. A subset without the reader's characters draws them from another font, as with the Ł in Łódź, or as tofu if nothing has them.
• Metric differences. Two fonts at the same font-size can differ in width and in line height. When the fallback shows first or instead, lines break in different places, buttons wrap, and the page shifts when the real font arrives. Text the designer never saw, such as a longer German label or a real customer name, does the same.

Most of these are fixed in CSS by declaring every weight and style the design uses, and by ending each font stack with a similar fallback and a generic family. Fonts in CSS, page 05, covers stacks, weights and synthesis; Web fonts and performance, page 07, covers how fonts load, what the reader sees while they do, and fallbacks matched to the web font's metrics.

Questions worth asking at handoff

Being a good bridge is partly a matter of asking the right questions before writing CSS:

• Which families, and which exact weights and styles, does the design use? Can any be dropped?
• Do we have a license to serve these fonts on the web, and to subset them?
• What should the text look like if the font does not load? Which fallback is closest?
• Which languages and characters must the fonts cover, including names, currency symbols and punctuation?
• What are the sizes, line heights and spacing as a system, rather than as pixel values on one screen?
• What happens to this layout with longer text, larger text and a narrow screen?

The bridge runs both ways. Designers learn from developers what the web can and cannot do cheaply: that each extra weight is another download, that the reader can override the font size, that text in a different language may be a third longer. A developer who knows the vocabulary of type, from x-height to tracking, can have that conversation as a peer. That vocabulary is the subject of Anatomy and vocabulary, page 03.

8. The road map for this section

The Fonts section has ten pages, meant to be read in order but usable on their own. Together they aim to give an appreciation of type and its history, the vocabulary to discuss it, the CSS to use it, an eye for common misuse, and the understanding to bridge design and code.

1. Why type matters, this page: tone, trust, legibility, readers and the bridge role.
2. A short history of type: from movable type in China and Korea and Gutenberg's press, through metal, phototype and PostScript, to screen fonts, web fonts and variable fonts, and how each technology changed the letters.
3. Anatomy and vocabulary: typeface, font and family; glyphs and characters; baseline, x-height, counters and the em square; and how type is classified.
4. Choosing and pairing: legibility and readability, how many typefaces a design can carry, pairing, hierarchy and typographic systems.
5. Fonts in CSS: font stacks and generic families, system fonts, weight, style and width, faux bold and italic, and the font shorthand.
6. Size, spacing and measure: units for type, the reader's default size, line height, line length, type scales, fluid type and small screens.
7. Web fonts and performance: @font-face, formats, self-hosting and privacy, licensing, subsetting, font-display, preloading and layout shift.
8. Variable fonts: one file for many styles, axes, optical sizing, file size and fallbacks.
9. The details: numbers for text and tables, small caps, ligatures, punctuation, dingbats, icon fonts and emoji.
10. Type for people: accessibility, the reader's settings, and type across the world's scripts.

The section hints at the technical depth underneath type without becoming a course in type design. A font file is a small database of outlines, metrics and rules; text on screen passes through shaping, which picks and positions glyphs, and rasterization, which turns outlines into pixels, sometimes guided by hinting instructions written into the font. You will meet each of these where it explains something you can see, and A short history of type shows how much of today's web type was shaped by them.

9. A last word from Ryan Gosling

The deck ends its lesson with a slide titled "Finally listen to Ryan," and so does this page. On 30 September 2017, in the first episode of the 43rd season of Saturday Night Live, the host Ryan Gosling starred in a pre-recorded sketch called "Papyrus," written by Julio Torres. It is on the show's official YouTube channel: "Papyrus - SNL".

Gosling plays Steven, a man who cannot stop thinking about one thing: the logo of James Cameron's 2009 film Avatar was set in Papyrus, the rough, brush-lettered typeface from the tone specimens above, which ships with macOS and Microsoft Office. The sketch is shot like a psychological thriller. Steven lies awake. His wife grows exasperated. His therapist reminds him that Avatar came out years ago. A friend suggests, hopefully, that the logo was clearly modified, which only makes things worse. Steven is convinced the designer "just randomly selected Papyrus" from a menu, the way anyone picks a font, and the sketch ends with him outside the graphic designer's house, shouting through the window that he knows what the designer did.

The joke works because the audience recognizes the font, and that is the lesson underneath it. Millions of people who could not name a typeface recognized this one, knew what it had been used for, and felt that a blockbuster about an alien world should have sounded like something other than a spa brochure or a tea shop. Typefaces carry meaning that their users cannot switch off, and a choice made carelessly from a menu stays visible for as long as the thing it was used on. The sequel, "Papyrus 2," aired when Gosling hosted again in April 2024: Steven sees the logo for Avatar: The Way of Water, is relieved for a moment, and then realizes it is Papyrus again, in bold.

The deck's last slide asks students to "seriously stress about your fonts please." That is the right instinct, aimed well. The rest of this section is about turning the stress into knowledge: what type is, where it came from, how to choose it, and how to get it onto a reader's screen intact.

10. Summary