<h1 id="title"><span>HELLO</span><span class="small">I'M A VARIABLE FONT</span></h1>
<span class="label label--top">- font-weight</span>
<span class="label label--bottom">+ font-weight</span>
<span class="label label--left">- font-stretch</span>
<span class="label label--right">+ font-stretch</span>
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');
body {
  font-family: 'Archivo';
  color: #fff;
  background-color: #ff6951;
}
#title  {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  width: 100%;
  padding: 0 10%;
  margin: 0;
  box-sizing: border-box;
  font-size: calc(60px + (140*(100vw - 320px))/1600);
  font-weight: 100;
  font-stretch: 62%;
  text-align: center;
}
#title span {
  display: block;
}
#title .small {
  font-size: .25em;
}
#title,
.label {
  pointer-events: none;
}
.label {
  position: fixed;
  font-style: .875rem;
  font-size: calc(10px + (10*(100vw - 320px))/1600);
}
.label--left,
.label--right {
  top: 50%;
}
.label--top,
.label--bottom {
  left: 50%;
  transform: translate3d(-50%,0,0);
}
.label--left {
  left: 1rem;
  transform-origin: 0 50%;
  transform: rotate(-90deg) translate3d(-50%,50%,0);
}
.label--right {
  right: 1rem;
  transform-origin: 100% 50%;
  transform: rotate(90deg) translate3d(50%,50%,0);
}
.label--top {
  top: 1rem;
}
.label--bottom {
  bottom: 1rem;
}
window.addEventListener('mousemove', e => {
  minFontWeight = 100
  maxFontWeight = 900
  minFontStretch = 62
  maxFontStretch = 125
  fontWeightPercent = (maxFontWeight - minFontWeight) / 100;
  fontStretchPercent = (maxFontStretch - minFontStretch) / 100;

  x = e.offsetX;
  y = e.offsetY;
  xPercent = x/window.innerWidth * 100;
  yPercent = y/window.innerHeight * 100;
  console.log(xPercent, yPercent)

  newFontWeight = minFontWeight + ( Math.round(fontWeightPercent * yPercent) )
  newFontStretch = minFontStretch + ( Math.round(fontStretchPercent * xPercent) )

  document.getElementById('title').style.fontWeight = newFontWeight;
  document.getElementById('title').style.fontStretch = newFontStretch + '%';
 });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.