How to make text bold or italic

Short answer

font-weight sets the boldness and font-style the italic:

<p style="font-weight: 700;">Bold text</p>
<p style="font-style: italic;">Italic text</p>

Weight steps

font-weight takes numbers from 100 to 900: 400 is normal text, 700 is bold. In-between values only work if the font has those weights.

<p style="font-family: system-ui, sans-serif; font-size: 20px; margin: 0;">
  <span style="font-weight: 300;">Light</span> · <span style="font-weight: 400;">Regular</span> ·
  <span style="font-weight: 600;">Semibold</span> · <span style="font-weight: 800;">Extra bold</span>
</p>

Tags or CSS

If the emphasis matters for meaning — a warning, a key word — use strong and em: screen readers and search engines understand them. If it is purely visual, like bold prices on cards, use CSS.

<p><strong>Warning:</strong> the store closes at <em>6 pm</em> today.</p>

Removing bold

Headings and th are bold by default. font-weight: normal (or 400) brings back the regular weight.

Common mistake

Using font-weight: bold with a font that has no bold weight: the browser draws a "fake" bold by smearing the letters. Load the weight's file or pick a font that has it.