Resize text according to the width of the area

scripts.js

<script type="text/javascript">
	// use strict
	jQuery(document).ready(function ($) {
	
		function fontFollow(shit, poop){
			// Pick the width of something that you want to match.
			// This is an image that we're matching up here.
			var ratioWidth = $(".ratio_element").outerWidth();
			
			// Divide the width into 100 tiny bits
			// Work out the ratios from the font sizes in relation to the width
			var hMath = (ratioWidth / 100) * 10;
			var pMath = (ratioWidth / 100) * 4;
			
			// Divide the width by 100, Then to get the next number, divide the font size by 1% width.
			// For example: 360 / 100 = 3.6. font-size: 36px / 3.6 = 10.
			// So we use (var / 100) * 10 = the ratio to maintain.
			// Apply the numbers to the elements and see what happens!
			$(shit).css("font-size", hMath);
			$(poop).css("font-size", pMath);
		}
	
		fontFollow('.content h1', '.content p');
		
		$( window ).resize(function() {
			fontFollow('.content h1', '.content p');
		});
	});
</script>