title: CSS/JS: Get browsers default font size by API and not
body: <p>I have an angular component that will be used in two diffrent applications.
  In one application, there will be a html-font size of 100% (16px as default but changing with the browsers default font size - so basicly whatever the user will choose).</p>
  <p>In the other application the html-font size will be set to 16px. I can not change this.
  So using &quot;rem&quot; in my component will not be rsponsive with the users font-setting for both applications.</p>
  <p>Is there a way to access the browsers default font size by any JS API or CSS Property?</p>
  <p>This would be a solution but it could cause layout jumps. So I do not really like this solution.</p>
  <pre><code>const getDefaultFontSize = () =&gt; {
  const html = document.querySelector('html');
  
  const initialFontSize = window
      .getComputedStyle(html)
      .getPropertyValue('font-size');
  
  html.style.fontSize = 'unset';
  
  const fontSizeMatch = window
      .getComputedStyle(html)
      .getPropertyValue('font-size')
      .match(/\d+/);
  
  html.style.fontSize = initialFontSize;
  
  if (!fontSizeMatch || fontSizeMatch.length &lt; 1) {
      return null;
  }
  
  const result = Number(fontSizeMatch[0]);
  return !isNaN(result) ? result : null;
  </code></pre>
  <p>};</p>