Typography Terms

Typography vocabulary is mostly consistent from one source to the next, except for a few terms that carry two values depending on who wrote the glossary. The point is the worst of them, and it matters to anyone specifying type for print layouts or web stylesheets.

CSS defines 1 pt as 1/72 inch and 1 inch as 96 px, so a point equals 1.333 px (MDN Web Docs, 2026). NN/g's May 2024 glossary states that one point equals one pixel, and a 12 pt spec converted at that ratio renders 25% smaller than 12 pt in CSS. You'd probably only notice after the build is done.

What Are Typography Terms?

The phrase covers every word designers use for the parts of a letter, the spacing between characters and lines, the classes of type and the units that measure it.

Leading and kerning come from metal typesetting, and so does the pica. Screen design added the font stack and @font-face, plus variable fonts.

Adobe's glossary of typographic terms says as much. Print-era words carried over into electronic publishing, so a single workflow now mixes old names and new ones.

A note like "the heading looks cramped" doesn't tell anyone what to change. Say "tighten the tracking" or "open up the leading" and the fix is obvious. That's why the craft of arranging type depends on a shared vocabulary.

Letter anatomy comes first: x-height, counter, terminal and the other names for parts of a single letter. Typeface, font, serif, sans serif and slab serif sort letters into families and classes. Spacing gets kerning, tracking and leading.

Units of measure are the point, pica, em, pixel and rem. Layout has its own set (measure, rag, widow, orphan, alignment), and digital type adds glyph, ligature, OpenType feature and font stack.

Color and file formats belong to the wider graphic design vocabulary and aren't covered here. Print production isn't either.

Which Typography Terms Name the Parts of a Letter?

Some of these terms are horizontal lines that set a letter's height (baseline, x-height, cap height, ascender line). The rest are strokes that shape the letter itself (stem, bowl, counter, terminal, serif).

Lines and heights

Cap height and ascender height get mixed up a lot, but they aren't the same measurement. In plenty of old-style serif typefaces the ascenders on b, d and h rise slightly above the capitals. Line two typefaces up by cap height alone and you'll misjudge how they sit together.

Apparent size follows x-height more than the number in the type panel. NN/g's May 2024 glossary points out that two typefaces set at 16 pt look different in size when one has a taller x-height.

Whether that speeds up reading is a separate question. A poster at the Vision Sciences Society in May 2025 tested 60 readers and found a larger x-height marginally sped reading only at small print sizes, at 248 words per minute against 232. Print size itself moved the results significantly, while x-height alone did not (p = .134).

Microsoft Research's Sitka work (Larson and Carter, 2016) found that a large x-height has a cost too, Greek letters included. So the two studies point the same way. A tall x-height helps at small sizes, and I wouldn't treat it as a general upgrade.

Descenders hang below the baseline. That's the reason leading gets measured baseline to baseline and not from the edges of the letters.

Strokes and shapes

Designers use stroke names to explain why a typeface feels open or cramped.

The main vertical stroke is the stem. A curved stroke that encloses a counter, as in b and p, is a bowl, and the counter is the enclosed or partly enclosed space inside the letter. Where a stroke ends without a serif you get a terminal, while the serif itself is the small finishing stroke at the end of a main stroke.

Aperture gets overlooked more than the others. It's the opening of a partly enclosed counter, as in c, e and s, and NN/g reports that typefaces with large apertures tend to be more legible than those with narrow ones.

Typeface, Font and Font Family: What Is the Difference?

Say Helvetica and you've named a typeface, the complete design. Helvetica Bold at 14 pt is a font, one usable instance of that design, and the font family covers every related style filed under the name.

NN/g's May 2024 glossary lists font family as another name for typeface. Canva's typography glossary goes the other way and notes that designers now swap typeface and font freely.

I'd still keep them apart, mostly because it pays off in handoff. "Use Helvetica" names a typeface and says nothing about weight. "Helvetica Bold 14 pt" names the font a developer actually loads.

Superfamilies exist too, which bundle several related families into one system. IBM Plex is the usual example, with Sans, Serif and Mono versions drawn to match.

Weight, width and style

Before CSS Fonts Level 4, font-weight took keywords plus nine numeric values from 100 to 900. The W3C's current module accepts any number from 1 to 1000, which is what variable fonts use for continuous weights.

