Font-weight
Font weight is a typographic property specifying the relative thickness or visual heaviness of text glyphs, commonly through named or numeric values.
Everyday Data Visualization
A typographic variation that controls the relative heaviness of a typeface's strokes.
- How it is used
- Establishes readable small text and controlled visual hierarchy in data visualizations.
- How deep it goes
- Defines stroke thickness, then gives perceptual rationale and practical guidance for readability and emphasis.
- Examples
- Uses Roboto and three paragraph weights, a bold fruit-chart title, a gender-pay-gap callout, and Tableau dashboard text.
- What you can do after
- Apply it to keep small text readable and reserve heavier weights for intentional emphasis.
Design for Developers
Font weight is the relative thickness of a typeface's strokes, commonly represented by named or numeric values such as Regular and Bold.
- How it is used
- Creates contrast, emphasis, and content hierarchy across body copy, headings, and important text.
- How deep it goes
- Explains named and numeric weights, selection tradeoffs, hierarchy, performance, and variable-font interpolation without property syntax details.
- Examples
- Uses Regular 400 versus Extra-bold 800 in Fira Sans and compares clearer bold heading contrast with similar-weight text.
- What you can do after
- Apply it to choose readable body weights, distinct heading weights, and a restrained set of loaded font files.
Web Design Playground
A CSS property that sets the weight or thickness of text glyph strokes, including normal and bold variants.
- How it is used
- Applies visual bolding to titles, lead text, contact information, and other text without semantic emphasis.
- How deep it goes
- Explains keywords, numeric weights from 100 through 900, and unsupported-typeface behavior without covering font-weight internals.
- Examples
- Demonstrates 100, 400, and 700 on span elements and identifies 400 and 700 in a hosted Lato font.
- What you can do after
- Apply it via CSS to create visual bolding, compare supported weights, or restore regular text on bold-default elements.
Related concepts
- @font-faceconfigured by · The CSS @font-face at-rule defines a font resource and descriptors that associate it with a font family and style.
- CSSused by · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- fontpart of · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
- strong elementcontrasts with · The HTML strong element marks content as having strong importance, seriousness, or urgency.
- b elementcontrasts with · The HTML b element marks text as stylistically distinct without conveying strong importance or emphasis.
- font-variation-settingsequivalent to · The CSS font-variation-settings property provides low-level control over registered and custom variation axes in a variable font.
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.