In 2026, you can avoid the bad parts.

> Let's start with the basics: if you write`font-size: 16px`then `16px` is the size of what? Sadly, the answer is "nothing in particular" -- this is a size of a virtual box around the glyph, but the box isn't tight, and the size of the glyph varies, depending on the font. Luckily, `font-size-adjust` property can fix it, and make `font-size` consistent across fonts.

All modern browsers default to 16px, but for accessibility and sanity reasons, we shouldn't use pixels.

By default, 16px = 1rem. You don't need to declare it; it just is.

Also by default, 16px = 100% if using percentage for font-size.

See "The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet" - https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest...

> Can you just set `font-size: 18px`or whatever works best for your chosen font? I think the answer is yes, but there are some caveats to keep in mind.

If you want to manually increase the base size, using relative units is the answer: `html { font-size: 1.125rem }`. Since by default, 1rem = 16px, 1.125rem is 18px.

> Setting `font-size` in your CSS disables that second approach.

Setting `font-size` in pixels disables changing the browser's default size; works fine with relative sizes.

If the goal is not having to learn the intricacies of CSS, just use the built-in type scale:

    | CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large |
    | ------------------------ | -------- | ------- | ----- | ------ | ----- | ------- | -------- | --------- |
    | scaling factor           | 3/5      | 3/4     | 8/9   | 1      | 6/5   | 3/2     | 2/1      | 3/1       |
    | HTML headings            | h6       |         | h5    | h4     | h3    | h2      | h1       |           |

By default, medium is 16px which is 1rem.

You can write `p { font-size: medium }`.

BTW, the main use case of `font-size-adjust` is for changing the font size of your fallback font incase your primary web font doesn't load or if it takes too long depending on what `font-display` is set to. You want the metrics of the fallback font to match the primary font so the text doesn't shift [1].

[1]: https://www.w3.org/TR/css-fonts-4/#font-size-adjust-prop