Typography Glossary

The invisible line on which most letters sit. Descenders extend below the baseline.

The height of lowercase letters (like 'x') measured from the baseline. A key factor in perceived font size and readability.

The part of a lowercase letter that extends above the x-height, as in 'b', 'd', 'h', 'k', 'l'.

The part of a letter that extends below the baseline, as in 'g', 'j', 'p', 'q', 'y'.

The height of a capital letter measured from the baseline to the top of flat capitals like 'H' or 'I'.

The difference between the thickest and thinnest parts of a letter's strokes. High-contrast fonts (like Didot) have dramatic variation.

Two or more letters combined into a single glyph, like 'fi' or 'fl'. Common in serif fonts and coding fonts (e.g., Fira Code).

A single visual representation of a character. One character can have multiple glyphs (e.g., regular and italic 'a').

The enclosed or partially enclosed space within letters like 'o', 'e', 'p'. Open counters (as in 'c') are called apertures.

The curved stroke creating an enclosed counter in letters like 'b', 'd', 'p', 'q'. The shape varies widely between typefaces.

The main vertical stroke of a letter, such as the upright in 'l', 'b', 'd'. The heaviest stroke in most typeface designs.

Any line that forms part of a letter — vertical, horizontal, diagonal, or curved. Stroke contrast defines much of a typeface's character.

The end of a stroke that doesn't have a serif — can be ball, beak, teardrop, or flat shaped. Terminal style is a key identifier of type classification.

The horizontal stroke in letters like 'A', 'H', 'e', 'f'. Its position relative to the x-height affects readability.

An extended, decorative stroke on a letter, common in italic and display fonts. Adds elegance and flair to headings.

The opening of a partially enclosed counter in letters like 'c', 'e', 's'. Wider apertures generally improve readability at small sizes.

A small decorative stroke added to the end of a letter's main strokes. Serif fonts (like Times New Roman) have these; sans-serif fonts don't.

A typeface without serifs — 'sans' means 'without' in French. Clean, modern appearance popular in digital design.

A typeface where every character occupies the same horizontal width. Essential for code editors and tabular data.

The overall design of a set of characters — the artistic creation. Often confused with 'font', which is a specific size/weight/style of a typeface.

A specific instance of a typeface at a particular weight, size, and style. For example, 'Inter Bold 16px' is a font; 'Inter' is the typeface.

Typefaces designed for use at large sizes — headlines, posters, logos. Not optimized for body text readability at small sizes.

Typefaces based on connected, flowing handwriting. Range from formal calligraphic styles to casual brush scripts.

Serif typefaces with thick, block-like rectangular serifs. Strong visual presence for headlines, UI elements, and branding.

A typeface where each character has a different width based on its shape — 'w' is wider than 'i'. The default for most fonts.

Refined sans-serif style from the 1950s with uniform strokes and neutral appearance. The dominant style in modern UI design.

Sans-serif typefaces built on geometric shapes — circles, rectangles, triangles. Clean and modern but can feel cold at small sizes.

Sans-serif typefaces inspired by Renaissance handwriting with organic stroke variation. Warmer and more readable than geometric styles.

The adjustment of space between individual letter pairs to achieve visually consistent spacing.

The uniform adjustment of spacing across an entire range of characters, unlike kerning which targets specific pairs.

The vertical distance between lines of text, measured from baseline to baseline. Named after lead strips used in letterpress printing.

A typographic unit equal to the current font size. In CSS, 1em = the parent element's font size. The basis for relative sizing.

The CSS property controlling the distance between words — default is defined by the font's space character width.

The intentional empty space in a design that gives text and elements room to breathe. Critical for readability and visual hierarchy.

The length of a line of text, typically 45–75 characters for optimal readability. Too long or too short reduces reading comfort.

A group of related fonts that share the same basic design but vary in weight, width, or style. In CSS, the font-family property specifies preferred fonts.

The thickness of character strokes, typically ranging from 100 (Thin) to 900 (Black). Regular is 400, Bold is 700.

A font specifically designed or licensed for use on websites, loaded via CSS @font-face or services like Google Fonts.

A single font file containing an entire range of weights, widths, or other variations. Reduces HTTP requests and file size.

A font format developed by Microsoft and Adobe supporting advanced typographic features like ligatures, alternates, and variable axes.

Instructions embedded in a font that improve its rendering at small sizes on low-resolution screens by aligning outlines to the pixel grid.

Smoothing the jagged edges of rendered text by blending edge pixels. CSS: -webkit-font-smoothing: antialiased.

The most common open-source font license. Allows free use, modification, and redistribution. All Google Fonts use OFL or Apache 2.0.

