3 ms·

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 "nothin

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-base-font-size-that-everyone-is-keeping-a-secret-especially-chet.html 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 https://www.w3.org/TR/css-fonts-4/#font-size-adjust-prop

LoganDark 4mo ago
> > 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. That's not what that means. font-size specifies the size of the font's em box, but the correlation between the em box and the visual size of the font is not consistent across fonts. font-size-adjust can adjust how a font-face responds to the font-size so that the sizing is consistent with other fonts of that size. For example, capsize is easier to implement that way. https://seek-oss.github.io/capsize/ https://seek-oss.github.io/capsize/ (I agree that specifying font size in pixels rather than rem is bad practice.)
elxr 4mo ago
Yup, using rem for as many things as possible has always been good to me.
- sheept 4mo ago
  This is bad advice. You should only use rem for text, e.g. font sizes and paragraph margins. If the user is on a phone and has a larger default font size due to vision difficulties, making padding scale with the font size takes screen real estate away from the larger text the user needs.
  - TonyStr 4mo ago
    This is true. I use increased font size on my phone, and so many websites are borderline unusable because of massive unnecessary padding. But I am also a culprit of using rem for everything. What is the alternative? Pixels?
    - elxr 4mo ago
      Thanks for helping me realize my accidental anti-pattern. Can you link some of the sites that do that the worst. I want to use those as references to fix my UI (on increased font-sizes on small screens) before releasing an app I've spent 4+ months on.
      - CableNinja 4mo ago
        Perfect example for you: indeed.com (desktop site). unless its been fixed recently, huge swaths of area are already empty padded space, made worse by zooming
  - elxr 4mo ago
    Thanks for the tip. That does make sense, although I do think having your default CSS-defined font sizes (across your whole app, not just the main content) be a reasonable size should be the first priority. Also, not having ridiculously oversized margins, like so many 2019-2022 websites trying to look "modern" used to use. old.reddit.com is one example where the paddings still look good when magnification is set to 150-170% (which I have to do because of the tiny default font size). I think doing it that way but with better readability at 100% zoom, would be a decent solution.

LoganDark 4mo ago

> > 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. That's not what that means. font-size specifies the size of the font's em box, but the correlation between the em box and the visual size of the font is not consistent across fonts. font-size-adjust can adjust how a font-face responds to the font-size so that the sizing is consistent with other fonts of that size. For example, capsize is easier to implement that way. https://seek-oss.github.io/capsize/ https://seek-oss.github.io/capsize/ (I agree that specifying font size in pixels rather than rem is bad practice.)

elxr 4mo ago

Yup, using rem for as many things as possible has always been good to me.

sheept 4mo ago
This is bad advice. You should only use rem for text, e.g. font sizes and paragraph margins. If the user is on a phone and has a larger default font size due to vision difficulties, making padding scale with the font size takes screen real estate away from the larger text the user needs.
- TonyStr 4mo ago
  This is true. I use increased font size on my phone, and so many websites are borderline unusable because of massive unnecessary padding. But I am also a culprit of using rem for everything. What is the alternative? Pixels?
  - elxr 4mo ago
    Thanks for helping me realize my accidental anti-pattern. Can you link some of the sites that do that the worst. I want to use those as references to fix my UI (on increased font-sizes on small screens) before releasing an app I've spent 4+ months on.
    - CableNinja 4mo ago
      Perfect example for you: indeed.com (desktop site). unless its been fixed recently, huge swaths of area are already empty padded space, made worse by zooming
- elxr 4mo ago
  Thanks for the tip. That does make sense, although I do think having your default CSS-defined font sizes (across your whole app, not just the main content) be a reasonable size should be the first priority. Also, not having ridiculously oversized margins, like so many 2019-2022 websites trying to look "modern" used to use. old.reddit.com is one example where the paddings still look good when magnification is set to 150-170% (which I have to do because of the tiny default font size). I think doing it that way but with better readability at 100% zoom, would be a decent solution.