<section>
  <h3>Unadjusted</h3>
  <h1 class="local">Player 1</h1>
  <h1 class="fun-1">Player 1</h1>
  <h1 class="fun-2">Player 1</h1>
</section>

<section>
  <h3>
    Size Adjusted 
    <small>(consistent 64px)</small>
  </h3>
  <h1 class="adjusted-local">Player 1</h1>
  <h1 class="adjusted-fun-1">Player 1</h1>
  <h1 class="adjusted-fun-2">Player 1</h1>
</section>

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%; 
  src: local(Arial);
}

@font-face {
  font-family: 'Press Start 2P';
  src: url(https://fonts.gstatic.com/s/pressstart2p/v9/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2) format('woff2');
}

@font-face {
  font-family: 'Cookie';
  src: url(https://fonts.gstatic.com/s/cookie/v12/syky-y18lb0tSbf9kgqS1NDNpg.woff2) format('woff2');
}

@font-face {
  font-family: 'Adjusted Cookie';
  size-adjust: 90.25%;
  src: url(https://fonts.gstatic.com/s/cookie/v12/syky-y18lb0tSbf9kgqS1NDNpg.woff2) format('woff2');
}

h1 {
  font-size: 64px;
}

.adjusted-local {
  font-family: "Adjusted Arial";
}

.adjusted-fun-1 {
  font-family: "Press Start 2P";
}

.adjusted-fun-2 {
  font-family: "Adjusted Cookie";
}

.local {
  font-family: Arial;
}

.fun-1 {
  font-family: "Press Start 2P";
}

.fun-2 {
  font-family: "Cookie";
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  display: flex;
  flex-flow: row wrap;
  gap: 20vh;
  padding-block: 10vh;
  align-items: center;
  justify-content: center;
}

section {
  display: grid;
  gap: 3vh;
}

h3 {
  font-family: system-ui, sans-serif;
  color: hsl(0 0% 40%);
}