What is typography?
Choose an answer, then check it.
UX/UI Design · Foundations
Typography
On this page 9 sections
In 30 seconds
typography The art and technique of arranging type so that written language is legible, readable, and appealing. Full entry → is the art and technique of arranging type so that written language is legible, readable, and appealing. A typeface The design of a set of letters, including the shapes and style of the whole alphabet. Full entry → is the design of a set of letters; a font A specific style or weight within a typeface, such as regular, bold, or italic. Full entry → is one specific style or weight of that design. Type comes in broad families — serif A small finishing stroke at the end of a letter's main stroke; also, the family of typefaces that carry these strokes. Full entry →, sans-serif A typeface whose letters have no finishing strokes at the ends of their main strokes. Full entry →, monospace A typeface in which every character has the same width, often used for code and data. Full entry →, and display — and readable text depends on size, line length, line height, and contrast. Headings and body text use size and weight to set hierarchy Arranging elements according to importance so readers know where to look first. Full entry →. Good typography goes unnoticed; bad typography is impossible to ignore.
Why this matters
Every screen you read — websites, apps, signs, tickets — is set in type, and type that is hard to read quietly costs attention, time, and trust. Reading on screens is different from reading in print: people scan, skim, and leave quickly, so text has to be easy to enter. Typography is also expressive: size, weight, and letterforms set a tone before a single word is understood, which is why brands and news sites look the way they do. Knowing how type works lets you notice why some things are effortless to read and others exhausting, and it gives you a vocabulary every design team shares.
The college version
What typography is
Typography is the art and technique of arranging type so that written language is legible, readable, and appealing. That working definition comes from the Interaction Design Foundation, an independent design-education organization. Three words in it carry the weight. Legible: readers can see and tell apart the individual characters — an 'l' that could be mistaken for a '1' is a legibility The quality of being able to see and distinguish individual characters in text. Full entry → failure. Readable: the words and sentences are easy to take in, which depends partly on the writing itself and partly on how the text is set. Appealing: type also looks like something; it sets a tone before a single word registers. A wedding invitation set in a stark technical letterform feels wrong even if every character is crisp. Typography is the discipline of making those three things happen at once: the shape of text, chosen and arranged on purpose rather than left to chance.
Typeface versus font
The two words are often used as if they meant the same thing, and the distinction is simple once you see it. A typeface is the design of a set of letters: the shapes themselves, the personality of the whole alphabet. A font is a specific style or weight within that design. The Interaction Design Foundation puts it plainly: you choose a typeface, and you use a font. If the typeface is the family, the fonts are its members — the regular weight, the bold weight, the italic style, the extra-large display cut. Everyday speech says 'font' for both, and nobody is harmed, but design teams keep the pair straight, because one typeface can be used through several fonts — a light font for captions, a bold font for headlines — and still look entirely consistent.
The four families of type
Most typefaces fall into broad families. Serif typefaces carry small finishing strokes — the 'feet' — at the ends of the main strokes of letters. They grew out of carved lettering and are the traditional faces of books and newspapers, where the feet are thought to guide the eye along the line. Sans-serif typefaces drop those strokes for cleaner, more uniform letters; they are the default for much of the web and for interfaces, where simple shapes hold up well at small sizes. Monospace typefaces give every character the same width, so columns of digits and lines of code line up neatly; they are the standard for programming editors and terminal screens. Display typefaces are designed for large sizes — headlines, posters, logos — where their personality shines and their quirks would be exhausting in long paragraphs. None of the four is 'better' than the others; each answers a different job, and experienced designers mix them deliberately.
What makes text readable
Whether text is easy to read comes down to a handful of settings designers control. Size: body text on screens should be comfortably large — the U.S. Web Design System recommends at least an effective size of about 16 px for body copy — and readers should be able to make it larger. Line length: a line should be neither too short nor too long; the U.S. Web Design System's guidance is 45 to 90 characters per line, with about 66 characters a good target for long texts. Lines that stretch across a wide monitor force the eye on a long journey back to the left edge; lines that are too short break the text into awkward fragments. Line height: the space between lines, set as a multiple of the font size; longer texts need more of it, so the eye can find the next line without getting lost. Contrast: the text must stand out clearly from its background — the exact requirements are a WCAG topic covered elsewhere in this course, but the principle of dark-enough text on a plain enough background belongs to typography. Screens also changed reading itself: on an average page visit, people read only about 28 percent of the words and usually scan instead of reading in full, so clear headlines and short, scannable paragraphs do real work.
Hierarchy, and the honest framing
The last job of type is to show what matters. Headings and body text form a system: headings are larger and often bolder, body text is smaller and lighter, and the difference tells the reader at a glance what a page is organized around. The Interaction Design Foundation defines hierarchy as the principle of arranging elements according to importance, with font size, weight, and spacing among the levers. A page where every word is the same size gives no entry point; a page where headings clearly outweigh the body lets the reader skim, orient, and dive in where they choose. The full study of how attention moves across a screen belongs to the visual hierarchy lesson in this course; here the point is that type itself — size and weight — is the first and most reliable tool for building it. Good type, in the end, is invisible: Beatrice Warde, a twentieth-century writer and scholar of typography, argued in her famous essay 'The Crystal Goblet' that type should be transparent, like a crystal goblet, so the reader notices the wine — the words — and not the glass. Typography is noticed mainly when it is bad.
Eli explains
The same idea, in plain words
Explain it like I’m 10
Typography is the shape of text. It is how letters are drawn, how big they are, how far apart the lines sit, and how the words are arranged on the page or screen. Good typography makes text easy to read without you noticing the letters at all. Type comes in families: letters with little feet (serif), letters without feet (sans-serif), letters that all have the same width (monospace), and fancy letters for big headlines (display). To keep text readable, designers watch four things: size, line length, line height, and contrast. Headings are big and bold while body text is smaller, and that difference shows what matters.
Picture it like this
Beatrice Warde's famous comparison: good typography is a crystal goblet. You do not admire the glass; you notice the wine inside it. The goblet's whole job is to show the wine at its best. Type works the same way — its job is to show the words, not to be admired by itself.
Where the picture stops working
The analogy has limits: type is never fully invisible, and sometimes the glass is the point. Display typefaces exist precisely to be noticed, and a brand's lettering can carry meaning on its own. Typography is transparent when reading is the goal, and expressive when the text itself is the spectacle.
Worked example
Northwind Bank's app used to set all of its text at the same small size, in thin gray letters on a light gray background, with lines that stretched across the whole screen. Customers complained that reading anything felt like work. The redesign applied this lesson's basics: body text at a comfortable reading size, lines capped at about 66 characters, relaxed line height, dark text on a plain background, and clear size-and-weight steps between headings and body. Support tickets about 'tiny text' stopped, and reading sessions got noticeably longer. Nothing about the words changed — only their shape.
Key takeaway
Typography is the art and technique of arranging type so that text is legible, readable, and appealing. Good type is invisible — it is noticed only when it is bad — and the shape of text carries as much meaning as the words themselves.
Quick check
3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.
How do a typeface and a font differ?
Choose an answer, then check it.
A designer is setting long article text on a reading-focused website. Which set of typography choices best follows the readability guidance in this lesson?
Choose an answer, then check it.
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related
You’ll learn to
- Define typography using the working definition from the Interaction Design Foundation.
- Distinguish a typeface from a font, explaining that the typeface is the design and the font is a specific style or weight of it.
- Name the four main typeface categories — serif, sans-serif, monospace, and display — and describe the typical use of each.
- Explain the four readability settings — size, line length, line height, and contrast — and the general guidance for each on screens.
- Apply size and weight differences to explain how headings and body text create hierarchy.
- Analyze why good typography is often described as invisible, using Beatrice Warde's 'Crystal Goblet' idea.
Common mistakes
Calling every typeface a 'font' and stopping there.
The distinction matters: the typeface is the design of the letters, and the font is one specific weight or style of it, such as regular, bold, or italic. Everyday speech is loose, but a team that picks one typeface and then several fonts of it keeps a consistent look across different weights.
Setting body text small because 'it looks cleaner.'
Tiny text dooms legibility, and what counts as tiny differs from person to person. The U.S. Web Design System recommends at least an effective size of about 16 px for body copy on screens, and readers should be able to make text larger.
Letting lines run across the whole screen.
Long lines force the eye on a long return journey to the next line, and very short lines break text into fragments. Keeping lines around 45 to 90 characters — about 66 for long passages — keeps reading comfortable.
Believing sans-serif is required on screens.
That rule came from old low-resolution displays that could not render serif details well. On today's high-resolution screens serif type is fine, and the choice between families is about tone and context, not a fixed law.
Setting every element at the same size to look 'consistent.'
Sameness destroys hierarchy. Headings need to be visibly larger and often bolder than body text so readers can see what matters; consistency without hierarchy is just uniform noise.
Easily confused
typeface vs. font
The typeface is the design of a set of letters; the font is one specific style or weight within that design. You choose a typeface, and you use a font.
serif vs. sans-serif
Serif letters carry small finishing strokes at the ends of their main strokes; sans-serif letters do not. Serifs grew out of carved lettering and are common in print, while sans-serifs are widespread in interfaces — though serif type is fine on modern high-resolution screens.
headings vs. body text
Headings are larger and often bolder; body text is smaller and lighter. The difference sets hierarchy: it tells the reader what matters before a word is read.
Key vocabulary
- typography
- The art and technique of arranging type so that written language is legible, readable, and appealing.
- typeface
- The design of a set of letters, including the shapes and style of the whole alphabet.
- font
- A specific style or weight within a typeface, such as regular, bold, or italic.
- serif
- A small finishing stroke at the end of a letter's main stroke; also, the family of typefaces that carry these strokes.
- sans-serif
- A typeface whose letters have no finishing strokes at the ends of their main strokes.
- monospace
- A typeface in which every character has the same width, often used for code and data.
- display typeface
- A typeface designed for large sizes, such as headlines, posters, and logos.
- legibility
- The quality of being able to see and distinguish individual characters in text.
- hierarchy
- Arranging elements according to importance so readers know where to look first.
- measure
- The length of a line of text, usually counted in characters.
Sources & references
- Legibility, Readability, and Comprehension: Making Users Read Your Words — Nielsen Norman Group
- Typography — U.S. Web Design System (USWDS)
- What is Typography? — Interaction Design Foundation
- Fundamental text and font styling — MDN Web Docs (Mozilla)
- Display typeface — Wikipedia
- Beatrice Warde — Wikipedia
EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.
Researched 2026-08-21
Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.