Variable fonts for non-variable weights across sizes.

dabblet.css

/**
 * Variable fonts for non-variable weights across sizes.
 */

@import url('https://variablefonts.monotype.com/MetaVariableDemo-Set.css');

span {
	display: block;
	font-size: calc(var(--size, 1) * 100%);
	xfont-weight: calc(100 + var(--size, 1) * 100);
	font-weight: 200
}

span:nth-child(1) { font-weight: 200; }
span:nth-child(2) { font-weight: 100; }
span:nth-child(3) {	font-weight: 180; }

h1 {
	text-align: center;
	text-transform: uppercase;
	font: 1800%/.85 FF Meta VF, sans-serif;
	margin: 4rem;
}

dabblet.html

<h1>
	<span style="--size: .32">Awesome</span>
	<span style="--size: 1">CSS</span>
	<span style="--size: .4">Secrets</span>
</h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}