Proportional

In a proportional typeface, each character occupies a width determined by its own shape rather than a fixed grid. An uppercase 'W' gets more horizontal space than a lowercase 'i', and that difference is embedded in the font's metrics. This is the default behavior for virtually all typefaces designed for reading — proportional spacing creates the natural, text-like flow our eyes are trained to follow.

The opposite of proportional is monospaced, where every character occupies an identical width regardless of its form. The distinction has profound consequences for readability and aesthetic. Proportional typefaces achieve better text density, more natural rhythm, and generally more readable results in paragraph text because the spacing reflects actual letter shapes rather than an artificial fixed grid.

/* Proportional fonts (the default for reading) */
body {
  font-family: 'Inter', system-ui, sans-serif;
  /* Letter spacing is naturally varied by the font metrics */
}

/* The contrast: forcing monospace for specific needs */
code, pre {
  font-family: 'Fira Code', 'Courier New', monospace;
  /* Every character takes equal width — critical for code alignment */
}

One nuance worth understanding is that proportional typefaces often include specific OpenType features that control spacing in particular contexts. Tabular figures (tnum) switch a proportional font into fixed-width number rendering — essential when displaying financial data or any numbers that need vertical alignment across rows:

/* Proportional default — natural for prose */
.price-description {
  font-family: 'Source Sans 3', sans-serif;
  font-variant-numeric: proportional-nums; /* explicit, this is the default */
}

/* Override to tabular for data tables */
.data-table td {
  font-family: 'Source Sans 3', sans-serif;
  font-variant-numeric: tabular-nums;
  /* Now numbers align vertically even in a proportional font */
}

Google Fonts like Inter, Source Sans 3, and Lato are all proportional typefaces designed with particular care for their spacing metrics — the proportions are refined through extensive testing across languages and contexts.

Understanding the proportional/monospaced distinction is foundational when selecting typefaces for mixed-content interfaces. Most well-designed type systems use a proportional face for UI text and body copy, and a monospaced face specifically scoped to code, terminal output, and data that requires character-level alignment.