Skip to content

Commit

Permalink
Set font size proportional to user's font size
Browse files Browse the repository at this point in the history
According to MDN
(https://developer.mozilla.org/en-US/docs/Web/CSS/font-size),

> To maximize accessibility, it is generally best to use values that
> are relative to the user's default font size.

> Defining font sizes in px is not accessible, because the user cannot
> change the font size in some browsers.

Note that changing font size (in browser or OS settings) is distinct
from the zoom functionality triggered with Ctrl/Cmd-+. Zoom
functionality increases the size of everything on the page, effectively
applying a multiplier to all pixel sizes. Font size changes apply to
just text.

For relative font sizes, we could use `em`, as we do in several places
already. However that has a problem of "compounding" (see MDN article
for details). The compounding problem is nicely solved by `rem`, which
make font sizes relative to the root element, not the parent element.

Since we were using a hodge-podge of pixel sizes, em, rem, and
percentage sizes before, this change switching everything to rem, while
keeping the same size relative to our old default of 16px.

16px is still the default on most browsers, for users that haven't set a
larger or smaller font size.
  • Loading branch information
jsha committed Jan 2, 2022
1 parent 03360be commit cc18120
Showing 1 changed file with 58 additions and 53 deletions.
Loading

0 comments on commit cc18120

Please sign in to comment.