Fit text on lines

Fit text on lines automatically adjusts the font-size of an element to the maximum size it can be, whilst keeping the text on a specified amount of lines. For example, the above headline is the maximum font-size it can be, whilst staying on one line, and this paragraph will resize to always fit on

Simply add the script in the head, and call before the closing body tag

    <script src="js/ftol.js"></script>
</head>

    <!-- content -->

    <script>
        window.ftol();
    </script>
</body>
        

use the min-height css attribute to specify how many lines the text should be on

/* the above example */

.hero {
    min-height: 1px;
}

.ingress {
    min-height: 6px;
}

/* works with @media queries */

@media only screen and (max-width: 45em){
    .ingress {
        min-height: 9px;
    }
}
        

If you are using a custom font - which you probably are - and it comes form google fonts or typescript - which it probably does. Then you'll need to call the window.ftol(); script using the WebFontConfig script like so

WebFontConfig = {
    google: {
        families: ['Libre Baskerville:400,400i,700']
    },
    active: function() {
        window.ftol();
    }
};
        

Go grab the repo over at github