Typography

The vocabulary of typography

The anatomy of type, and the words designers use for weight, spacing and setting text. Press a term to see it set, with the lines and parts it names drawn on the letters.

Anatomy of typealso: anatomy of typography, type anatomy

The named lines every letter in a font is drawn to (baseline, x-height, cap height, ascender and descender) and the names for the parts of letters. Knowing them lets you say why two fonts at the same size look different sizes.

Anatomy

The lines letters sit on and the names for their parts.

Classification

The families typefaces fall into, and how to tell them apart.

Weight and style

How heavy, slanted or narrow a font is drawn.

Spacing

The space between letters, words and lines, and how long a line runs.

Setting text

Putting type into paragraphs and pages that read well.

All terms

Anatomy

Anatomy of typealso: anatomy of typography, type anatomy: The named lines every letter in a font is drawn to (baseline, x-height, cap height, ascender and descender) and the names for the parts of letters. Knowing them lets you say why two fonts at the same size look different sizes.
Baselinealso: baseline typography: The invisible line letters sit on. Descenders hang below it and round letters dip just past it. Lining up the baselines of text side by side, even at different sizes, is what makes a layout look tidy.
x-heightalso: x height: The height of the lowercase letters without ascenders, measured on the x. Fonts with a tall x-height look bigger and read better at small sizes, which is why two fonts set at the same point size rarely look the same size.
Cap heightalso: capital height: The height of a flat capital letter like H or T above the baseline. It is usually a little lower than the ascenders of the lowercase, so capitals don't look too big next to them.
Ascender: The part of a lowercase letter that rises above the x-height, as in b, d, h, k and l. Long ascenders give a font an elegant, airy look; short ones let lines sit closer together.
Descender: The part of a letter that drops below the baseline, as in g, j, p, q and y. Tight leading makes the descenders of one line collide with the ascenders of the next.
Overshoot: Round and pointed letters are drawn slightly past the baseline and x-height, because a circle that only touches the line looks smaller than a square. Here the o's poke out where the x stays flat.
Counteralso: counterspace: The enclosed or partly enclosed space inside a letter, like the hole in an o, p or d. Open counters keep small text legible; when they fill in at heavy weights, letters start to blur together.
Bowl: The curved stroke that closes around a counter, as in b, d, p and q. The bowl is the stroke; the counter is the space inside it.
Stem: The main vertical stroke of a letter, like the uprights of an H or the single stroke of an l. The stem's thickness is what sets a font's weight.
Crossbaralso: bar: The horizontal stroke across a letter, as in A, H, e and t. Where it sits changes a font's character: a high crossbar looks elegant, a low one sturdy.
Serif: The small finishing stroke at the end of a letter's main strokes. It gives a typeface its name: serif faces have them, sans serif faces don't.
Terminal: The end of a stroke that has no serif, like the tips of c, a and r. A terminal can be cut flat, angled, or finished with a ball or teardrop.
Ligaturealso: fi ligature: Two or more letters joined into one glyph, like fi, fl and ffi, so the hook of the f doesn't crash into the next letter. Fonts swap them in automatically; switch them off for code and letter-spaced text.

Classification

Serif vs sans serifalso: serif, sans serif: Serif faces finish their strokes with small feet and usually mix thick and thin strokes; sans serif faces ("sans" is French for without) don't. Serifs feel bookish and traditional, sans serifs clean and modern; both read fine on today's screens.
Slab serifalso: Egyptian, mechanistic: A serif face with thick, blocky serifs and little contrast between strokes, like Rockwell or the typewriter face Courier. Sturdy and loud, it suits headlines, posters and anything meant to look typed.
Monospacealso: monospaced, fixed-width: Every character takes the same width, so an i gets as much room as a W. Columns of code and tables of numbers line up; prose looks uneven. The cells show each letter's width.
Scriptalso: handwriting, cursive: Faces drawn to look written by hand with a pen or brush, often with letters that join. Lovely for a name, an invitation or a logo; tiring in paragraphs, and never in all caps.
Display typealso: display face, headline type: Faces designed to be used big, for headlines, posters and signs, with details that would clog up at small sizes. The same face set as body text becomes hard to read.
Geometric sansalso: grotesque, neo-grotesque, humanist: Sans serifs come in kinds: geometric ones are built from circles and straight lines (Futura, Sora), grotesques have plainer, more upright shapes (Helvetica, Inter), and humanist ones follow the pen (Gill Sans, Frutiger).
Typeface vs fontalso: font family: A typeface is the design (Inter); a font is one weight and style of it (Inter Bold), traditionally one file. In everyday speech people use "font" for both, and nobody minds.

Weight and style

