Auto Adjust The Line-Height Of Your Text Using Molten Leading

Preview:

Description:

Molten Leading is a standalone Javascript library that automatically adjusts the line-height property of your text to make them more readable.

Features:

• Automatically adjust line-height based on element width for optimal readability.
• Works in all major desktop and mobile browsers, including IE 6 and up.
• Free to use in both commercial and non-commercial projects.
• Doesn’t require external JavaScript libraries.
• Weighs only 689 bytes minified and Gzip’ed.
• Supports multiple instances.

How to use it:

Include the moltenleading.js in the document.

<script src="moltenleading.js"></script>

Enable the function on where you want to adjust the line height automatically.

moltenLeading("p", {
  minline: 1.2,    // Minimum line-height for the element, numbers (multiplied by the element's font-size)
  maxline: 1.8,    // Maximum line-height for the element, numbers (multiplied by the element's font-size)
  minwidth: 320,   // Minimum element width where the adjustment starts, pixels
  maxwidth: 1024,  // Maximum element width where the adjustment stops, pixels
  threshold: 100   // Threshold time used on window resize, milliseconds
});