Reference
Typography Glossary
This typography glossary covers 25 terms a working designer runs into every week: the anatomy of a letter, the typesetting decisions that affect readability, the classification system that organizes typefaces, and the technical specs behind variable fonts and OpenType features.
Each entry opens with a one-sentence definition written to stand on its own, followed by a worked example where useful, links to related terms, and a link to the Font Blend tool that exercises the concept. Definitions cite tier-1 sources where they apply (W3C, MDN, Wikipedia, Google Fonts Knowledge).
The glossary is organized into four groups. Anatomy terms describe the parts of letterforms: baseline, x-height, cap height, ascender, descender. Typesetting terms cover the decisions made when setting type: kerning, tracking, leading, measure, orphans, widows. Classification terms group typefaces by their shared features: serif, sans-serif, slab, display, handwriting. Technical terms explain the modern layer: variable fonts, OpenType, ligatures, optical size, weight axis.
Use the glossary to understand a term you encountered in a tool or a design discussion. Use it as a reference when writing about typography. Each entry includes a related tools link so you can test the concept in the browser with real fonts and live previews.
Showing 25 of 25 terms
Anatomy
6 terms
- x-heightThe x-height is the height of lowercase letters (specifically 'x') in a typeface, excluding ascenders and descenders. A larger x-height generally improves readability at small sizes, which is why many screen-optimized fonts have tall x-heights.anatomy
- Cap HeightCap height is the height of uppercase letters in a typeface, measured from the baseline to the top of flat-topped capitals like 'H' or 'I'. It is typically shorter than the ascender height.anatomy
- BaselineThe baseline is the invisible line on which most letters in a typeface sit. Descenders (like the tail of 'g' or 'p') extend below the baseline. Most typographic measurements reference the baseline.anatomy
- AscenderAn ascender is the part of a lowercase letter that extends above the x-height, as in 'b', 'd', 'f', 'h', 'k', 'l', and 't'. The ascender height is typically equal to or slightly taller than the cap height.anatomy
- DescenderA descender is the part of a lowercase letter that extends below the baseline, as in 'g', 'j', 'p', 'q', and 'y'. The descender depth affects line spacing, fonts with deep descenders need more leading.anatomy
- LigatureA ligature is a single glyph combining two or more adjacent letters, designed to avoid awkward collisions. Common ligatures include 'fi', 'fl', and 'ff'. Programming ligatures (like => and !=) are a modern convention in coding fonts.anatomy
Typesetting
9 terms
- KerningKerning is the adjustment of space between specific pairs of letters to improve visual rhythm. Unlike tracking (which adjusts all letters uniformly), kerning targets individual pairs like 'AV', 'To', or 'We' that would otherwise appear too tight or too loose.typesetting
- TrackingTracking (also called letterspacing) is the uniform adjustment of space between all letters in a block of text. Positive tracking loosens text; negative tracking tightens it. Tracking is applied evenly, unlike kerning which targets specific pairs.typesetting
- LeadingLeading (pronounced 'ledding') is the vertical space between baselines of text, named after the strips of lead once used in metal type. In CSS it is expressed as line-height. Optimal leading for body text is typically 1.4-1.6 times the font size.typesetting
- Font WeightFont weight is the thickness of strokes in a typeface. CSS uses numeric values from 100 (Thin) to 900 (Black), with named aliases: 400=Regular, 500=Medium, 600=Semibold, 700=Bold.typesetting
- Contrast (typography)In typography, contrast refers to the difference in thickness between thin and thick strokes in a letterform. High-contrast typefaces (like Playfair Display) have dramatic variation; low-contrast faces (like Inter) are more uniform. Also used to describe visual difference between type sizes, weights, or styles in a layout.typesetting
- HierarchyTypographic hierarchy is the visual organization of content through variations in size, weight, color, or style. Strong hierarchy guides the reader's eye through headings, subheadings, body, and captions in priority order.typesetting
- MeasureThe measure is the length of a line of text, typically expressed in characters per line or in absolute units. For comfortable reading, body text should measure 45-75 characters per line. Too wide and the eye loses its place; too narrow and rhythm breaks.typesetting
- WidowsA widow is a single short line of text (often the last line of a paragraph) that appears at the top of a new column or page. Widows break visual rhythm and are considered a typographic flaw to be corrected through rewording or adjustment.typesetting
- OrphansAn orphan is a single short line of text (often the first line of a paragraph) that appears at the bottom of a column or page, separated from the rest of the paragraph. Like widows, orphans are a typographic flaw.typesetting
Classification
6 terms
- SerifA serif is the small projecting stroke at the ends of letters in some typefaces. Serif typefaces (like Garamond, Times, or Playfair Display) are traditionally used for long-form reading and editorial contexts. Sans-serif typefaces lack these strokes.classification
- Sans SerifSans-serif typefaces (from French 'sans' meaning 'without') lack the projecting strokes found in serif typefaces. They tend to read as modern and neutral, and are widely used for UI and digital display.classification
- Slab SerifA slab serif is a typeface with thick, block-like serifs at near-perpendicular angles to the letter strokes. Slab serifs read as sturdy and confident, often used in editorial and branding contexts.classification
- Display TypeDisplay type refers to typefaces designed for use at large sizes, headlines, posters, signage. They often have higher stroke contrast and more expressive details than text faces, which can make them unsuitable for body copy.classification
- Font FamilyA font family is a collection of related typefaces sharing a design but varying in weight, style, or width. For example, the Inter family includes weights from 100 (Thin) to 900 (Black).classification
- TypefaceA typeface is the overall design of a set of letterforms (e.g., Inter, Playfair Display). A font is a specific instance of a typeface at a specific weight, style, and size. The terms are often used interchangeably in modern usage.classification
Technical
4 terms
- Variable FontA variable font is a single font file that contains a continuous range of variations along one or more axes (weight, width, optical size, slant, custom). This reduces payload compared to shipping many static instances and enables fluid typography.technical
- Optical Size (opsz)The optical size axis (opsz) in a variable font adjusts letterforms for optimal legibility at different sizes, small text needs more open counters and sturdier serifs; display text can use finer detail and higher contrast.technical
- Weight (wght)The weight axis (wght) in a variable font controls stroke thickness, typically from 100 (Thin) to 900 (Black). Standard named weights are 400 (Regular), 500 (Medium), 600 (Semibold), and 700 (Bold).technical
- OpenTypeOpenType is the dominant modern font format, supporting advanced typographic features like ligatures, small caps, old-style figures, contextual alternates, and stylistic sets. These features are exposed in CSS via the font-feature-settings property.technical
How to Use This Glossary
The glossary works best as a reference you return to, not a document you read cover to cover. These are the most common ways designers use it.
- While using a tool
- Each tool page links to the glossary terms relevant to its decisions. The contrast checker links to contrast. The type scale page links to x-height and leading. Follow those links when a term in the tool is unfamiliar.
- When reading about typography
- Articles and discussions use terms like kerning, tracking, and measure with precision. When a term is unfamiliar, look it up here. The worked example in each entry shows the term in context using a catalog font you can preview in the browser.
- When writing a design brief or handoff doc
- Use the glossary to find the precise term for a concept. "Make the text tighter" becomes "reduce letter-spacing" once you know the right word. Precise terminology reduces miscommunication between designers and developers.
- When preparing for a design review
- If a reviewer mentions x-height or measure or leading, look up the term to understand exactly what they mean. The glossary definitions are written to be self-contained, so you get the answer without reading an entire chapter.
Why Typography Vocabulary Matters
Typography has a reputation for being obscure, but the vocabulary exists because precision matters in type. A designer who says "make the letters feel bigger" could mean increase the font size, raise the x-height, or adjust the leading. A designer who says "raise the x-height to grade 2" has specified exactly what will change and how much.
The glossary terms also appear in the W3C specifications, the OpenType standard, and the Google Fonts catalog. Knowing the term in English connects you to the authoritative sources when you need to go deeper. The related tools section on each entry points to the Font Blend tool that applies the concept, so you can test the idea immediately after reading it.
Looking for a font to put these concepts into practice? Browse the font catalog or open the playground to test kerning, leading, and x-height on your own text. For the broader reading list, see the typography books list.