Fonts and Font Families
A font menu presents a design as something you can choose by name. Within that choice, an application may offer Regular, Bold, Italic, and other styles. Behind those familiar names are two relationships: the visual relationship among the designs and the identifying information that tells software how to organize them.
Font Families and Typefaces
A font family is a group of related fonts that share a design identity. Its members may differ in weight, width, slope, or other characteristics while remaining recognizably part of the same design.
Weight describes the relative heaviness of the forms, from light to heavy. Width distinguishes narrower and wider designs. Slope concerns their upright or inclined character. Names such as Light, Condensed, and Bold Italic help people choose among those differences.
A family need not contain a particular number of members. It may consist of a single font, the familiar four styles Regular, Bold, Italic, and Bold Italic, or a larger collection with several weights and widths. Other distinctions can include versions designed for different reading sizes. The shared identity is what makes the collection a family; having four files is not the definition.
A typeface is the design itself: the system of forms and proportions that makes the members recognizably related. A font is a usable realization of that design, containing glyph data, metrics, and rules for text rendering. A font family groups the related realizations.
Consider a fictional family called Orchard Sans, with Regular, Bold, Italic, and Bold Italic members. Orchard Sans is the shared typeface design. The family brings its four members together. Each of these four font files provides one style as data an application can use.
The relationship is visual as well as nominal. The Bold may require changes to shapes and spacing so its heavier forms retain the character of the design. The Italic may use different letter constructions rather than merely leaning the upright drawings. A common family name identifies their intended relationship, while their drawings make that relationship convincing.
For a static font, the chosen design is fixed: its data describes a particular style. Selecting another weight normally means selecting another font. A variable font can contain a range of related designs in one file, so “font” does not always mean one fixed style.
Font Identification and Style Linking
Internal names
The name of a file on disk and the name shown in a font menu serve different purposes. The filename helps you identify the file. The application reads identifying information inside the font to determine what it is and how it belongs with other fonts.
In an OpenType font, a structure called the name table stores identifying strings. The principal names for this discussion are the typographic family name, typographic style name, full font name, and PostScript name.
Continuing the fictional Orchard Sans example, one member could have these names:
| Identifier | Example | Purpose |
|---|---|---|
| Typographic family name | Orchard Sans | Identifies the broad family shared by related styles |
| Typographic style name | Bold Italic | Distinguishes this member within the family |
| Full font name | Orchard Sans Bold Italic | Identifies the complete font in a human-readable form |
| PostScript name | OrchardSans-BoldItalic |
Provides a technical identifier used in font and document workflows |
The family name brings the styles together, while the style name distinguishes one member from another. The full name combines their identity for contexts that need a complete name. The PostScript name provides a separate technical form of that identity. These are related strings with different jobs, not interchangeable labels.
The installed file might be called OrchardSans-BoldItalic.otf, but changing that filename would not rewrite the names stored inside it. A file named OrchardSans-Bold.otf could still identify itself internally as another style. Renaming the file alone would not repair that mismatch.
Applications and operating systems do not all present families identically. Their naming support and font-selection behavior affect what appears in a menu. Nevertheless, coherent internal names are essential input: visually related fonts do not automatically group themselves just because their drawings match.
Web documents add another naming layer. A CSS @font-face declaration can assign the family name used by the page independently of the font's internal family name. Internal naming remains part of the font's identity, but the family name seen in a stylesheet need not be a literal copy of it.
Style linking
Family membership does not by itself explain what should happen when a user presses a Bold or Italic button. Style linking expresses the relationships used by applications that select styles through those two choices.
In the familiar four-style model, each member has a distinct role:
| Style role | Bold | Italic |
|---|---|---|
| Regular | Off | Off |
| Bold | On | Off |
| Italic | Off | On |
| Bold Italic | On | On |
Starting with Regular, turning on Bold asks the application for its bold companion. Turning on Italic as well asks for the bold italic companion. Correct links let the application select the intended supplied fonts rather than treating each member as unrelated.
This grouping is constrained to the four combinations. A larger typographic family may contain Light, Medium, Semibold, several widths, and other members that cannot all occupy distinct positions in one four-style group. The broad family relationship and the smaller style-linking groups therefore have to be considered separately.
If naming and linking disagree, the user's experience can become confusing. A font may appear outside its expected family, or a style button may fail to select its intended companion. Depending on the application and available fonts, the result may instead be a simulated style. The quality of the outlines cannot correct an identification problem.
For the naming fields and their configuration, see Naming Fonts and Families. Assembling finished members into a coherent family is covered in From Fonts to Families.
Variable Fonts
A variable font contains a range of designs within one font file. Instead of selecting only from separate fixed styles, an application can request a position within a range the designer has provided. The designer establishes the range, and the system interpolates intermediate designs within it. This makes continuous weight adjustment, responsive web typography, and fine optical-size choices possible without delivering a separate file for every combination. Variable fonts are a central direction of font technology and an integral part of this manual’s workflow. Weight and width are familiar possibilities, as is optical size: the adaptation of a design to its intended reading size.
A weight range, for example, can provide choices between named styles such as Light and Bold. The designer can retain familiar names for selected positions while also making intermediate choices available. The range is part of the designed font data, not a request for the application to thicken an arbitrary drawing.
This makes fine adjustments possible where the application supports them, including changes suited to different sizes or layouts. A variable font contains the ranges chosen for that design; it does not necessarily combine every member of a family into one file.
For the design model behind these ranges and the workflow for building them, see The Variation Model.