JSFiddle - React, Tailwind, and code Playground

HTML

<span id="abc" class="fitTextHeight">jÁ - ABC</span>
<span id="abc" class="fitTextHeight georgia">ABC</span>
<span id="abc" class="fitTextHeight arial">ABC</span>
<span id="abc" class="fitTextHeight times">ABC</span><br>
<span id="abc" class="fitTextHeight">jÁ - ABC</span>
<span id="abc" class="fitTextHeight georgia">ABC</span>
<span id="abc" class="fitTextHeight arial">ABC</span>
<span id="abc" class="fitTextHeight times">ABC</span>

CSS

span#abc {
	border: dotted 1px red;
	padding: 0;
	display:inline-block;
	height: 50px;
	margin:0px;
    overflow:hidden;
    vertical-align: bottom;
}
.georgia{
	font-family: Georgia;
}
.arial{
	font-family: Arial;   
}
.times{
	font-family: Times;
}

JavaScript

/**
 * Calculate the ratios by hand and store in this variable form:
 * myfontlowercase + _upper_case_ratio
 */

 var georgia_upper_case_ratio           = 1.44
 var arial_upper_case_ratio             = 1.35
 var times_upper_case_ratio             = 1.50

 /********************************************/

 $(document).ready(function() {
    $(".fitTextHeight").each(function(){
        //Get font family
        var ff = $(this).css('font-family').toLowerCase().split('\'').join('').split(' ').join('');
        
        //get ratio
        var miRatio = 1;
        try {miRatio = eval(ff+ "_upper_case_ratio"); } catch (e) { }
        
        //Get boxSize
        var boxSize = Number ($(this).css('height').split('px')[0]);

        //Calculate newSize & apply
        var newCssFontSize =  boxSize  * miRatio
        $(this).css('font-size', newCssFontSize );
        $(this).css('line-height', boxSize + "px" );
    })
});