Font scaling based on width of container with js libs

Question

I'm trying to implement font-size scaling based on width of container (I want my long h1 to be in one line).

Here is my HTML with bootstrap 3:

<div class="someclass">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="responsive-headline">LONG TEXT IS
                LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</h1>
                <ul class="breadcrumbs">
                    ...
                </ul> 
            </div>
        </div>
    </div>
</div>

CSS styles:

.responsive-headline {
    margin: 0px 0px 3px;
    color: #fff;
    text-transform: uppercase;
    font-size: 32px;
    letter-spacing: 1.7px;
    line-height: 1.4;
}

Ok. Let's start from FitText.js library:

jQuery(document).ready(function($) {
   $('.responsive-headline').fitText();
});

Result font-size: 114px; ! What? Add some parameters:

$('h1.responsive-headline').fitText(1.2, { minFontSize: '18px',
maxFontSize: '32px' });

Result font-size: 32px; . Better but not what I want, I need smaller font-size. Also tried to add width: 1000px; display: block; white-space: nowrap; width: 1000px; display: block; white-space: nowrap; to h1 without success.

Second library that I tried is FlowType.js . Add some code:

jQuery(document).ready(function($) {
   $('h1.responsive-headline').flowtype();
});

Result font-size: 32.5714px; . Little bigger than default. And with parameters:

$('h1.responsive-headline').flowtype({
    minFont   : 12,
    maxFont   : 32
});

Result font-size: 32px; .

Why my h1 becomes bigger but not smaller?

Answer 1

Might it be because you are calculating the font-size on (document).ready? If you're looking for a more dynamic sizing "responsive", maybe try the resize() method? https://api.jquery.com/resize/

My appologies if im misunderstanding.