The browser default font size is usually 16px, but users can
change it. If you need the actual value, reading the computed style on
html won't work because your stylesheet might have overridden
it.
The trick is the CSS medium keyword. It always resolves to
the browser's configured default, no matter what your CSS sets on
:root or html.
const el = document.createElement("div");
el.style.fontSize = "medium";
document.body.appendChild(el);
const defaultSize = parseFloat(getComputedStyle(el).fontSize);
document.body.removeChild(el);
console.log(defaultSize); // 16, 20, 24, etc.
If the user has their browser set to "Very Large," this returns
24 instead of 16. The
medium keyword goes straight to the browser setting and skips
anything in your stylesheet.
That's it. Useful when you're rendering text on a canvas, working inside a third-party embed, or just need to know what the user is actually seeing.