jQuery plugin that allows for fluid line-height for web pages with fluid layouts.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Created in response to Tim Brown's article Molten Leading: http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/


Select applicable elements with jQuery and pass an amount:

$("#content p").minLineHeight(1.3)

The minimum line height can be supplied in the following ways -

A float: $("#content p").minLineHeight(1.3)

As ems: $("#content p").minLineHeight("1.3rem")

As px: $("#content p").minLineHeight("13px")

If the amount is passed as a float or any units other than px, the script will default to ems. In order for min-line-height to take effect an element must have a min-width, max-width, and default line-height (serves as the max-line-height) specified in CSS. Any element without one of the three properties will simply not get processed.

Why you can't use custom CSS properties to handle this:

Ideally, specifying them min-line-height in a CSS file would be the more manageable, but research found that per the CSS 2.1 mandates browsers to ignore any unrecognized properties:


This means the only way to access a property defined as...

-js-min-line-height: 1.3

...would be by re-requesting the CSS file with an AJAX request and parsing the CSS file in javascript. This wouldn't be effective for a number of performance reasons.