Replace font-size px with rem

[castastrophe]

Suggesting we update all our px sizing in this project with equivalent rem values. This will enable components to all scale appropriately when placed on a page based on the root font-size.

This would impact the font-sizes in the theme as well.

[coreyvickery]

@castastrophe Do we need to set up a meeting to address this?

[starryeyez024]

REM units can be problematic depending on where you drop in the components. The IT dev team just ran into this on https://www.redhat.com/en/jobs/pre-employment where they are using PatternFly core styles along with pre-existing CSS from the Drupal theme.

PF core has:

html {
    font-size: unset!important;
}

which breaks the Drupal footer by making it enormous.

If you bring back Drupal's original styles:

html {
    font-size: 62.5%;
}

Then the PF vars make for some very tiny text

--pf-global--FontSize--4xl: 2.25rem;
    --pf-global--FontSize--3xl: 1.75rem;
    --pf-global--FontSize--2xl: 1.5rem;
    --pf-global--FontSize--xl: 1.25rem;
    --pf-global--FontSize--lg: 1.125rem;
    --pf-global--FontSize--md: 1rem;
    --pf-global--FontSize--sm: 0.875rem;
    --pf-global--FontSize--xs: 0.75rem;

[castastrophe]

Even assuming some crazy base-font settings, we could look into use clamp or min and max functions which have pretty good browser support.

Clamp for example that says don't be smaller than 16px or larger than 22px, ideally use 2rem: clamp(16px, 2rem, 22px);

• Current browser support: latest Chrome, Edge, FF, Opera, and even Safari

Or there's the clearer but less succinct: min(max(16px, 2rem), 22px);