A great new trend in web development is responsive design. This means your site's elements, and proportions are responsive, or re-sizable, dependent upon the size of the browser, by using percentages for height and width dimensions, as opposed to fixed dimensions in pixels, i.e. 250px wide. Once you have an understanding of how responsive layouts work, it's fairly easy to build them out as all of your div's and images can be easily made responsive. One problem people often run into though, is how to make the text responsive.
You would think the simple solution would be to set your text size as a percentage, but percentages will not work well for all font-sizes. What some may do instead is set your text size using em instead of pixels, which is very similar to a percentage but instead of based on the container it is inside of, it's based on the core font size of the file. So if the main font size of the document is 16px, 1em would equal 16px and 2em would equal 32px. Once all the font sizes are set in em, you would need to create quite a bit of drawn out and complicated jQuery to first identify the fonts, and resize them dependent upon several factors.
Instead of spending the time resetting all of your font size values and creating a new jQuery file that will attempt to make all of your font sizes responsive, we've created a jQuery file that makes it considerably more simple. The following code performs two actions; first, it finds the width of the entire browser window, then dependent on browser size, it will rewrite the CSS for the text you are targeting to whatever size you'd like. So for instance, if you see that in browsers between 1000px and 1200px your font is best viewed at 40px, you can simply rewrite the font size to 40px using our code.
Here is an example of the code:
$(document).ready(function(){
if($(window).width() < 980) {
$('.polaroidTitle h2').css('font-size', 35);
}
else if($(window).width() < 1100) {
$('.polaroidTitle h2').css('font-size', 40);
}
else if($(window).width() < 1200) {
$('.polaroidTitle h2').css('font-size', 43);
}
else if($(window).width() < 1281) {
$('.polaroidTitle h2').css('font-size', 43);
}
else if($(window).width() < 1367) {
$('.polaroidTitle h2').css('font-size', 43);
}
else if($(window).width() < 1441) {
$('.polaroidTitle h2').css('font-size', 45);
}
else if($(window).width() < 1700) {
$('.polaroidTitle h2').css('font-size', 50);
}
else if($(window).width() < 1800) {
$('.polaroidTitle h2').css('font-size', 60);
}
else {
$('.polaroidTitle h2').css('font-size', 60);
}
});
In this case, we're resizing the text within the h2 tag inside of the class "polaroidTitle". Using this file, if for instance the browser window was between 1282px and 1386px all of the font sizes within that specific h2 and class will be resized to 43px. You can tweak the font size pixel points and targeted classes or id's to fit your needs, but I've found these browser dimensions work pretty well. If you find you need to tweak those too, you can without worry of breaking the script, just make sure everything maintains the current formatting.
This isn't the cleanest or most creative code, but it is easily implemented and works very well. It also keeps you from having to spend too much time reconfiguring all of your fonts to use em and working your way through a complicated jQuery solution. Feel free to drop us an email with any questions.