Responsive Text Auto-reszing Plugin with jQuery - smartflow

SmartFlow.JS an extremely lightweight jQuery web typography plugin to auto change the font size of your text to fit any devices. Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. SmartFlow.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width.

Additional options, reviewed below, allow you to configure SmartFlow.JS to fit your needs. These options include element size thresholds, font-size thresholds and ratios. The element size thresholds will stop SmartFlow.JS from performing its magic once the element reaches beyond specific pixel dimensions. The font-size thresholds will stop SmartFlow.JS from resizing the text beyond certain font-sizes. Lastly, you have full control over the base font-size, so that you can set your typography perfectly.

See also:

• JS Library For Auto Resizing Text and Line-Height - FlowType.JS

How to use it:

1. Include the jQuery javascript library and the SmartFlow.JS script in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="smartflow.min.js"></script>

2. Call the plugin and set the options.

<script type="text/javascript">

$('body').smartflow({
 minimum   : 100,
 maximum   : 1200,
 minFont   : 6,
 maxFont   : 40,
 fontRatio : 30,
 lineRatio : 1.45
}); 


$('h1').smartflow({
 minFont   : 12,
 maxFont   : 60,
 fontRatio : 20
}); 
</script>

3. Default settings/variables.

maximum     : 9999,
minimum     : 1,
maxFont     : 9999,
minFont     : 1,
fontRatio   : 35

---

This awesome jQuery plugin is developed by iraycd. For more Advanced Usages, please check the demo page or visit the official website.