Molten Leading

Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing.

Molten Leading is a tiny JavaScript plugin that automatically adjusts line-height based on element width for optimum readability across vast number of devices.

Thanks to @Wilto, there has been a jQuery plugin called “Molten Leading” around for quite some time already which makes it possible to automate this process and define a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line-height to adjust through.

I wanted to use something similar in one of my latest projects, but I didn’t want to introduce new dependencies to external JavaScript libraries just because of this one feature. I also wanted something that would have a bit better performance, so I decided to write a custom version of Molten Leading without any library dependencies. All this is now available on GitHub too, so take a look and give it a spin.

Features

  • Automatically adjust line-height based on element width.
  • Works in all browsers, including IE6 and up.
  • Uses requestAnimationFrame for the best possible performance.
  • Free to use in both commercial and non-commercial projects.
  • Doesn’t require external JavaScript libraries.
  • Supports px, em and rem CSS units.
  • Weighs only 1.17kb minified and Gzip’ed.
  • Supports multiple instances.

Responsive Line Height

Download

Molten Leading on GitHub

See how Viljami S. Design can help your company

We design digital products that work beautifully across anything that can access the web.
See how we can help.

Share