Weight is stroke thickness, and the keyword normal equals 400 while bold equals 700. Width describes how narrow or wide the letters are drawn, as in condensed and extended cuts.

Italic means a redrawn companion style with its own letterforms. An oblique cut just slants the upright ones.

If the family lacks a bold or italic, the browser synthesizes one from the regular. The faked weight looks smeared next to a drawn one.

How Are Typefaces Classified?

In everyday practice, typefaces get sorted into serif, sans serif, slab serif, script, monospace and display. The formal system, Vox-ATypI, cuts finer than that.

Maximilien Vox devised it in 1954 with 9 groups. ATypI adopted it in 1962 and added blackletter and non-Latin classes, then withdrew its endorsement in 2021, though the class names are still a common reference point. Serifs get split by historical period (Humanist, Garalde, Transitional, Didone), slab serifs go under Mechanistic, and sans serifs under Lineal.

For briefs and handoffs the everyday classes do the job. Vox-ATypI is worth reaching for when period and construction matter.

Serif

Serif typefaces have small finishing strokes at the ends of the letter strokes. Most text serifs fall into Garalde (Garamond, Bembo, Palatino), Transitional (Baskerville, Times New Roman) or Didone (Bodoni, Didot).

Didones have the sharpest stroke contrast of those, and the thin hairlines suit headlines better than small text.

Sans serif

Sans serif typefaces drop the serifs. Vox-ATypI files them under Lineal, and the British Standard of 1967 breaks that group down further into grotesque (19th-century origins, as in Monotype Grotesque), neo-grotesque (Helvetica, Univers), geometric (Futura) and humanist (Gill Sans, Optima).

Humanist is the confusing label. Vox-ATypI uses it for a serif class (Centaur) and for humanist sans serifs like Gill Sans.

NN/g notes that sans serif fonts now match, and sometimes beat, serif legibility on digital screens. That makes the long-running serif vs sans-serif debate a context call, not a rule.

Slab serif

The serifs on a slab are thick and block-like, with little curve where they meet the stem. Vox-ATypI calls the group Mechanistic, a nod to the Industrial Revolution, and Rockwell is the standard example.

They read as sturdy and a bit loud, which is why you see them on headlines and signage.

Script, monospace and display

Script typefaces imitate handwriting or formal penmanship, and the strokes often join (Mistral). A script is not an italic, and Vox-ATypI keeps the two apart.

Monospace gives every character the same width, which keeps columns of code aligned. Courier is the classic case. Display faces are drawn for large sizes, often with high contrast or decorative forms, so they're a bad fit for long passages of body text.

The scheme breaks at the edges. Many typefaces show traits of more than one class, so two experienced designers can file the same face in different places.

What Do Kerning, Tracking and Leading Control?

Leading is the vertical one, setting the distance between lines. Kerning and tracking both work horizontally, kerning on one specific pair of letters and tracking across a whole range of text.

Kerning and tracking in practice

Adobe's InDesign User Guide (checked November 2026) measures both in 1/1000 em, a unit tied to the current type size. In 10 pt type one em is 10 pt, so a tracking value of -20 removes 0.2 pt after every character.

By default InDesign applies metrics kerning, the pair values built into the font. Optical kerning reads the letter shapes instead and spaces them on the fly.

Manual kerning only works at an insertion point between two letters. Select a range and the menu offers metrics, optical or 0, so tracking is the control for blocks of text, and the two settings stack.

Leading and line height

NN/g's glossary measures leading baseline to baseline and lists line height and line spacing as alternate names.

WCAG 2.1 success criterion 1.4.12 (W3C, Level AA) requires content to survive user overrides of line height at 1.5 times the font size, paragraph spacing at 2 times, letter spacing at 0.12 times and word spacing at 0.16 times.

In print vocabulary, those minimums mean 24 pt leading on 16 pt type and a tracking value of +120 in Adobe's 1/1000 em units. A layout whose text boxes clip at those values fails the criterion.

Word spacing

Word spacing sets the gaps between words and stays separate from tracking, which spaces the letters inside them. In justified text the gaps stretch to fill each line, so word spacing is what gives a justified column its uneven look.

