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.
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.
- 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.
- Weighs only 1.17kb minified and Gzip’ed.
- Supports multiple instances.