Change our root font-size to actually be on the root and use a relative font-size
Result of discussion
We decided to leave the font-size at 14px
but keep it on the body, not the root, so that 1rem
fits in our design system making math easier. We also will not set it to 14px
, but rather .875rem
to allow users to change their browser font-size and have it affect our application.
Problem to solve
Right now, we define our base font-size as 14px
on the <body />
element. There are a couple of problems with this:
-
rem
reference theroot
element and that is the<html />
element. Bootstrap Vue usesrem
in multiple places, and it can cause alignment issues because the font is not1rem
, it is14px
. - We are depriving users the ability to bump up (or down) their default font size. This is an accessibility issue.
Proposal
Remove this: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/bootstrap_migration.scss#L25 and https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/errors.scss#L20 and allow body text to default to 1rem
. If we would like 1rem
to generally be 14px
then we could set html { font-size: .875rem; }
or html { font-size: 87.5% }
.
We also explicitly set font-size
in pixels in several places. It would be good to change all of these to use rem
instead so users can change their font-size.
What does success look like, and how can we measure that?
The end goal is to solve these two problems:
- Users are able to increase or decrease their base font size
-
1rem
is equal to the default font size.
Links / references
Here is one study of how many people change their base font-size: https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5cfb20831773.
They found 3.08% of people do change their base font size. They also found, interestingly that .07% of that is people decreasing their font size.