Strange results when using FitText.js

Hi guys,

I also posted this over on Stack Overflow but so far no responses, so I thought it might be best to just ask here and see if there was an obvious solution I'm missing!

Running into a few problems using FitText.js - I'm triggering the script in my with the following code (I've included everything for reference, and the plan is to minimise this when I'm finished with the design and code layout)

  $(document).ready(function() {

            var $container = $('#thumbnail-array');

                $container.imagesLoaded(function() {
                    $container.masonry({
                        itemSelector: '.video-thumbnail',
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer',
                        percentPosition: true
                    });
                });
            });

            jQuery(document).ready(function() {
                jQuery('.mobile-close').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');

                    e.preventDefault();
                });
                jQuery('.dropdown').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');

                    e.preventDefault();
                });
                $(".fittext1").fitText(1.1);
                $(".fittext2").fitText(0.75);
            });

            $(document).ready(function() {
                $('.overlay').hover(function(){
                    $(this).parent().find('video').get(0).play();
                }, function() {
                    var video = $(this).parent().find('video').get(0);
                    video.pause();
                    video.currentTime = 0;
                });
            });

The main point of interest there is probably the following:

  $(".fittext1").fitText(1.1);
    $(".fittext2").fitText(0.75);

From here I'm applying it to two elements, and which are defined in my CSS as follows:

h5 {
    display:inline;
    font-size: 2em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

h6 {
    display:inline;
    font-size: 0.75em;
    letter-spacing: 0.3em;
    padding-top: 0px;
    margin-top: 0px;
    font-weight: 100;
}

and then referenced in my HTML like so:

<h5 class="fittext1">Title</h5>
<hr>
<h6 class="fittext2">Subtitle</h6>

Now, my understanding is that they should scale with their parent element - however something is up and I can't work out what it is! You can take a look at what is happening here (most noticeable on resize) - http://jameshenry.info/test/test.php

I've tried a couple of different things but can't seem to get all of the text on the rollovers to be consistent, let alone scale up or down in proportion!

I was originally targeting the .fittext1 and .fittext2 elements using #ID but switched to class due to multiple instances, however switching between the two doesn't solve the issue.

Does anyone have any idea what could be causing this behaviour?

davatron5000 / FitText.js

Strange results when using FitText.js #142