Text loads too big in small window

Text loads too big in small window

I'm working on a site that uses jquery to change the font size on any
window resize, to keep everything in the right place. It works great, but
when someones browser isn't maximized, the font still loads as if it is,
until the user resizes their browser. Even if I make the browser smaller
than it was on page load, the font will adjust. Here is my code:
$(document).ready(function() {
var mainwidth = $('.main').width();
var mainheight = $('.main').height(mainwidth * .8895);
var headerwidth = $('.header-middle').width();
$('.main').height(mainwidth * .8895)
$('.logo').width(headerwidth * .049);
$('.logo').height(headerheight * .7533);
$('.divider').width(headerwidth * .00204);
$('.design-image').width(headerwidth * .2547);
$('.call-us-today').css({'font-size': headerwidth * .01836});
$('.header-paragraph').css({'font-size': headerwidth * .01734});
$('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
$('.top-text').css({'font-size': headerwidth * .02448});
$('.graybar-text').css({'font-size': headerwidth * .03265});
$('.body-header').css({'font-size': headerwidth * .02245});
$('.body-text').css({'font-size': headerwidth * .01632});
$('.footer').css({'font-size': headerwidth * .01224});
$('.banner-text').css({'font-size': headerwidth * .02244});
$('.graybar-text').css({'letter-spacing': headerwidth * .00408});
});
$(window).resize(function() {
var mainwidth = $('.main').width();
var mainheight = $('.main').height(mainwidth * .8895);
var headerwidth = $('.header-middle').width();
var headerheight = $('.header-middle').height();
$('.main').height(mainwidth * .8895);
$('.logo').width(headerwidth * .049);
$('.logo').height(headerheight * .7533);
$('.lady-image').width(headerwidth * .2835);
$('.divider').width(headerwidth * .00204);
$('.design-image').width(headerwidth * .2547);
$('.call-us-today').css({'font-size': headerwidth * .01836});
$('.header-paragraph').css({'font-size': headerwidth * .01734});
$('.header-paragraph-footer').css({'font-size': headerwidth * .01632});
$('.top-text').css({'font-size': headerwidth * .02448});
$('.graybar-text').css({'font-size': headerwidth * .03265});
$('.body-header').css({'font-size': headerwidth * .02245});
$('.body-text').css({'font-size': headerwidth * .01632});
$('.footer').css({'font-size': headerwidth * .01224});
$('.banner-text').css({'font-size': headerwidth * .02244});
$('.graybar-text').css({'letter-spacing': headerwidth * .00408});
});
Does document.ready not load until after the pages loads? Any help with
this would be appreciated!