<p class="optical-sizing">This paragraph is optically sized. This is the default across browsers.</p>

<p class="optical-sizing light">This paragraph is optically sized. This is the default across browsers.</p>

<p class="optical-sizing bold">This paragraph is optically sized. This is the default across browsers.</p>

<p class="optical-sizing large">This paragraph is optically sized. This is the default across browsers.</p>

<p class="optical-sizing xlarge">This paragraph is optically sized. This is the default across browsers.</p>

<p class="no-optical-sizing">This paragraph is not optically sized.
  You should see a difference in supporting browsers.</p>
/*
https://assets.codepen.io/32795/AmstelvarAlpha-VF.ttf
*/

@font-face {
  src: url("https://assets.codepen.io/32795/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-weight: 100 900;
  font-stretch: 35% 100%;
  unicode-range: U+0020-007E, U+4E00, U+4E2A, U+4E45, U+4EE5, U+524D, U+5728,
    U+5927, U+5F81, U+5F88, U+6211, U+661F, U+662F, U+6D77, U+7684, U+7CFB,
    U+8FB0, U+8FDC, U+9014, U+9065;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.large {
  font-size: 48px;
  font-family: Amstelvar;
}

.light {
  font-weight: 200;
  font-family: Amstelvar;
}

.bold {
  font-weight: 700;
  font-family: Amstelvar;
}

.xlarge {
  font-size: 72px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.