Using percent for font size?

Question

I\'ve read a fair bit about resizing fonts recently, most of it deriding using px as an unforgivable crime (ok, maybe not that bad, you get the idea) because it doesn\'t res

Answer 1

The standard in web design as far as I have experienced it is to use a percent to set the font size in the body, then to use ems to change the font sizing after that. You could use percents outside the body tag with no adverse side effects, but I think many developers find ems easier to work with (anyone is free to check me on this).

The danger comes if you use ems to set the body font size; older browsers choke and incorrectly display the text, especially when zoomed.

Answer 2

try using this

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

so, when you say something like 1em inside the "wrapper" you'll have a size very similar to 10px. here's a example table:

3em == 30px
.5em == 5px
8.5em == 85px

This will help you in the transition

P.d: of course, you need a wrapper tag after the body

Answer 3

There's a jQuery plugin called FitText. It resizes text based on percents. If the visitor for some reason has JavaScript disabled, it'll just display as normal, so set a reasonable PX or EM backup.

It depends on jQuery, so you'll need to include that in your page (if you don't have it already).

---

jquery.fittext.js for reference:

/*global jQuery */
/*! 
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

    $.fn.fitText = function( kompressor, options ) {

        var settings = {
        'minFontSize' : Number.NEGATIVE_INFINITY,
        'maxFontSize' : Number.POSITIVE_INFINITY
      };

            return this.each(function(){
                var $this = $(this);              // store the object
                var compressor = kompressor || 1; // set the compressor

        if ( options ) { 
          $.extend( settings, options );
        }

        // Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function () {
                    $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };

                // Call once to set.
                resizer();

                // Call on resize. Opera debounces their resize by default. 
        $(window).resize(resizer);

            });

    };

})( jQuery );

Answer 4

Maybe will this make more sense of making a font-resize script. I had made a script that did exactly what you desire, but I cant find it any more.

Pseudo-code:

var fontSize = 15; // (em) input
var fontResize = -1;// (em)input
fontSize = fontSize+fontResize; //current div

for(every inherent parent classname == 'classname-em')
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90;

So explained in words. The script needs to resize some fonts, when that is done it will also look for some parent divs to resize those fonts too, except they will be resized 10% less than its inherent. With some puzzling you will have the right conversion. Also try to avoid paddings and border widths.

Answer 5

In CSS3, use rem (root em). Sizing will not be affected by em size of the parent element.

The root font size is set by setting the font size on the :root pseudo-element, like so:

:root {
    font-size: 16px;
}