<h1>This is a heading.</h1>
<p>Lorem ipsum sit dolor.</p>
:root{
  font:-apple-system-body;
}
@supports (font:-apple-system-body) and (not(-webkit-touch-callout:default)){
    /* Prevents Desktop Safari from setting size to 13px when -apple-system-body is set. Manually set to default 16px, as there is no way a user can set the Safari desktop font size default anyways. Which is a shame honestly. */
  /* Oh, by the way, that @supports line is a brand new CSS hack I invented for this to target Desktop Safari specifically */
    :root{font-size:16px}
}


/* --------------- END OF SCALING CODE --------------- */
:root{
  padding:3ex 3ch;
  font-family:serif; /* Custom font families can be set here */
}
h1{margin-block-start:0}
// JUST TO SHOW WHAT SYSTEM IS SETTING, NOTHING TO DO WITH THE CSS
function ready(callbackFunc) {
  if (document.readyState !== 'loading'){
    callbackFunc();
  } else {
    document.addEventListener('DOMContentLoaded', callbackFunc);
  }
}
ready(function() {
  $('h1').append("<span> ("+$("h1").css('font-size')+")</span>");
  $('p').append("<span> ("+$("p").css('font-size')+")</span>");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js