Resizable Text

See http://stackoverflow.com/questions/2989950/auto-resize-text-font-size-when-resizing-window

by Tom Söderlund

HTML

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a nunc. In ante metus, gravida vel, bibendum et, mollis vitae, ipsum. Sed leo nibh, pulvinar dignissim, pretium eget, mattis id, erat.</p>
<p>Nam felis dolor, dapibus ac, consectetur quis, porta ac, massa. Proin magna. Ut quis purus vitae neque feugiat dictum. Vestibulum nisi dui, feugiat pretium, rutrum sed, elementum ac, enim. Suspendisse fermentum turpis eget purus facilisis ultrices. Nullam pulvinar orci faucibus felis.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras non purus. Nunc fermentum, erat id faucibus fringilla, leo tortor sodales lectus, in ullamcorper dolor sapien dictum purus. Aliquam eu nulla nec diam lobortis lobortis. Phasellus sed justo. Vivamus a neque. Aliquam erat volutpat. In nibh. In vulputate, ipsum vel consectetur lobortis, massa lectus placerat risus, et ultrices nisi arcu quis elit.</p>
</div>

CSS

* {
	margin:  0;
	padding: 0;
}

body {
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 2em;
}

p {
	margin-bottom: 0.5em;
}

h1, h2, h3, h4 {
}

ul, ol {
	margin: 0 0 0.8em 1.1em;
}

a { color: #09F; }
a:hover { color: #0BF; }
a:active { color: #27D1FF; }

#content {
	position: absolute;
	width: 80%;
	top: 5%;
	min-width: 280px;
	left: 50%;
	margin-left: -40%;
	min-margin-left: -160px;
}

JavaScript

// When document has finished loading
$(document).ready(function() {
	
	var resizeText = function () {
		// Standard height, for which the body font size is correct
		var preferredFontSize = 180; // %
		var preferredSize = 1024 * 768;

		var currentSize = $(window).width() * $(window).height();
		var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
		var newFontSize = preferredFontSize * scalePercentage;
		$("body").css("font-size", newFontSize + '%');
	};

	$(window).bind('resize', function() {
		resizeText();
	}).trigger('resize');

});