Awesome
This plugin is no longer supported. Leaving things up so I don't cause more link rot.
Responsive-Measure
A jQuery plugin for generating a responsive ideal measure.
Getting Started
Download the javascript
In your web page:
<script src="jquery.js"></script>
<script src="jquery.rm.js"></script>
<script type="text/javascript">
$('section').responsiveMeasure({
// Variables you can pass in:
idealLineLength: (defaults to 66),
minimumFontSize: (defaults to 16),
maximumFontSize: (defaults to 300),
ratio: (defaults to 4/3)
});
</script>
Extended feature(s)
This plugin includes a feature for generating a typographic scale that you can apply automagically on resize.
$(document).on('responsiveMeasureUpdated', function(e, data) {
$('.giga').css('fontSize', data.fontRatios[9] + 'px');
$('h1').css('fontSize', data.fontRatios[8] + 'px');
$('h2').css('fontSize', data.fontRatios[7] + 'px');
$('h3').css('fontSize', data.fontRatios[6] + 'px');
$('p').css('fontSize', data.fontRatios[5] + 'px');
$('.sm').css('fontSize', data.fontRatios[4] + 'px');
});
License
Copyright (c) 2012 Josh Brewer Licensed under the MIT, GPL licenses.