A jquery typography plugin.

hatchshow.js

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(window).load(function(){
      $().hatchShow();
    });		
    jQuery.fn.hatchShow = function(){
      $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){
        var t = $(this);
        t.wrap("<span class='hatchshow_temp' style='display:block'>");
        var pw = t.parent().width();
        while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+"px"),
          function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+"px")}};
        };
      }).css('visibility','visible');
    };
    jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));};

  </script>

And done: https://gist.github.com/bdelespierre/c8046e7d61cf13904004dda8d3a42c0e, enjoy

@mmswi A bit late (yes) but if you want it to be responsive:

    (function($){
        jQuery.fn.hatchShow = function(){
            return els = $(this), $(window).resize(function(){
                els.css({ display: 'inline-block', whiteSpace: 'pre' }).each(function(){
                    var parent = $(this).parent(),
                        fontSize = parseInt($(this).css('font-size').replace('px', '')),
                        maxWidth = parent.width() - (parent.outerWidth(true) - parent.width());

                    while ($(this).outerWidth(true) < maxWidth) {
                        $(this).css('font-size', ++fontSize)
                    }

                    while ($(this).outerWidth(true) > maxWidth) {
                        $(this).css('font-size', --fontSize)
                    }
                })
            }).resize(), els
        }
    })(jQuery);