Web Open Font Format 2.0 — Brotli-compressed, the most efficient font format for the web. ~30% smaller than WOFF, supported by all modern browsers.

Removing unused characters from a font file to reduce download size. For example, loading only Latin characters instead of the full Unicode range.

CSS descriptor in @font-face that specifies which Unicode characters to download from a font file, enabling automatic subsetting by the browser.

CSS property to control OpenType features — ligatures, small caps, tabular numbers, stylistic alternates. Use font-variant for simpler cases.

JavaScript API (document.fonts) for programmatic font loading control — check if fonts are loaded, preload specific fonts, and respond to load events.

CSS property to control variable font axes directly — weight, width, slant, and custom axes. Lower-level than font-weight/font-stretch.

The practice of selecting two or more complementary fonts to use together in a design. Usually combines a heading font with a body font.

A harmonious progression of font sizes based on a ratio (e.g., 1.25, 1.333, 1.5). Creates visual hierarchy and consistency.

The visual organization of text using size, weight, color, and spacing to guide readers through content in order of importance.

Adjusting letterform details based on the intended display size. Small text needs more spacing and heavier strokes; large text can be more refined.

Typography that adapts to different screen sizes — using media queries, viewport units, or CSS clamp() for fluid scaling.

Consistent spacing pattern that aligns text baselines and element spacing to a baseline grid. Creates visual harmony on the page.

A sequence of harmonious numbers based on a ratio (e.g., 1.25 minor third, 1.333 perfect fourth, 1.618 golden ratio) used to set type sizes.

The overall visual density or texture of a block of text on a page — affected by font weight, size, line-height, and letter-spacing.

Typography that scales smoothly between minimum and maximum sizes using CSS clamp() — no breakpoint jumps needed.

The CSS property controlling the distance between lines of text. Typically set to 1.5 or 150% for body text readability.

The CSS property for adjusting spacing between all characters. Positive values spread letters apart; negative values bring them closer.

A CSS at-rule that allows web designers to specify custom fonts for their web pages. The foundation of web typography.

An ordered list of fonts in CSS font-family, providing fallbacks if the preferred font is unavailable. E.g., 'Inter, system-ui, sans-serif'.

A font pre-installed on the operating system. Using system fonts (system-ui stack) eliminates download time but sacrifices brand consistency.

Flash of Unstyled Text — when a fallback font briefly appears before the web font loads. Mitigated by font-display: swap.

Flash of Invisible Text — when text is hidden until the web font loads. Worse than FOUT for user experience. Prevented by font-display: swap.

A CSS descriptor that controls how a web font is displayed during loading. Values: auto, block, swap, fallback, optional.

Root em — a CSS unit relative to the root element's font size (usually 16px). More predictable than em for consistent sizing.

Google's free, open-source font library with 1,900+ families. The largest collection of freely-licensed web fonts, served via a global CDN.

Using <link rel="preload" as="font"> to prioritize font downloads, reducing FOUT/FOIT and improving Largest Contentful Paint (LCP).

Cumulative Layout Shift caused by font loading — text reflows when web font replaces fallback due to different metrics. A Core Web Vital issue.

CSS property controlling text rendering quality: auto, optimizeSpeed, optimizeLegibility, geometricPrecision. Affects kerning and ligatures.

How easily individual characters can be distinguished from each other — an intrinsic quality of the typeface design itself.

How comfortably extended text can be read in longer passages — affected by font choice, size, line-height, measure, and color contrast.

Typography practices ensuring content is usable by everyone — sufficient contrast, scalable text, clear hierarchy, and appropriate font choices.

Web Content Accessibility Guidelines as applied to text — minimum contrast ratios (4.5:1 AA, 7:1 AAA), resizable text, and no images of text.

Fonts designed for improved readability for dyslexic readers — with unambiguous letterforms, generous spacing, and weighted bottoms to anchor letters.

The luminance ratio between foreground text and background color. WCAG requires 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA).

Johannes Gutenberg invented movable type printing around 1440, enabling mass production of books and democratizing access to written knowledge.

The iconic neo-grotesque typeface designed by Max Miedinger in 1957. Defined modern graphic design and remains the world's most recognized font.

The geometric sans-serif designed by Paul Renner in 1927, embodying Bauhaus modernism. Its influence is seen in Poppins, Montserrat, and Raleway.

The influential old-style serif typeface by Claude Garamond (~1530). One of the oldest typeface designs still in active use, nearly 500 years later.

The Bauhaus school (1919–1933) revolutionized typography with geometric forms, sans-serif preference, and the principle that form follows function.

The International Typographic Style (1950s–) emphasized grids, asymmetric layouts, and sans-serif typefaces. Helvetica was its poster child.