1

To change the default font size of my browser (Chrome) I go into Chrome > Settings > Customise fonts.

How does the method above work? Does it increase the user agent's default font size of 16px that’s placed on the html element? The reason I ask this is because I’ve noticed that setting an explicit font size on the html tag stops this method from working.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
tonitone106
  • 149
  • 7
  • What's the reason you want to try setting an explicit font size? – Brad Jun 16 '20 at 21:58
  • @Brad Personal styling preference. Would you recommend not setting an explicit font-size (on the `html` element) because it means a user could not potentially increase `font-size`? – tonitone106 Jun 16 '20 at 23:19
  • 1
    No, absolutely not. A major feature of the web is that it can adapt and be shown different on different devices. It's not print. It's *supposed to be different* in different conditions. Furthermore, I don't think I've set a single `px` dimension in almost a decade. Most things, I scale from `em`. By default, `1em` is a readable size on any device. Therefore, if I want a button, I might set its padding to `1em 2em` or something. I know it will be the right size. It's a relative size. Everything can scale up/down as required. I leave the base at `1em`. – Brad Jun 17 '20 at 00:25

1 Answers1

3

Increasing the browser's default font size only means the browser will use a larger font size when no font size is otherwise specified.

If nothing on a page specifies a font-size the browser's default is used, so that larger font size will be used. Once you specify a font-size on something, that is the font size used on that element and its descendants.

If you specify that font-size on the html element, everything is a descendant of that, so everything has a specified font size, so the browser's default size is not used.

If you specify a font-size further down the DOM tree then the default size will be used until a specified size is encountered, if the specified size is a relative size it is relative to the current size, which could be the browser's default; for example:

<body>
    <div>
        <!-- the text below is the browser's default size -->
        <p>Some text in a paragraph</p>
    </div>
    <div style="font-size: 16px">
        <!-- the text below is 16px *regardless* of the browser's default -->
        <p>Some text in another paragraph</p> 
    </div>
    <div style="font-size: 2em">
        <!-- the text below is twice the browser's default size -->
        <p>Some text in a paragraph</p>
    </div>
</body>

Chrome and other browsers may also have a setting for the minimum font size; fonts specified in a page that are smaller than the minimum will be increased to the minimum — but that is not part of a standard and will (probably) be browser dependent.

Stephen P
  • 14,422
  • 2
  • 43
  • 67
  • Thanks. Would you say this behaviour is fairly consistent among all browsers? Would you recommend not setting an explicit font-size (on the html element) because it means a user could not potentially increase font-size? – tonitone106 Jun 16 '20 at 23:23
  • @tonitone106 — a user can still increase/decrease the size using Ctrl-Plus / Ctrl-Minus when the page is being viewed. All the browser's configured default font size does is set a size when there isn't one specified. Most page authors set font sizes; because they want to control their page layout (other ways are possible), or accessibility guides suggest larger text than most browser defaults, or their fonts don't work well at typical browser defaults. You can also size relative to the user's choice... `font-size: 120%` etc. and if I want a global size, I use a `.css` file rule on `` – Stephen P Jun 17 '20 at 00:16
  • @tonitone106 you might want to read this other question and it's accepted answer: https://stackoverflow.com/q/6803016/17300 – Stephen P Jun 17 '20 at 00:20