How to change the font size

Short answer

font-size sets the size:

<p style="font-size: 24px;">Large text</p>
<p style="font-size: 0.875rem;">Small print</p>

Which units to pick

px means exact pixels. rem is a share of the root element's font size (usually 16px), so 1.5rem is 24px. em is a share of the parent's font: handy for padding inside a button, but nested em values multiply.

<div style="font-size: 20px;">
  Parent 20px
  <p style="font-size: 1.5em; margin: 0;">1.5em = 30px</p>
  <p style="font-size: 1.5rem; margin: 0;">1.5rem = 24px</p>
</div>

For body text and headings rem is the most convenient: sizes stay consistent, and if a person increases the font in the browser settings, everything grows together.

A size that grows with the screen

For large headings there is clamp() — more in the answer about responsive font size.

Common mistake

Do not make body text smaller than 16px: it is hard to read on a phone. And do not set the html size in pixels — html { font-size: 10px; } overrides the user's font size setting for the whole site.