Responsive times call for Responsive Measures
Reading is one of the most basic things we do on the web. CSS gives us control over font-size and line-height but we don’t have a good way to control the measure. Until now.
Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.
$('article').responsiveMeasure({ // Variables you can pass in: idealLineLength: (defaults to 66), minimumFontSize: (defaults to 16), maximumFontSize: (defaults to 300), ratio: (defaults to 4/3) });
It also has the ability to generate a resolution independent font-scale based on the ideal font-size.
$(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'); });
Check out the examples to see the plugin in action.