A typography glossary,
in plain English.

43 terms you will meet when you inspect fonts, read a type specimen or write CSS. Each one is explained in a few sentences, with a link when you want more.

Aperture

The opening of a partly enclosed letter such as c, e, a or s. Open apertures make letters easier to tell apart at small sizes, which is why interface fonts such as Inter have them and Helvetica, with its tight apertures, struggles on small screens.

Ascender

The part of a lowercase letter that rises above the x-height, as in b, d, h and k. Fonts with long ascenders look elegant but need more line height.

Baseline

The invisible line that letters sit on. Line height is measured from one baseline to the next. Line height and letter spacing →

Cap height

The height of a flat capital letter such as H, measured from the baseline. It is usually a little shorter than the ascenders.

Contrast (stroke)

The difference between the thick and thin parts of a letter. Didot and Bodoni have extreme contrast. Most sans serifs have very little. Not to be confused with color contrast between text and background. Text contrast checker →

Counter

The enclosed or partly enclosed space inside a letter, such as the hole in o or the bowl of d. Large counters help legibility at small sizes.

Descender

The part of a letter that drops below the baseline, as in g, j, p, q and y. Tight line height makes descenders collide with the ascenders of the next line.

Display font

A typeface designed for large sizes: headlines, posters and logos. Display fonts have finer details and tighter spacing than text fonts, and often fall apart in paragraphs.

Em

A unit equal to the current font size. In CSS, 1em is the font size of the element, so em-based spacing scales with the text around it. rem vs em vs px →

Fallback font

The font a browser uses when the preferred one is missing, still loading or lacks a character. It comes from the next name in the font-family list. CSS font stacks and fallbacks →

Font stack

The ordered list of families in a font-family declaration. The browser uses the first one it can, character by character. Font stack builder →

Font vs typeface

A typeface is the design, such as Helvetica. A font is one file or style of it, such as Helvetica Bold. In everyday use, including on this site, the two words are interchangeable.

font-display

The CSS descriptor that controls what visitors see while a web font loads: invisible text, a fallback that swaps, or no swap at all. font-display explained →

@font-face

The CSS rule that connects a font file to a family name, weight and style so the page can use it. @font-face generator →

Foundry

A company that designs and publishes typefaces, such as Monotype, Klim, Commercial Type or Dinamo. A foundry is where you buy a license. Font licensing explained →

Geometric sans

A sans serif built from circles and straight lines, such as Futura, Gotham or Circular. Geometric fonts feel modern and clean and are most at home in headlines. Free alternatives to Futura →

Glyph

A single drawn shape in a font. One character can have several glyphs, such as a regular a and an alternate single-storey a.

Grotesque and neo-grotesque

The plain, workmanlike sans serifs that began in the 19th century, and their tidier 20th-century descendants such as Helvetica and Univers. Inter and Roboto continue the line. Free alternatives to Helvetica →

Humanist sans

A sans serif with proportions and stroke endings borrowed from handwriting and Roman capitals, such as Gill Sans, Frutiger or Open Sans. Humanist fonts are warm and very readable in text.

Kerning

Adjustment of the space between specific pairs of letters, such as A and V, built into the font by its designer. CSS controls it with font-kerning. Compare tracking.

Leading

The print term for the space between lines, named after the strips of lead once placed between rows of metal type. The CSS equivalent is line-height. Line height calculator →

Ligature

Two or more letters drawn as a single glyph, such as fi or ffl, to avoid awkward collisions. Coding fonts use ligatures to turn => into an arrow.

Line height

The distance from one baseline to the next. In CSS it is best written as a unitless number, such as 1.5, so it scales with the font size. Line height and letter spacing →

Measure

The length of a line of text. Around 45 to 75 characters is a comfortable range for paragraphs. Longer lines need more line height.

Monospaced font

A font in which every character has the same width, such as Courier, Consolas or JetBrains Mono. Used for code and for tables of figures. Free alternatives to Consolas →

OpenType features

Optional behaviors built into a font, such as ligatures, small caps, old-style numerals and stylistic sets. CSS switches them on with font-variant properties or font-feature-settings.

Optical size

A design adjustment for the size text will be shown at: sturdier and more open for small text, finer and tighter for headlines. In variable fonts it is the opsz axis. Variable fonts explained →

Rem

A CSS unit equal to the font size of the root element, 16px by default. Sizes in rem respect the reader’s browser settings. PX to REM converter →

Rendered font

The font the browser actually draws, as opposed to the one the CSS asks for. They differ whenever a fallback is showing. How to identify fonts on a website →

Sans serif

A typeface without serifs. The main families are grotesque, geometric and humanist.

Serif

The small finishing stroke at the end of a letter’s main strokes, and any typeface that has them, such as Garamond, Georgia or Times New Roman.

Slab serif

A serif typeface with thick, block-like serifs, such as Rockwell or Roboto Slab. Slabs feel sturdy and work well in headlines.

Stylistic set

A group of alternate glyphs a font designer offers as an option, numbered ss01 to ss20. Many brand sites switch one on to give a common font a slightly different voice.

System font

A font that ships with an operating system, such as San Francisco on Apple devices, Segoe UI on Windows and Roboto on Android. A site can use it without downloading anything. The system font stack →

Tabular figures

Numerals that all share one width so columns of numbers line up. Switch them on with font-variant-numeric: tabular-nums. The opposite is proportional figures.

Tracking

Uniform spacing added to or removed from a whole run of text. In CSS it is letter-spacing. Compare kerning, which adjusts specific pairs. Letter spacing converter →

Type scale

A limited set of font sizes that relate to each other by a ratio, such as 1.25. It gives a page a consistent hierarchy. Type scale calculator →

unicode-range

An @font-face descriptor listing the characters a font file covers. The browser downloads the file only if the page uses one of them, which is how large families are split into language subsets.

Variable font

A single font file that contains a whole range of styles along axes such as weight, width and optical size. It allows in-between values like a weight of 450. Variable fonts explained →

Web font

A font file a website sends to the browser, usually in WOFF2 format, so every visitor sees the same typeface whatever is installed on their device.

Weight

How thick the strokes of a font are, from 100 (Thin) to 900 (Black) in CSS. Regular is 400 and Bold is 700. Font weight numbers and names →

WOFF2

The compressed font format made for the web and supported by every current browser. It is the only format most sites need to serve.

x-height

The height of the lowercase x, and so of the main body of lowercase letters. A tall x-height makes a font look bigger and clearer at the same font size, which is why two fonts at 16px can look quite different in size.