As I delved into the world of variable fonts, I found myself puzzled by the concept.
There are 5 defined axes - wght, wdth, ital, slnt, opsz. While font weight is a familiar term that we often use in our CSS coding.
So, what sets a variable font apart from a regular font?
Moreover, when I set a range of font-weight: 100 500 and then apply font-weight: 600 to my <p> elements, I fail to notice any difference.
The weight of 600 seems unaffected despite being constrained to 500.
@font-face {
font-family: "sketch_3dregular";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
format("woff2 supports variations"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
format("woff2-variations");
font-weight: 100 500;
font-stretch: 85% 100%;
}
html {
font-size: 10px;
margin: 0;
font-family: "sketch_3dregular";
}
p {
font-size: 1.4rem;
line-height: 1.6;
word-spacing: 0.6rem;
font-weight: 600;
}