Demo of font-size-adjust

In this example below you will see how to do a Demo of font-size-adjust with some HTML / CSS and Javascript

So every font has an aspect ratio, which is the ratio of the height of the lower-case x against the height of the font in px. font-size-adjust lets us set the aspect ratio of the fall-back font to that of the first choice font.

Thumbnail
This awesome code was written by huijing, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright huijing ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Demo of font-size-adjust</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="intro">
  <p class="mw">This is a run of text in Merriweather.</p>
  <p class="gg">This is a run of text in Georgia.</p>
  <p class="gg-adj">This is a run of text in Georgia with font-size-adjust set to 0.555, which is the (estimated) aspect ratio for Merriweather.</p>
</div>

<div class="fallback">
  <p>This is a run of text that's supposed to be set in <em>Noticia Text</em> but the font doesn't exist, so the fallback of <em>Georgia</em> has been invoked, with the font-size-adjust set to 0.530, which is the estimated aspect ratio of Noticia Text. Georgia has an estimated aspect ratio of 0.481.
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/huijing/demo-of-font-size-adjust-xLvYNw */
@import url("https://fonts.googleapis.com/css?family=Merriweather");
body {
  padding: 1em;
}

@supports not (font-size-adjust: 0.5) {
  body::before {
    content: 'If you see this message, it means the demo is not working as the browser you are using does not support font-size-adjust.';
    display: block;
    background-color: coral;
    padding: 0.5em;
    margin-bottom: 1em;
  }
}
div {
  padding: 1em;
  line-height: 1.5;
}

.intro {
  border: 0.25em dotted;
}
.intro p:not(:last-of-type) {
  margin-bottom: 1em;
}

.mw {
  font-family: Merriweather;
}

.gg {
  font-family: Georgia;
}

.gg-adj {
  font-family: Georgia;
  font-size-adjust: 0.555;
}

.fallback {
  font-family: 'Noticia Text', Georgia, serif;
  font-size-adjust: 0.530;
}


/*Downloaded from https://www.codeseek.co/huijing/demo-of-font-size-adjust-xLvYNw */
/* Had a little chat with Robin Rendle earlier today about the `font-size-adjust` property and decided to make a demo to demonstrate it. MDN actually has a pretty good demo already at: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust

So every font has an aspect ratio, which is the ratio of the height of the lower-case x against the height of the font in px. `font-size-adjust` lets us set the aspect ratio of the fall-back font to that of the first choice font.

Resource links:
https://www.cs.tut.fi/~jkorpela/x-height.html
*/

Comments