b
Draws attention to text without conveying extra importance. Used for keywords, product names, or lead text in article summaries.
Description
The <b> element draws attention to text without conveying extra importance or urgency. It is styled with font-weight: 600 and includes typographic refinements: font-synthesis: none prevents faux bold in fonts that lack a bold weight, and font-optical-sizing: auto enables optical size adjustments.
In Vanilla Breeze, <b> also has special behavior inside code blocks — bold text gets a subtle highlight background instead of relying on weight alone, which is more visible in monospace fonts.
When to Use
- Product names in reviews or listings
- Keywords in paragraph summaries or abstracts
- Lead sentences in news articles
- UI labels that need visual weight without semantic emphasis
When NOT to Use
b vs strong
Both render as bold, but they carry different semantics:
| Element | Semantics | Screen Reader Behavior |
|---|---|---|
<b> |
Draw attention — no extra importance | Not announced differently |
<strong> |
Strong importance or urgency | May be announced with emphasis |
<!-- b: draw attention, no semantic importance --><p>Try the <b>Classic Burger</b> — our most popular item.</p> <!-- strong: convey importance or urgency --><p><strong>Warning:</strong> This action cannot be undone.</p>Examples
<p>A <b>product name</b> in a review.</p><p>A <b>keyword</b> in a paragraph summary.</p><p>The <b>lead sentence</b> of a news article.</p>Bold in Code Blocks
Inside <code> and <pre>, bold text gets a subtle highlight background (using var(--color-interactive) at 12% opacity) instead of relying on font weight alone. This is more visible in monospace fonts where weight differences can be subtle.
<pre><code>const result = <b>calculateTotal</b>(items);console.log(<strong>result</strong>);</code></pre>Combined Bold + Italic
When <b> and <i> (or <strong> and <em>) are nested, VB ensures the combined style renders correctly with font-synthesis: none to prevent browser-generated faux bold-italic.
<p>Nested bold and italic combine properly:</p><p><b><i>bold italic via b+i</i></b></p><p><strong><em>bold italic via strong+em</em></strong></p>CSS Reference
strong, b { font-weight: 600; font-synthesis: none; /* prevent faux bold */ font-optical-sizing: auto;} /* Combined bold + italic */:where(b i, i b, strong em, em strong) { font-weight: 600; font-style: italic; font-synthesis: none;} /* Bold in code — highlight background instead of just weight */:where(code, pre) :where(b, strong) { background-color: oklch(from var(--color-interactive) l c h / 0.12); border-radius: var(--radius-s); padding-inline: var(--size-2xs);} /* Italic in blockquote — de-emphasize */:where(blockquote) :where(i, em) { font-style: normal; font-weight: var(--font-weight-medium);}Key Styling Features
| Feature | Implementation | Purpose |
|---|---|---|
font-synthesis: none |
Applied to b, strong, i, em | Prevents browser from generating faux bold/italic glyphs |
font-optical-sizing: auto |
Applied to b, strong | Enables optical size adjustments in variable fonts |
| Code highlight | background-color in code/pre |
More visible bold in monospace contexts |
| Blockquote italic reset | font-style: normal in blockquote |
Prevents double-emphasis (blockquote offset + italic) |
Accessibility
<b>does not convey importance to screen readers — it is purely visual- For text that must be announced with emphasis, use
<strong>instead - Do not rely on bold alone to convey meaning — combine with context or additional markup