Untitled

dabblet.css

h1 {
	color: silver;
	font-family: monospace;
	margin: 12px 0;
	padding: 0;
	text-align: center;
}
h1[data-content-length='4'] {	font-size: 36vw; }
h1[data-content-length='7'] {	font-size: 23vw; }
h1[data-content-length='10'] {	font-size: 16vw; }
h1[data-content-length='11'] {	font-size: 14.2vw; }
h1[data-content-length='14'] {	font-size: 11vw; }
h1[data-content-length='20'] {	font-size: 8vw; }
h1[data-content-length='30'] {	font-size: 5.3vw; }
h1[data-content-length='33'] {	font-size: 4.7vw; }

dabblet.html

<h1 data-content-length="">Font size fixed to viewport width</h1>
<h1 data-content-length="">Testing</h1>
<h1 data-content-length="">1234567890</h1>
<h1 data-content-length="">Testing 123</h1>
<h1 data-content-length="">Testing 123456</h1>
<h1 data-content-length="">1234567890</h1>
<h1 data-content-length="">12345678901234567890</h1>
<h1 data-content-length="">123456789012345678901234567890</h1>
<h1 data-content-length="">Test</h1>
<textarea></textarea>

dabblet.js

var addCount =  document.querySelectorAll("[data-content-length]") ;
for (var i=0,el; i<addCount.length; i++){
	el = addCount[i];	
	el.setAttribute("data-content-length", el.innerHTML.length);
}

var textarea = document.querySelector("textarea"),
    unit = 100,
    template = "h1[data-content-length='$i'] : $valvw",
    i = 3;
    
    textarea.value = template.replace("$i",i).replace("$val", unit -(i*10) )

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}