Typography Glossary
Typography has five hundred years of jargon behind it. This glossary translates the terms you'll actually encounter — in design tools, CSS, font specimens, and our own articles — into plain English. Use the filter box or browse alphabetically.
- Aperture
- The opening of a partially enclosed letterform — the gap in a lowercase c, e, or a. Fonts with large, open apertures (like Source Sans) stay legible at small sizes and low resolutions; closed apertures look more compact and stylised but blur together sooner.
- Ascender
- The part of a lowercase letter that rises above the x-height, as in b, d, h, and k. Long ascenders give text an elegant, airy feel; short ones allow tighter line spacing.
- Baseline
- The invisible line letters sit on. Rounded letters like o actually dip slightly below it (overshoot) so they look optically aligned. Baseline grids — spacing everything in multiples of the line height — are a classic technique for tidy layouts.
- Body text
- The main running text of a document or page, as opposed to headings, captions, or pull quotes. Body text is where readability matters most; it is typically set between 16 and 21 pixels on the web.
- Bowl
- The curved, enclosed stroke of letters such as b, d, o, and p. The shape of the bowl is one of the fastest ways to tell typefaces apart — compare the circular bowls of Futura with the oval bowls of Helvetica.
- Cap height
- The height of capital letters measured from the baseline, usually slightly below the tops of ascenders. The relationship between cap height and x-height shapes a typeface's overall proportions.
- Counter
- The enclosed or partially enclosed white space inside a letter — the hole in an o or the space inside an n. Generous counters keep type legible when small or printed poorly; ink traps are exaggerated counters designed for bad printing conditions.
- Descender
- The part of a letter that drops below the baseline, as in g, j, p, q, and y. Tight line spacing can cause descenders to collide with the ascenders of the line below.
- Display type
- Type designed for large sizes — headlines, posters, packaging — where personality matters more than reading comfort. Display faces often have tighter spacing, higher contrast, and details that would disappear or distract at body-text sizes.
- Drop cap
- An oversized initial letter that drops into the first lines of a paragraph, a tradition inherited from illuminated manuscripts. In CSS it is created with the
::first-letterpseudo-element or the newerinitial-letterproperty. - Em
- A relative unit equal to the current font size: at 16px type, 1em is 16px. Named after the width of the capital M in metal type. An en is half an em — hence em dash (—) and en dash (–).
- Fallback font
- The next font in a CSS
font-familylist, used when the preferred font hasn't loaded or doesn't contain a needed character. A good fallback with similar proportions reduces layout shift while web fonts load. - Font vs typeface
- Traditionally, the typeface is the design (Garamond) and a font is one implementation of it (Garamond Italic 12pt; today, a font file). In casual use the words are interchangeable, and only pedants will correct you — but the distinction still matters in licensing, where you license fonts, not typefaces.
- Font family
- A set of related fonts sharing one design: regular, italic, bold, condensed, and so on. In CSS,
font-familynames the family and properties likefont-weightselect the member. - Foundry
- A company or individual that designs and publishes typefaces. The name survives from the days when type was literally cast from molten metal. Examples range from giants like Monotype to one-person independents.
- Glyph
- A single rendered shape in a font: a letter, numeral, punctuation mark, or symbol. One character can map to several glyphs (alternates, small caps), and one glyph can represent several characters (the "fi" ligature).
- Hierarchy
- The visual ranking of text by importance, created with size, weight, colour, spacing, and placement. Strong hierarchy lets a reader scan a page and understand its structure before reading a word.
- Hinting
- Instructions embedded in a font that adjust how it snaps to the pixel grid at small sizes on low-resolution screens. Less critical in the high-DPI era, but still relevant for Windows rendering.
- Italic vs oblique
- A true italic is a separately drawn, cursive-influenced design — compare the single-storey italic a with its roman counterpart. An oblique is simply the upright design slanted. Browsers fake an oblique when no italic file is loaded, which is why "faux italic" often looks off.
- Justification
- Aligning text to both left and right margins by adjusting the spaces between words. Beautiful in books with careful hyphenation; on the web, where hyphenation support is patchy, it often creates distracting "rivers" of white space. Left-aligned (ragged-right) text is usually the safer choice.
- Kerning
- Adjusting the space between a specific pair of letters so the gap looks optically even — classic problem pairs include "AV", "To", and "Wa". Fonts ship with built-in kerning tables; CSS enables them via
font-kerning. Not to be confused with tracking, which spaces all letters uniformly. - Leading
- The vertical distance between lines of text, pronounced "ledding" — named after the strips of lead once inserted between metal type. In CSS it corresponds to
line-height. Body text usually reads best at 1.4–1.6× the font size. - Legibility vs readability
- Legibility is how easily individual characters can be distinguished (can you tell I, l, and 1 apart?). Readability is how comfortably continuous text can be read, which also depends on size, spacing, line length, and contrast. A legible font can still be set unreadably.
- Ligature
- A single glyph replacing a sequence of characters that would otherwise collide or look awkward — most commonly "fi" and "fl", where the f's hook would crash into the dot of the i. Standard ligatures are on by default in browsers; discretionary ligatures (like "st" swashes) are decorative opt-ins via
font-variant-ligatures. - Measure
- The length of a line of text. The comfortable range for body text is roughly 45–75 characters per line, with about 66 often cited as ideal. On the web, cap it with something like
max-width: 65ch. - Monospace
- A typeface in which every character occupies the same width, originally for typewriters, now beloved for code because columns align vertically. The opposite is a proportional typeface, where an i is narrower than an m.
- OpenType
- The dominant modern font format, jointly developed by Microsoft and Adobe. OpenType features — small caps, alternate characters, old-style figures, ligatures — are optional behaviours a font can offer, controlled in CSS through
font-feature-settingsand friends. - Orphan & widow
- Paragraph fragments stranded by a break: definitions vary, but commonly a widow is a lone last line at the top of a page or column, and an orphan is a lone first line at the bottom — or a single short word left on the final line. Print designers fix them manually; CSS offers
orphans,widows, andtext-wrap: pretty. - Point & pica
- Traditional typographic units: 1 point = 1/72 inch, and 12 points = 1 pica. Print type is still specified in points; CSS's
ptunit exists but pixels, rems, and ems are the norm on screen. - Rag
- The uneven edge of left-aligned text. A "good rag" alternates long and short lines gently without awkward shapes; a bad rag creates distracting staircases. Designers adjust breaks, hyphenation, or wording to improve it.
- Sans-serif
- A typeface without serifs ("sans" is French for "without"). Major branches: grotesque (Helvetica), geometric (Futura), and humanist (Gill Sans, Open Sans). See our sans-serif category guide.
- Serif
- The small finishing stroke at the end of a letter's main strokes — and, by extension, any typeface that has them. Classified into old-style, transitional, modern (Didone), and slab. See the serif category guide.
- Small caps
- Capital letterforms drawn at roughly x-height, used for abbreviations and subtle emphasis without the shouting effect of full caps. True small caps are designed glyphs; scaled-down capitals (what
font-variant: small-capsproduces without font support) look spindly by comparison. - Stem
- The main vertical or diagonal stroke of a letter — the backbone of an l or the sides of an A. Stem thickness largely determines a font's weight.
- Stroke contrast
- The difference between a letterform's thickest and thinnest strokes. Didone serifs like Bodoni have extreme contrast; geometric sans-serifs like Futura have almost none. High contrast is elegant at display sizes but fragile at small sizes.
- Superfamily
- A type family released in multiple classifications — serif, sans, slab, mono — drawn on shared skeletons and proportions. Examples: Source (Sans/Serif/Code), IBM Plex, Roboto. Superfamilies make font pairing nearly foolproof.
- Terminal
- The end of a stroke that doesn't finish in a serif. Terminals can be cut straight, rounded into balls (as in Bodoni's a), or shaped like teardrops — small details that define a typeface's voice.
- Tracking
- Uniform spacing applied across a run of text — CSS's
letter-spacing. Slightly positive tracking helps ALL-CAPS text and tiny labels; negative tracking tightens large headlines. Body text at reading sizes rarely needs any. Compare kerning. - Type scale
- A predefined set of font sizes generated from a ratio (such as 1.25, the "major third"), used instead of picking sizes arbitrarily. Scales create rhythm and consistency across a design system.
- Variable font
- A single font file containing a continuous range of styles along axes such as weight, width, and optical size, rather than separate files per style. Controlled in CSS with
font-variation-settingsor standard properties. See Variable Fonts Explained. - Weight
- The thickness of a font's strokes, from Thin (100) through Regular (400) and Bold (700) to Black (900). The CSS numbering runs in hundreds; variable fonts allow any value in between.
- Web font
- A font delivered to the browser over the network via
@font-face, rather than read from the visitor's operating system. See our web font performance guide. - WOFF2
- Web Open Font Format 2 — the standard compressed font format for the web, roughly 30% smaller than WOFF and supported by every modern browser. If you serve web fonts today, serve WOFF2.
- x-height
- The height of a lowercase x — effectively, the height of lowercase letters without ascenders or descenders. Typefaces with large x-heights (Verdana, Inter) look bigger and read more easily at small sizes; smaller x-heights (Garamond, Futura) look more refined at large sizes.
Missing a term you expected to find? Suggest it and we'll add it. For deeper dives, start with The Anatomy of a Typeface or our practical guide to spacing.