Responsive Font-Size (Truly Responsive) With jQuery

by: Preston Schmidt

Dreaming About Responsive Design?

It's not like we all haven't at some time dreamed about that perfect design that looked great no mater what screen size and resolution it was viewed on. Something that made people say "Wow", and let you sleep well because deep down you knew that everything was styled correctly.

But what about those fonts? That great SEO headline looks perfect on a 1600px display, but at 1400px it breaks onto two lines. Well that just leaves a bad taste in your mouth, too bad there wasn't an easy way to take of that.

Oh wait, there is...

jQuery Backed Up By CSS Percentages

Let jQuery Set The Base Font-Size

It's really easy and the code looks like this:

$(document).ready(function() {

	var fontSize = $(window).width()/50;
	$('body').css('font-size', fontSize);
	
	$(window).resize(function() {
		var fontSize = $(window).width()/50;
		$('body').css('font-size', fontSize);
	});

});

What we are doing is first setting a variable equal to the width of the "window", and then dividing that by 50. You can divide by a higher or lower number than that based on your own needs and desires. But 50 is a good start. Next we use jQuery to add a CSS "font-size" to the "body" of our document. If we left it like this then all our font-sizes would be the same on our page, so we will follow up with a little CSS

CSS Font-Size Percentages

What we need to do next is start setting our various font sizes for our different elements. h1's, h2's, h3', p's, a's, etc... But the key is to only use percentages.

Let's say that at the current window width our body font-size css is 16px, we can set our relational font-size of an h1 to 200%, which would be 32px. Shrink the window width, and not only does the font-size for the body change, but so does the size of our h1. That will be the same for all percentage based font-sizes.

You'll notice above that there is a .resize function in the .ready function. This is there so that you, or maybe a slightly OCD visitor can sit a play with the screen size and watch the cool transformation of your font sizes. So, the .ready functions sets the "body" font-size on page ready, and the .resize does it on the fly after page ready. You're covered!!!

Play around with your percentages and the division in the script till you get it perfect for your website, and happy coding :)

Outlier

Video, Web, and Design Agency