Font
A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
Everyday Data Visualization
A font is a specific set of letterforms in a particular typeface design, style, and size or digital specification.
- How it is used
- Supports readable, well-organized, and appropriately toned text in data visualizations.
- How deep it goes
- Defines font against typeface and gives practical selection criteria for readability, numeric tables, tone, and inclusion.
- Examples
- Compares Roboto variants, weighted paragraph fonts, numeric table styles, and contrasting sans serif tones.
- What you can do after
- Apply it by selecting readable fonts, aligned numeral styles, and restrained contrast for visualization text.
Design for Developers
A particular digital implementation or style of a typeface, often defined by weight, size, or other attributes.
- How it is used
- Guides font selection and pairing to communicate brand tone while establishing readable web-page hierarchy.
- How deep it goes
- Defines fonts within typefaces and gives practical criteria for classification, pairing, licensing, testing, weight, and spacing.
- Examples
- Uses Open Sans Regular 400, Roboto and Roboto Slab, Fira Sans weights, Montserrat, Albert Sans, and a typeface-to-mood exercise.
- What you can do after
- Apply it via Google Fonts or other licensed sources to choose, pair, test, and space readable fonts for web interfaces.
Build a Website with ChatGPT
A typeface is a designed set of letterforms and other glyphs that defines the visual style of written text.
- How it is used
- Shapes the visual style and readability of web-page text while distinguishing headings from regular content.
- How deep it goes
- Defines typeface versus font and explains CSS family selection, generic categories, and fallback order without deeper typography internals.
- Examples
- Uses Arial 16-point bold, Roboto Serif with serif fallback, and heading/text pair suggestions from Google Fonts.
- What you can do after
- Apply it via CSS and ChatGPT prompts to select heading and text typefaces with browser-safe fallbacks.
WordPress Power Toolkit: Harness AI to build next-level websites
A font is a specific set or instance of type characterized by qualities such as size, style, and weight.
- How it is used
- Guides website typography choices so text supports readability, visual tone, hierarchy, and the site’s purpose.
- How deep it goes
- Explains practical selection, sizing, line-height, testing, and WordPress configuration, while deferring accessibility testing tools and automated CSS generation.
- Examples
- Uses wedding planners, sporting-goods stores, hospitals, banks, a pet-adoption site, Verdana, and a Google Fonts selection interface.
- What you can do after
- Apply it via WordPress typography controls, font plugins, CSS assistance, device checks, and AI feedback to refine a site’s text presentation.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains font →
CSS in Depth, Second Edition
A font is a specific typeface variant defined by characteristics such as weight, style, or width.
- How it is used
- Shapes a page’s tone, hierarchy, branding, and readability through selected typeface variants.
- How deep it goes
- Explains font families, weights, styles, web-font delivery, role-based CSS, and perceived contrast without detailing font-file internals.
- Examples
- Uses Google Fonts, Sansita, Roboto, generated stylesheet links, role-based CSS declarations, and thin Helvetica Neue contrast comparisons.
- What you can do after
- Apply fonts via Google Fonts and CSS, selecting families, weights, styles, fallbacks, and readable text colors.
Web Design Playground
A distinctive design of letters, numbers, and symbols that gives a set of characters a particular visual style.
- How it is used
- Guides typeface selection for headings, body text, code, navigation, captions, and small-screen pages.
- How deep it goes
- Defines font versus typeface, classifies five families, and gives CSS selection and small-screen evaluation criteria.
- Examples
- Uses Helvetica 16-point bold, gallery headings and captions, and Playfair Display paired with Open Sans.
- What you can do after
- Apply it via CSS font-family declarations, fallback families, and typeface pairings for readable web pages.
Related concepts
- font familyequivalent to · A font family is a named collection of related fonts or typefaces sharing a visual design while differing in styles, weights, or other attributes.
- shorthand propertykind of · A CSS shorthand property sets multiple related longhand properties in a single declaration, resetting omitted properties to their initial values.
- serifincludes · A serif typeface is a typeface whose letterforms have projecting finishing strokes at the ends of their main strokes.
- sans serif typefaceincludes · A sans-serif typeface is a typeface whose letterforms lack projecting finishing strokes called serifs.
- typographyused by · Typography is the design and arrangement of written text, including typeface, size, spacing, alignment, and layout, to support readability and visual communication.
- WordPress themeconfigured by · A WordPress theme is a collection of templates, styles, and configuration files that controls a site's presentation.
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.