Question

I have a span with CSS:

font-height = 120px; 
height = 120px;
line-height = 120px;

The text within it does not occupy the complete height(120px) of the span.
Is there any way to calculate the offset of the text within the span from upper and lower boundaries?

Or is this an way to make the text touch the upper and lower boundaries of the enclosing span tag?

jsFiddle Link
for reference.

Answer 1

UPDATE

I wrote a little script to automatically readjust the font-size, all you need to do is manually adjust the ratio between the total height of the font-family total size and font-family uppercase size.

Check the script: http://jsfiddle.net/jTpfT/32/

---

JS:

/**
 * 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.32
 var times_upper_case_ratio             = 1.48

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

 $(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" );
    })
});