Type Fundamentals & Terminology

The full lesson

Typography is one of the most important crafts in UI/UX. Studies consistently show that roughly 95% of the information on screen is communicated through text. Yet many designers skip the vocabulary and jump straight to picking fonts. This leads to weak hierarchies, inconsistent sizing, and interfaces that break in edge cases. Building a solid mental model of how type works — its anatomy, its classification, its measurement — makes every decision faster and easier to defend.

Type Anatomy: The Vocabulary Behind Every Letterform

Every typeface is built from a shared set of structural parts. Knowing these terms lets you describe problems clearly (“the descenders are clipping in that input field”) and communicate precisely with type designers, engineers, and brand teams.

Term	Definition
Baseline	The invisible line that most lowercase letters sit on. Critical for vertical alignment in mixed-size layouts.
Cap height	Distance from the baseline to the top of a flat uppercase letter (H, I). Used to optically align icons with text.
x-height	Height of the lowercase ‘x’. A key driver of perceived size and legibility at small scales.
Ascender	The stroke that rises above the x-height in letters like b, d, h, k.
Descender	The stroke that drops below the baseline in g, j, p, q, y.
Stem	The main vertical or diagonal stroke of a letter.
Bowl	The closed curved part of b, d, o, p, q.
Counter	The enclosed or partially enclosed negative space inside a letter (the hole in ‘o’, the half-hole in ‘c’).
Aperture	The opening of partially enclosed forms like ‘c’ and ‘e’. Open apertures help legibility at small sizes.
Serif	Small finishing strokes at the ends of main strokes. Their presence or absence defines the two largest type categories.
Stroke contrast	The ratio between thick and thin strokes. High contrast (Bodoni) looks elegant but falls apart at small sizes. Low contrast (Helvetica) holds up better on screens.

Type Classification: Why Category Still Matters

Classifying a typeface is not just academic. The category predicts how the face will behave on screen, at what sizes, and in what contexts.

The major categories

Serif — finishing strokes are present. Subdivided by historical period and stroke contrast:

• Old-style (Garamond, Caslon): low contrast, angled stress, bracketed serifs. Comfortable for long reading.
• Transitional (Baskerville, Times): medium contrast, more vertical stress. The workhorse for body copy in print; Times New Roman is its overused descendant.
• Modern / Didone (Bodoni, Didot): extreme contrast between thick and thin strokes. At body sizes on low-DPI screens, the thin strokes disappear — use only at display sizes.
• Slab / Egyptian (Rockwell, Courier, Clarendon): minimal stroke contrast, heavy block serifs. Reads well at small sizes; common in branding and code-adjacent contexts.

Sans-serif — no finishing strokes. Four main branches:

• Grotesque (Akzidenz, Franklin Gothic): the originals; slightly irregular, with humanist quirks.
• Neo-grotesque (Helvetica, Arial): homogenized and neutral. Helvetica’s near-identical letterforms (‘rn’ vs ‘m’) can cause legibility problems at small sizes.
• Humanist (Gill Sans, Frutiger, Inter): modeled on pen-drawn letters. Higher legibility at small sizes because letterforms are more distinct.
• Geometric (Futura, Avenir): constructed from circles and lines. Stylistically strong, but the circular ‘o’ and ‘c’ can reduce legibility at body sizes.

Monospace — every character occupies identical horizontal space. Designed for code and tabular data. Never use for body copy — the forced metrics produce awkward spacing.

Display / Decorative — built for large headings only. At body sizes these faces collapse into visual noise.

Measuring Type: The Units That Matter

Font size vs. line-height

Font size sets the em square — a theoretical bounding box inherited from metal type. The actual rendered glyph may occupy considerably less vertical space than the stated size, depending on the typeface’s internal metrics.

Line-height (called “leading” in print) is the distance from one baseline to the next. You can express it three ways in CSS:

• A unitless multiplier: 1.5 (preferred — scales automatically with font size changes)
• A length: 24px (does not scale; fragile)
• A percentage: 150% (scales but introduces inheritance quirks in nested elements)

Use unitless values in CSS. A ratio of 1.4–1.6 suits most body text. Tighter ratios (1.1–1.25) work for large headings, where too much line-height looks “airy” and weakens the composition.

Em, rem, and px

Unit	Relative to	Use case
px	Absolute	Avoid for font sizes. Users who set a larger browser default font size are ignored.
em	Parent element’s font size	Good for padding and margins that should scale with the local font size.
rem	Root element’s font size (html)	Preferred for font sizes. Respects the user’s browser font preference.

Tracking, kerning, and letter-spacing

Kerning is the optical adjustment of space between specific letter pairs (AV, WA, To). Fonts include built-in kern tables. CSS font-kerning: auto enables them by default. Never disable kerning for body text.

Tracking (CSS: letter-spacing) applies uniform spacing across all letters. Legitimate use cases are narrow:

• All-caps labels: letter-spacing: 0.06–0.1em improves legibility because the uniform cap height makes letters run together without extra spacing.
• Optical tightening of very large display type: -0.01 to -0.03em at 72px+ can tighten visually loose headlines.

