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.