A font family is a coordinated set of related type designs offered in multiple styles and weights. These variations create emphasis, hierarchy, and a consistent visual voice across an interface. section 8.1.3 section 8.2.3
Use one family’s range deliberately rather than treating every style as interchangeable. Italics can be true cursive designs, while obliques generally only slant the regular design; weights range from thin through black. section 8.1.3
Make font-family decisions that support readable, coherent interfaces:
- Choose contrasting sizes, styles, or weights for headings and body copy so the hierarchy is immediately visible. section 8.2.2
- Pair fonts within one family or superfamily when you want a cohesive result; related designs can still provide useful contrast. section 8.2.2
- Map the family’s styles to a type ramp so similar pages use consistent headings, subheadings, body text, and captions. section 8.2.3 section 8.1
- Keep markup semantic: use <em> for emphasis, <i> for an alternate voice or technical distinction, and CSS for purely visual italics. section 8.1.3
A single-family heading and body pairing
Use Fira Sans Regular 400 for body copy and Extra-bold 800 for headings. The shared family keeps the page cohesive, while the weight difference makes the hierarchy clear. section 8.2.2
