<!-- 
Font: KairosSans
https://github.com/Monotype/Monotype_prototype_variable_fonts/tree/master/KairosSans 
-->
@font-face {
  font-family: KairosSans;
  src: url(https://yoksel.github.io/variable-fonts/assets/fonts/KairosSans/KairosSans_Variable.ttf) format('truetype'); 
}

// wght 250-900
// wdth 75-125
// itl 0-1

HTML, BODY {
  height: 100%;
}

BODY {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 16px/1.2 Trebuchet MS, sans-serif;
  font-variation-settings: "wght" 250, "wdth" 75;
}


.container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  outline: 5px solid #DDD;
  width: 500px;
  padding-bottom: 10px;
  
}

.char {
  width: 20%;
  text-align: center;
  font: 90px/.8 KairosSans, sans-serif;
}

.tip {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
  font-weight: bold;
  
  &--Width {
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: .5em;
    text-align: center;
  }
  &--Weight {
    background: red;
    top: 50%;
    bottom: 50%;
    right: 100%;
    margin: auto;
    margin-right: 1.5em;
    transform: translateX(50%) rotate(-90deg);
  }
}
View Compiled
const container = document.createElement('div');
container.classList.add('container');
const charItem = document.createElement('div');
charItem.classList.add('char');
const tipItem = document.createElement('div');
tipItem.classList.add('tip');
charItem.innerHTML = 'a';
const itemsInLineX = 5 - 1;
const itemsInLineY = 5 - 1;
const itemsMax = itemsInLineX * itemsInLineY;
const wght = {
  name: 'Weight',
  min: 150,
  max: 900
};
const wdth = {
  name: 'Width',
  min: 75,
  max: 125
};
const weightStep = (wght.max - wght.min)/itemsInLineY;
const widthStep = (wdth.max - wdth.min)/itemsInLineX;

const variationsList = [
  wght,
  wdth
];

for (var y = 0; y <= itemsInLineY; y ++) {
  for (var x = 0; x <= itemsInLineX; x ++) {
    const elem = charItem.cloneNode(true);
    const itemWght = (itemsInLineY - y) * weightStep + wght.min;
    const itemWdth = (x) * widthStep + wdth.min;
    
    elem.style["font-variation-settings"] = `"wght" ${itemWght}, "wdth" ${itemWdth}`;
    container.appendChild(elem);
  }  
}

variationsList.forEach(item => {
  const elem = tipItem.cloneNode();
  elem.classList.add(`tip--${item.name}`);
  elem.innerHTML = `${item.name} ${item.min} &#8596; ${item.max}`;
  container.appendChild(elem);
});

document.body.appendChild(container);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.