Font family
A font family is a named collection of related fonts or typefaces sharing a visual design while differing in styles, weights, or other attributes.
Everyday Data Visualization
A coordinated family of letter, numeral, and symbol designs sharing a common visual style.
- How it is used
- Supports readable data visualizations by coordinating text styles and creating restrained hierarchy.
- How deep it goes
- Defines typeface and font, then gives practical family-based contrast guidance without detailing font construction.
- Examples
- Uses Roboto and Roboto Serif in chart titles, plus fruit-chart annotations and single-story versus double-story letters.
- What you can do after
- Apply it by selecting related styles for supporting text, titles, and limited emphasis in visualizations.
Web Design Playground, Second Edition
A typeface is a distinctive visual design shared by a related set of letters, numbers, and symbols.
- How it is used
- Sets a typeface on page elements to replace browser-default text styling and shape a page’s visual tone.
- How deep it goes
- Defines typeface categories and ordered fallback declarations, while deferring deeper typography to later treatment.
- Examples
- Uses Optima, Calibri, and sans-serif fallbacks, plus cursive headings and readable gallery captions.
- What you can do after
- Apply it via CSS to select typefaces and write ordered fallback lists for page text.
Read how Web Design Playground, Second Edition explains font family →
Design for Developers
A coordinated group of related type designs or fonts that share a common visual character and are available in multiple styles or weights.
- How it is used
- Establishes typographic hierarchy, emphasis, tone, and consistency across web pages and applications.
- How deep it goes
- Explains styles, weights, pairing, semantic markup, and type ramps, but stops short of detailed font-loading implementation.
- Examples
- Uses Roboto, Roboto Slab, and Fira Sans to demonstrate superfamily pairing and contrasting weights within one family.
- What you can do after
- Apply it via HTML and CSS by selecting family variants, assigning type-ramp roles, and marking italic meaning semantically.
Related concepts
- fontequivalent to · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
- serifincludes · A serif typeface is a typeface whose letterforms have projecting finishing strokes at the ends of their main strokes.
- font-family propertyconfigured by · The CSS font-family property specifies a preferred typeface or ordered sequence of fallback typefaces for rendering text.
- landing pageused by · A landing page is a focused web page serving as an entry point for visitors from a particular source or purpose, often presenting information or prompting an action.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.