JQuery zoom text to extents, supporting multiple inline spans.

text-extents.js

;(function($){
  $.fn.textExtents = function(options){
    var spans = $('span:visible', this);
    var heightMax = parseInt($(this).css('max-height'));
    var widthMax = parseInt($(this).css('max-width'));
    var fontSize = options.maxFontSizePx;
    do{
      var textHeight = 0; 
      var textWidth = 0;
      $(spans).each(function(){
        $(this).css('font-size', fontSize);
        if($(this).height() > textHeight){ textHeight = $(this).height(); }
        textWidth = textWidth + $(this).width();
      });
      fontSize = fontSize - 1;
    } while ((textHeight > heightMax || textWidth > widthMax) && fontSize > 3);
    return this;
  }
})(jQuery);

$(document).ready(function(){
  $('.text-extents').textExtents({maxFontSizePx: 36});
});