Root Font Size

We recommend that users of Red Hat Design System not override the root font-size.

html, body {
  font-size: 18px;
}

Example of using CSS to set a root font size.

Users often set a custom font size in their browsers preferences. Overriding their preference by setting a root font size is likely to cause accessibility issues for those users. Our design system uses rem-based values for that reason. If removing the root font size override isn't an option then we suggest the following mitigation styles, scaled to a root font size of 18px.

:root {
  --rh-font-size-text-xl: 1.125em;
  --rh-line-height-body-text: 150%;
  --rh-font-size-body-text-xs: 0.75em;
  --rh-font-size-body-text-sm: 0.875em;
  --rh-font-size-body-text-md: 1em;
  --rh-font-size-body-text-lg: 1.125em;
  --rh-font-size-code-xs: 0.75em;

  --rh-footer-link-header-mobile-font-size: 0.875em;
}

rh-alert,
rh-blockquote,
rh-cta,
rh-dialog,
rh-footer,
rh-pagination,
rh-secondary-nav,
rh-stat,
rh-tooltip {
  font-size: initial;
}

rh-footer::part(links-accordion-header) {
  --rh-footer-link-header-font-size: 0.875em;
}