Skip to main content

Usercentrics CMP Font Size Guide

Updated

Why CMP Text May Appear Too Small

Some websites notice that the text inside the Usercentrics CMP looks too small. This usually happens when the website overrides the browser’s default html { font-size } with a fixed value (e.g., html { font-size: 10px; }).

Usercentrics provides the variable: --uc-typography-scale. This variable rescales the CMP font sizes based on the ratio: browser default font-size ÷ website’s html font-size

 

Two possible solutions:

1. Accessibility-first solution (recommended for EAA compliance)

If you want to comply with the European Accessibility Act (EAA), the best solution is to:

  • Remove the fixed font-size from the html element and set a font-size on the body element instead: body { font-size: 10px;} 

This way, text scaling will still respect user preferences and browser settings, and your site will stay compliant with accessibility standards.

 

2. Technical fix using --uc-typography-scale

If your website uses a relative font-size (for example, 62.5% of the browser default), the --uc-typography-scale variable can remain fixed because fonts will scale automatically with the browser’s accessibility settings.

If your website uses a fixed HTML font-size, the variable must be dynamically adjusted to match the browser’s default font-size. This can be done by creating a hidden iframe, reading its default font-size, calculating the scale, and then applying it to --uc-typography-scale. The following code snippet demonstrates this approach.

<iframe id="default-style-frame"
        srcdoc="<!DOCTYPE html><html><head></head><body></body></html>"
        style="position:absolute;visibility:hidden;width:0;height:0;border:0;">
</iframe>

<script>
window.defaultHtmlFontSizePromise = new Promise((resolve, reject) => {
  document.addEventListener('DOMContentLoaded', () => {
    const iframe = document.getElementById('default-style-frame');
    if (iframe?.contentDocument && iframe?.contentWindow) {
      const fontSize = iframe.contentWindow
        .getComputedStyle(iframe.contentDocument.documentElement)
        .fontSize;
      iframe.remove();
      resolve(fontSize);
    } else {
      reject(new Error('Iframe not ready or blocked by CSP.'));
    }
  });
});

window.defaultHtmlFontSizePromise
  .then(size => {
    const scale = parseFloat(size) /
      parseFloat(window.getComputedStyle(document.documentElement).fontSize);
    console.log("Applying CMP scale:", scale);
    document.documentElement.style
      .setProperty("--uc-typography-scale", scale);
  })
  .catch(err => console.error(err));
</script>