What happens when the user sets the browser font size?

Question

Many websites write code that have broken the ability for users to set their own font size (in the settings of the browser/mobile). In order to avoid this, what exactly happens on a technical level when the user changes the default font size? What does it affect?

• the html root element font-size that is specified in CSS? Does it scale or override this?
• the units em, px, rem, %?
• what about other units, like vh, vw, vmin, vmax for those that are trying to do fluid typography?
• how will this affect calc()?
• is the behavior the same for mobile devices?

Notes that don't yet form a full answer:

However, none of the below refer to specifications, but are just collections of specific behaviors.

• From my own experiments, setting font-size for html with a % does scale when the user changes the browser font size.
• This answer has some information, seeming to say that when html is set, px doesn't adjust, but em, rem, % do.
• This site has some really good info, but it is all a decade old and uncertain if the behavior mentioned is just because of browser bugs or if it's designed that way.
• There is a lot of sloppy language that people use when talking about this. For example, people will talk about the 'base font size', but not specify if this is the font specified in the root/html element, the browser settings, or the combination of the two. I'm sure it's clear to those who already know the interactions, but to me I still have the concepts unclear.

Answer 1

The user-defined font size determines the base font size of the root element html. The initial value of font-size as specified by CSS is medium, which in all desktop browsers corresponds to this user-defined size (except Microsoft Edge which follows Windows DPI and accessibility settings rather than having its own). Mobile browsers don't seem to honor the system-wide preference typical of mobile devices, unfortunately. At least, none of Safari on iOS, Internet Explorer on Windows Phone 8.1 or Microsoft Edge on Windows 10 Mobile do.

All other keyword values of the font-size property defined here are scaled to this size, so if the user-defined size is 20px, medium corresponds to 20px and small will almost certainly correspond to a size smaller than 20px.

Media query rems and ems are calculated directly off of this user-defined size, irrespective of the specified font-size property of the root element. Each of the following media expressions:

(max-width: 30rem)
(max-width: 30em)

is equivalent to (max-width: 480px) when the user-defined size is 16px, and (max-width: 600px) when the user-defined size is 20px.

Style rule rems on the other hand are calculated off of the specified font-size of the root element. The following rule:

:root { font-size: 50%; }

makes 1rem in a style rule equivalent to 8px when the user-defined size is 16px, and 10px when the user-defined size is 20px.

Style rule ems and percentages are always calculated relative to ancestor elements so their behavior doesn't change. If the font size of body is declared in ems or percentages then it'd be based off of whatever the font size of html (its parent) is, for example. So on and so forth for all its descendants that don't specify some other size.

The px unit corresponds to a CSS pixel and so its metrics are never affected by the user-defined font size.

The behavior of viewport units and calc() doesn't change, since none of those things depends on an element's font size. As their name suggests, viewport units scale to the size of the viewport.

The most noticeable overall effect this can have on a layout that sizes everything (including widths and heights of boxes) in rems and ems, is that the user can scale the entire layout just by changing their preferred font size. I don't know how useful this is anymore, especially when zoom is a thing.

So, to ensure that your copy is able to accommodate the user's preferred font size without forcing them to zoom, specify all your font sizes in rems or ems where possible. Especially do not specify a pixel font size on html, as that will override the preference completely. You don't necessarily have to specify widths and heights in rems or ems — this really depends on your layout. Not all fluid layouts scale well with different sizes. The most important aspect of this, really, is the size of text, since this feature is intended to scale text to improve readability.