Font weightalso: weights, bold: How thick a font's strokes are, named or numbered from Thin (100) through Regular (400) and Bold (700) to Black (900). Use two or three weights at most, far enough apart to tell at a glance.
Italic vs obliquealso: italic, oblique: An italic is redrawn: the letters change shape (look at the a, which loses its top bowl, and the f, which grows a tail). An oblique is just the upright letters slanted. Many sans serifs only have obliques, and a browser fakes one when a font has no italic.
Condensedalso: narrow, compressed, extended: A narrower cut of a typeface, drawn to fit more letters on a line while keeping strokes even; its opposite is extended. Squashing a normal font in software does the same badly: the upright strokes go thin while the bars stay thick.
Variable fontalso: variable fonts: One font file with adjustable axes, like weight or width, instead of a separate file for every style. Any value in between is available, so the weight can be tuned or animated smoothly.
Stroke contrastalso: contrast: The difference between a font's thickest and thinnest strokes. High contrast looks refined but its thin strokes vanish at small sizes; low-contrast, even strokes hold up anywhere.
Optical sizesalso: optical size, opsz, text and display cuts: Versions of a typeface drawn for the size they will be read at. The small, text cut has a larger x-height, sturdier strokes and looser spacing so it holds up in body copy; the display cut is finer and tighter for headlines. Variable fonts carry it as an opsz axis the browser follows as the size changes.
Faux boldalso: fake bold, synthetic bold: When a font has no bold, browsers and apps fake one by outlining the regular letters. Counters fill in and the spacing stays tight. Load the real bold instead.

Spacing

Kerning: Adjusting the space between one particular pair of letters, like AV or To, so the gaps look even. Fonts carry a table of these pairs; the marks show how much each one is pulled in, in thousandths of an em.
Trackingalso: letter spacing, tracking typography: Adding or removing the same space between every letter in a run of text. Loosen it for all caps and small text; tighten it a little for big headlines. Leave body text alone.
Kerning vs tracking: Kerning fixes the gap between one pair of letters; tracking changes every gap in a word or line by the same amount. Kern to fix awkward pairs, track to set the overall texture.
Leadingalso: leading typography, line height, line spacing: The distance from one baseline to the next (named after the strips of lead between lines of metal type). Body text usually wants 1.4 to 1.6 times the font size; big headlines need less.
Word spacing: The space between words. A font's default is usually right; too wide and lines fall apart into separate words, too tight and the words run together.
Measurealso: line length: How long a line of text is, counted in characters. About 45 to 75 characters reads comfortably; longer lines make it hard to find the start of the next one, shorter ones break the rhythm.

Setting text

Typographyalso: typesetting: The craft of choosing and arranging type: the faces, sizes, weights, spacing and line lengths that make words easy and pleasant to read. Good typography mostly goes unnoticed; bad typography gets in the way.
Alignmentalso: text alignment, flush left, justified: Which edges of a paragraph line up. Flush left (ragged right) is the easiest to read; centred suits a few short lines; flush right is for captions and labels; justified gives two clean edges but needs hyphenation to avoid gappy lines.
Ragalso: ragged right, ragged edge: The uneven right edge of flush-left text. A good rag gently in and out, with no deep bites or long staircases; hyphenating long words evens it out. Justified text has no rag at all.
Widows and orphansalso: widow, orphan: A widow is a paragraph's last line stranded at the top of the next column or page; an orphan is its first line left alone at the bottom of one. Both break the reading flow. Fix them by editing a few words or moving a line across.
Runtalso: single-word last line, widow (loosely): A last line with a single short word on it, which leaves a hole under the paragraph. Many people call this a widow too. Pull a word down from the line above or rewrite slightly.
Hierarchyalso: typographic hierarchy, visual hierarchy: Using size, weight, colour and space so the reader can see what matters most and what to read first. Three or four clearly different levels are usually enough.
All capsalso: uppercase, capitals: Text set entirely in capitals. Without the ups and downs of lowercase every word is a rectangle, so it is slower to read: keep it for short labels and headings, and add a little tracking so the letters don't crowd.
Small capsalso: small capitals: Capital letters about the height of the lowercase, for acronyms and abbreviations in running text so they don't shout. Fonts that include real small caps draw them heavier than shrunk capitals; browsers fake them when a font has none.
Drop capalso: initial, versal: A large first letter that drops down into the first few lines of a paragraph, marking where a chapter or article starts. It should sit on a baseline of the text beside it.
Hanging punctuationalso: optical margin alignment: Letting quote marks and similar punctuation hang outside the edge of the text, so the letters themselves line up and the edge looks straight.
Hyphen, en dash, em dashalso: em dash, en dash, hyphen vs dash: Three different marks. The hyphen joins words (well-known); the en dash, the width of an n, spans ranges (1990–2025); the em dash, the width of an M, sets off a thought — like this. Most fonts space them differently, so don't substitute.