v4: Remove root font-size

[mdo]

Fixes #19460.

This removes our fixed 16px font-size variable and it's usage throughout the project, allowing web visitors to utilize their customized browser default font-size. Visually, there is no difference between this change and what's been in v4 since we started it. The browser default is usually 16px, so you should be good to go there. In other places, and in case of customize root font-size, your content should scale nicely given the use of rems for type scale.

/cc @keithjgrant @patrickhlauke

[patrickhlauke]

LGTM

[Haroenv]

Yay ❤️

[gthomas-appfolio]

We have been using $font-size-root variable in custom.scss to set to a value to match our legacy styles (13px) in our custom bootstrap build/theme.

What is the correct way to set this in our case?

[bardiharborow]

@gthomas-appfolio 13 divided by 16 is 0.8125, so $font-size-base: 0.8125rem; should be appropriate.

[gthomas-appfolio]

Thanks, wasn't quite sure if that was the 'proper' variable for this, thanks!

Edit: Using $font-size-base: 0.8125rem; does not appear to work the same (trying to decrease the size of all fonts throughout Bootstrap) - this PR removing this from _reboot.scss seems to disable scaling:

html {
 -  // Sets a specific default `font-size` for user with `rem` type scales.
 -  font-size: $font-size-root;

If so, would the proper way to customize this now be adding these lines to _custom.scss?:

html {
   font-size: 13px;
}

(BTW I'm not disagreeing with the spirit of this change, the reality in my case is I need to match some existing, non-Bootstrap styles)

[bardiharborow]

@gthomas-appfolio ah sorry, I didn't process that we had dropped the html { font-size: $font-size-root; } declaration. You are correct that html { font-size: 13px; } should will set 1rem to equal 13px, and Bootstrap should adjust all it's components to suit. You should not need to recompile our CSS for this to work, unless of course you wish to make other changes.

[gthomas-appfolio]

No problem. Yes, I'm theming it quite a bit via _custom.scss, I'll try the approach I mentioned above, thanks again for the info.