Adobe also documents word kerning, a separate control again. It changes only the gap between a word's first character and the space before it, not the Word Spacing value in the Justification dialog.

How Is Type Measured in Points, Picas, Ems and Pixels?

Print uses points and picas. Screens use pixels, ems and rems, and CSS ties the two together through a 96 px inch.

An inch works out to 72 pt, 6 pc or 96 px in CSS. A point is 1/72 inch, which comes to 1.333 px, and a pica is 12 pt, or 16 px. The em follows the computed font-size of the element it sits on, while the rem follows the font-size of the root element, 16 px by default in most browsers.

Those are the conversions in MDN's CSS length reference, which tracks the W3C specification.

NN/g's May 2024 glossary says one point equals one pixel on a 100% zoomed display, which contradicts the CSS ratio. Browsers implement CSS, so any web build converts at 1.333.

A 12 pt body size in a print spec becomes 16 px on the web, which is 1 rem at the default root size.

The two relative units behave differently once components nest. Ems compound, so a 1.2em list inside a 1.2em container renders at 1.44 times the base size. Rems always read the root size, which keeps nested components predictable and follows the reader's browser setting. MDN notes that user preferences can change the 16 px default.

The older description of an em as the width of a capital M survives in some glossaries. Adobe's InDesign guide and the CSS specification both define it as the type size.

My rule of thumb is points for print files and rem for web type. Em is for spacing that should scale with its own component.

On a screen, the pixel is the reference unit. That is why inches and points stop matching physical size on low-dpi devices, according to MDN.

For handoff, run the numbers through a px to rem converter and write down the result. 18 px divided by 16 is 1.125 rem.

Which Terms Describe How Text Sits on the Page?

Where lines start, how long they run, what the edge looks like and which text ranks first all have their own terms: alignment, measure, rag, widows and orphans, and hierarchy. A designer can change each one independently.

Alignment and rag

Left aligned text is flush left and ragged right, right aligned is the reverse, and centered text leaves equal gaps on both sides. Justified text is flush on both edges, with word spacing stretched to fill each line.

The rag is the uneven edge that unjustified text leaves. NN/g's glossary prefers left-aligned text in UX for readability and scannability, and WCAG 2.1 success criterion 1.4.8 (Level AAA) asks that text not be justified.

Justification needs a wide measure. In a narrow column the stretched word spaces open visible gaps.

Measure

Robert Bringhurst's The Elements of Typographic Style puts a satisfactory single-column line at 45 to 75 characters, with 66 as the ideal and 40 to 50 for multi-column work.

WCAG 2.1 success criterion 1.4.8 caps the line at 80 characters. The two sources fit together fine, since Bringhurst is where the target comes from and WCAG only sets the upper limit.

CSS lets you cap the line in ch, but ch is the width of the zero glyph in the element's font (MDN). In a proportional font, 66ch rarely holds 66 characters, so treat it as an approximation.

Widows and orphans

In book typesetting, a widow is the last line of a paragraph stranded at the top of a page or column, and an orphan is the first line stranded at the bottom. Bringhurst uses these definitions. NN/g's glossary takes the UX convention instead, using orphan for a short last line of a paragraph and advising more than two words on it.

Some dictionaries call both cases a widow. Name the position (top of page, bottom of page, last line of a paragraph) when briefing a designer, because the label alone is ambiguous.

Hierarchy and baseline grid

Hierarchy ranks text by importance through size, weight, spacing and position on the page. A clear typographic hierarchy lets a reader find the heading, the subhead and the body without reading a word.

Text baselines snap to a baseline grid, a set of evenly spaced horizontal lines, which keeps lines aligned across columns.

Hierarchy fails when everything is bold.

What Are Glyphs, Ligatures and OpenType Features?

Characters and glyphs are different things. The character is the encoded unit, and the glyph is the drawn shape a font uses to show it. The default ampersand, for example, sits at Unicode code point U+0026.

FontLab's documentation keeps the two ideas apart, and so does the Unicode Standard. A handwriting font can carry several glyphs for one letter. A ligature goes the other way, with a single glyph replacing 2 or more characters.

