jQDynamicFontSize adjust the font-size dynamically to make a headline or content fit into a given number of lines.

In a production system, use jquery-dynamicfontsize.min.js. For debugging or developing, use jquery.dynamicfontsize.js.

Include a reference to the script after loading jQuery:

<script src="jquery.dynamicfontsize.min.js">

</script>

Usage:

$("#idOfElement").dynamicFontSize();

This will attempt to scale the font size of the element down with 10% in 3 iterations, stopping when a value has been found that allows the element to only use one text line.

$("h1").dynamicFontSize();

This will attempt to scale all h1 elements.

Options supported:

• squeezeFactor: A float value that will be used as the squeeze factor for each step. 0.1 means that we'll attempt to scale the font-size down 10% for each iteration. Defaults to 0.1.
• lines: The number of lines we'll attempt to fit the text to. When the text fits this (or a smaller) amount of lines, we'll stop scaling. Defaults to 1.
• tries: The number of iterations we'll try before we give up and go with the last result. Defaults to 3.
• limitWidth: Uses the width of the element to determine the size instead of the height. Defaults to false.
• allowUpscaling: Allows the element to grow instead of shrink to fit the provided area. Only works when limitWidth is active currently. Defaults to false.

This plugin was initially developed by Gamer.no for use to dynamically scale their headlines to avoid line breaking.