Typeface

A typeface is the overall design system for a set of characters — the artistic and conceptual creation that defines the visual form of letters, numbers, punctuation, and symbols as a unified whole. When you refer to 'Helvetica', 'Garamond', or 'Inter' as a design, you're talking about the typeface.

The distinction between typeface and font is frequently confused, including in everyday designer conversation and even in CSS property names. The CSS property font-family is named from the font perspective, but what you're actually selecting is a typeface family. In strict typographic language: a typeface is the design; a font is the specific physical (historically metal) or digital implementation at a particular size and style.

/* 'Inter' is the typeface. These are the fonts within it: */
.inter-regular {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Inter Regular — a specific font */
}

.inter-bold {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Inter Bold — a different font */
}

.inter-italic-medium {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: italic; /* Inter Medium Italic — yet another font */
}

A typeface family typically includes multiple coordinated fonts: different weights (Thin, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black), different widths (Condensed, Normal, Extended), and different styles (Roman, Italic). Variable fonts collapse all of these variations into a single file, making the font/typeface distinction feel more conceptual than practical.

When selecting typefaces for a project, the decision goes beyond aesthetics. A typeface is a system — you're choosing not just what the 'A' looks like, but how the entire language's alphabet will render across sizes, weights, and contexts. A well-designed typeface family like Inter has carefully considered how all its members work together, and how each member works across the full range of UI scales from 11px labels to 72px heroes.

Evaluating a typeface means examining the full breadth of its character set, not just the default lowercase. Check the numbers (are they oldstyle or lining?), the punctuation (does the em dash have appropriate visual weight?), the diacritics (does the á maintain the same quality as the 'a'?), and the italic (is it a true italic or simply a slanted roman?). A typeface that excels across all these dimensions is ready for production; one that cuts corners in the details will show its weaknesses at scale.