• Ligatures (liga) merge pairs such as fi and ffi into one glyph. They're on by default.
• Small caps (smcp), capital forms drawn at lowercase height
• Old-style figures (onum) are numerals with ascending and descending shapes, better suited to running text
• Tabular figures (tnum) line up in columns because every numeral has the same width
• Swash (swsh) swaps in decorative alternates for capitals and word endings

Each of these is an OpenType feature, a named substitution rule inside the font that a four-character tag switches on. As of November 2026, MDN tells authors to prefer the font-variant properties and to keep font-feature-settings for cases with no higher-level property.

Small caps belong to font-variant-caps, not font-feature-settings. MDN is explicit on that point.

Not every font ships every feature, and a request for a missing one gets ignored or faked. Figma's help center notes that support varies by font and that Figma synthesizes subscripts and superscripts when true glyphs are absent.

Which Typography Terms Apply on the Web?

On the web these terms turn into CSS. A font stack lists fallback fonts and @font-face loads the font file. While the file downloads, font-display decides what readers see, and WOFF2 is the format that carries it. The properties behind all of this come from the W3C CSS Fonts Module.

Loading and fallback terms

The ordered list of typefaces in font-family is the font stack, and it should end in a generic family such as serif or sans-serif. The next entry in the stack is the fallback font, which shows when the first one is missing or still loading.

@font-face is the rule that points CSS at a font file and names it. WOFF2 is compressed web font packaging, a W3C Recommendation since March 2018 and built on Brotli compression.

The font-display property takes auto, block, swap, fallback or optional. Swap shows fallback text almost immediately and replaces it whenever the web font loads, while optional gives the font an extremely small block period and no swap period, so a font that arrives late is never swapped in (MDN).

Google Fonts exposes the same choice through the display parameter in its CSS URL.

Variable fonts

A variable font packs a range of variations of one typeface into a single file. Figma's help center lists weight, width, optical size and slant as the common axes.

Axes vary by font, so a design that calls for an optical size axis fails quietly on a font without one.

From print terms to CSS and design tools

Kerning is the odd one out. CSS can switch a font's built-in pair kerning on or off but has no per-pair value, and Figma's help center says to replicate kerning by placing the cursor between two letters and adjusting letter spacing.

Print leading is a fixed distance for a text block, but CSS line-height works best as a ratio.

MDN's reference shows why. A 30 px heading with a unitless 1.1 computes 33 px, while 1.1em set on a parent at 15 px hands the heading an inherited 16.5 px, a result MDN flags as unintended.

Typography Terms FAQ

Are legibility and readability the same thing?

No. Legibility is about single characters, meaning how easily a reader tells n from h or i from l, and that depends on the typeface.

Readability covers whole blocks of text and leans on measure, leading and alignment.

Why is leading called leading?

Printers once placed thin strips of lead between lines of metal type to open up the space. The name outlived the metal and now means the distance from one baseline to the next.

What does 9/11 pt mean in a type specification?

It reads as 9 pt type set on 11 pt leading, written size over leading.

Typographers add a line length at the end, so 10/12 x 21 means 10 pt type, 12 pt leading and a 21 pica line.

How do an em dash and an en dash differ?

An em dash is as wide as the type size and marks a break in a sentence. An en dash is half that width and joins ranges, such as 10 to 20.

Do designers need to know what hinting is?

Only at a basic level. Hinting is a set of instructions embedded in a font file that keeps characters clear at small sizes and low screen resolutions.

Font makers write it, so designers rarely set it but benefit from a well-hinted font.

Which Setting to Fix First When Text Looks Wrong

When text looks wrong, I'd work through the settings in a fixed order. Measure goes first, then leading, and tracking goes last, because each one changes the inputs of the next.

A wider measure calls for more leading, so adjusting leading before the line length wastes the work. A tracking change then multiplies across every character in a paragraph and reflows the lines that the first two settings just settled.

The sequence has a limit. When letters stay hard to tell apart at small sizes, no spacing adjustment compensates, and the remaining fix is a typeface with a larger x-height or a larger size.

The trade-off is in the first step, since a narrower measure adds lines and lengthens the page.

This order was checked against the W3C WCAG 2.1 and MDN references in November 2026. Once the settings hold, the next decision is how to pair fonts within one layout.