v4: Remove root font-size #21524

merged 3 commits into from Jan 4, 2017


None yet

5 participants

mdo commented Jan 3, 2017

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

mdo added some commits Jan 3, 2017
@mdo mdo Remove -size-root so we can respect user prefs on browser default fon…
@mdo mdo leave a note in the docs 216eb3d
@mdo mdo clarify usage of base font-size so we know what's up
@mdo mdo added this to the v4.0.0-alpha.6 milestone Jan 3, 2017


@mdo mdo merged commit 0ffd369 into v4-dev Jan 4, 2017

2 of 3 checks passed

savage Savage has initiated its special separate Travis CI build
continuous-integration/travis-ci/push The Travis CI build passed
hound No violations found. Woof!
@mdo mdo deleted the v4-font-size branch Jan 4, 2017
@mdo mdo referenced this pull request Jan 4, 2017

v4 Alpha 6 ship list #20939

Haroenv commented Jan 4, 2017

Yay ❤️


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?


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

gthomas-appfolio commented Jan 5, 2017 edited

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 commented Jan 5, 2017 edited

@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.


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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment