css-library: Fixing the html element's font-size so it will respect browser settings #1444
Conversation
| @@ -11,7 +11,7 @@ body { | |||
| } | |||
|
|
|||
| html { | |||
| font-size: $em-base; | |||
| font-size: 100%; // Needs to be 100% to be able to grow and shrink with browser settings | |||
There was a problem hiding this comment.
This was changed to 16px because of root font size updates related to USWDS v3 (it previously being 10px). Was this tested using Verdaccio to make sure everything still looks correct by default?
There was a problem hiding this comment.
I agree here with Jami. If this hasn't been tested with Verdaccio, then it needs to be. The entire typography change initiative we completed last summer was centered around this.
There was a problem hiding this comment.
@Andrew565 I was thinking about this more and think the 100% font-size will still work because the default font-size for most browsers should already be 16px without us needing to do anything special. That 100% value would then be based on that default. A base value of 1rem might have the same effect too. A sanity check with Verdaccio or a release candidate would ease our minds though.
There was a problem hiding this comment.
Working on testing this with Verdaccio.
There was a problem hiding this comment.
Looks good with Verdaccio. Seen here is the "Very Large" font setting. The normal/medium font setting looks the same as it always does.
There was a problem hiding this comment.
Thanks for doing more testing on this! I think as long as a browser is defaulting to 16px (which most or all do?) this should work as expected.
My one last curiosity is if it should be 100% or 1rem. They both technically seem to do the same thing but I'm not sure if one would be preferred for some other cross-browser support situations that I'm not realizing.
The USWDS documentation site uses 1rem for example.
Lastly, the Sass variable in Formation overrides $em-base now seems to be unused. Maybe there is a use for it somewhere but I just want to make note that it seems like cruft at this point.
Chromatic
https://3646-fix-browser-font-sizing--65a6e2ed2314f7b8f98609d8.chromatic.com
Description
Closes #3646
QA Checklist
N/A
Screenshots
N/A
Acceptance criteria
Definition of done