Adding positive tracking to body text “for an airy feel” is the most common tracking mistake. It breaks word shapes and slows reading speed.

Typeface vs. Font: The Distinction That Still Trips People Up

A typeface is a design family — Inter, Roboto, Garamond.

A font is a specific instance within that family: Inter Regular 16px, Inter Bold 24px. In the metal-type era, each font was a physical tray of letter sorts. Today the terms blur in casual use, but precision matters when specifying assets, licensing, or variable font axes.

A font family is the group of related fonts sharing a common design: Inter Regular, Inter Italic, Inter Bold, Inter Bold Italic.

A font file (.woff2, .ttf, .otf) is the software artifact you load in a browser or OS. One variable font file can contain the full design space. A traditional font family may require four or more separate files.

Type Scale and Hierarchy: From Vocabulary to System

A type scale is an ordered set of font sizes following a consistent ratio. Common ratios:

Name	Ratio	Sizes from 16px base
Minor Third	1.2×	11, 13, 16, 19, 23, 28
Major Third	1.25×	10, 13, 16, 20, 25, 31
Perfect Fourth	1.333×	9, 12, 16, 21, 28, 37
Golden Ratio	1.618×	6, 10, 16, 26, 42, 68

The Golden Ratio produces dramatic size jumps — useful for editorial layouts but often too wide for dense product UIs. The Major Third or Perfect Fourth are the most versatile choices for application interfaces.

Typographic hierarchy communicates the relative importance of content. It works through a combination of size, weight, color, and spacing — not size alone. Relying only on size forces you to make headings unrealistically large before the hierarchy reads clearly.

Effective hierarchy uses at least two variables together:

• Size + weight: increase both for headings.
• Size + color: use a muted text color for secondary labels alongside full-opacity primary text.
• Weight alone: bold vs. regular at the same size creates strong inline emphasis without disrupting line rhythm.

OpenType Features: The Invisible Layer of Quality

OpenType features are instructions embedded in a font file. They activate alternate glyph shapes, ligatures, and number styles. CSS exposes them via font-feature-settings and the higher-level font-variant-* properties.

Key features for UI design:

• Ligatures (liga): merge character pairs like ‘fi’ and ‘fl’ into a single glyph to prevent stroke collisions. Enabled by default in most browsers — keep them on.
• Tabular figures (tnum): all numerals occupy equal width. Essential in data tables, pricing, and dashboards — without this, columns of numbers shift as values change.
• Oldstyle figures (onum): numerals with ascenders and descenders, designed to blend with lowercase text. Use in body paragraphs where a phone number would otherwise visually jump out.
• Small caps (smcp): true small capitals drawn at the correct optical weight, not mechanically scaled uppercase. Use for abbreviations, acronyms, and navigation labels to reduce visual shouting.

A common outdated pattern is faking small caps by applying font-size: 0.75em; text-transform: uppercase. This produces lightweight, poorly spaced impostors. Use the OpenType smcp feature from a font that actually contains small caps.

Contrast and Legibility: What the Numbers Mean

WCAG 2.2 measures text contrast using a relative luminance formula, expressed as a ratio:

• 4.5:1 — minimum for normal text (under 18pt/24px regular, or under 14pt/~18.7px bold). This is WCAG 2.2 AA and the current legal baseline.
• 3:1 — minimum for large text (18pt+ regular or 14pt+ bold) and non-text UI components.
• 7:1 — WCAG AAA for normal text; an aspirational target for highly legible interfaces.

APCA (Advanced Perceptual Contrast Algorithm) is a more nuanced model. It accounts for font weight, size, and polarity (light text on dark vs. dark text on light). As of 2026, APCA is useful as a supplementary quality lens but has not been adopted into any ratified WCAG version. WCAG 2.2 AA remains the compliance baseline.

One outdated pattern to avoid: using low-contrast muted text (gray-400 on white) to “de-emphasize” supporting content. Instead, use whitespace, size, and weight differences — the text should still pass 4.5:1.

Variable Fonts and the Modern Font Stack

A variable font is a single font file with one or more design axes — weight, width, optical size, slant — that you can set to any value within a range, rather than choosing from discrete steps. This matters for three reasons:

1. File size: one variable font file replaces four or more static files. A single Inter variable font covers the full weight range.
2. Fluid typography: with clamp() and CSS custom properties, weight and size can interpolate smoothly across viewport sizes rather than jumping at breakpoints.
3. Optical sizing: the opsz axis adjusts letterform details (thin strokes, aperture size) for the intended display size — a font set at opsz: 8 will have wider counters and slightly heavier thin strokes than the same font at opsz: 72.

/* Modern fluid type using rem floors and clamp */
:root {
  --text-body: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-heading-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  font-family: 'Inter Variable', system-ui, sans-serif;
}

body {
  font-size: var(--text-body);
  font-optical-sizing: auto; /* activates opsz axis */
  line-height: 1.5;
}

This approach satisfies WCAG 1.4.4 (zoom) because the rem floor scales with the user’s browser default, while clamp() prevents text from becoming unwieldy on very large viewports.