JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id='sizes'></div>

JavaScript

var testString = "uZEYXTKBVACRUGN&HDQO+#w^ilj.f!t:r-I/()[]Jzsc?{}xykvLFaeo4567*8_19023$PdgbpqShnMmW@%";
var fonts = ["Tahoma","Arial","Verdana","Helvetica","Trebuchet MS", "Arial Black", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Lucida Console", "Lucida Sans Unicode", "Lucida Grande", "Geneva", "Times New Roman", "MS Sans Serif", "MS Serif", "Palatino Linotype", "Times", "Monaco"];

function getStringWidth(font, fontstyle, fontSize, string){
		var hidden = $('<span id="hidden" style="font-family: ' + font + '; font-size: ' + fontSize +  '; font-style:' + fontstyle + '; font-weight: normal;"></span>');
		$('body').append(hidden);
 		hidden.text(string);
    var width = hidden[0].getBoundingClientRect().width;
    $('body').children("span").remove();
    return width;
}
for(var i in fonts){
var font = fonts[i];
$("#sizes").append(font + "<br/>");
for(var i = 8; i < 24; i+=4){
var fontSize = i + "px";
var ratio = getStringWidth(font,"italic",fontSize,testString.repeat(100))/getStringWidth(font,"normal",fontSize,testString.repeat(100));
if(ratio != 1)
$("#sizes").append(fontSize + ": " + ratio + "<br/>");
}
}