<!DOCTYPE html>
<html>
<head>
<title>The font-optical-sizing property in CSS</title>
<style type="text/css">
@font-face {
src: url('AmstelvarAlpha-VF.ttf');
font-family:'Amstelvar';
font-style: normal;
}
p {
font-size: 36px;
font-family: Amstelvar;
font-optical-sizing: auto;
}
.auto-optical-sizing {
font-optical-sizing: auto;
}
.h1{
font-optical sizing: auto;
}
</style>
</head>
<body>
<h1> CHAPTER 1 </h1>
<p class="optical-sizing">This paragraph is optically sized. This is the default across browsers.</p>
<p class="auto-optical-sizing">This paragraph is not optically sized. You should see a difference in supporting browsers.</p>
</body>
</html>