Using percent for font size?

Css Problem Overview

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 resize properly in older browsers.

I really want to have a standard that I use myself, in the past that has been px, simply because it's simple, easy to understand and fairly easy to achieve the exact font sizes that are specified in designs - but I'm now doubting using px.

I used em on a project recently because it needed text-resizing functionality which I made using jQuery. But I found it quite frustrating because of the way that em amplifies if you have two elements inside of each other both with an em size specified (hope that makes sense)

So I was wondering about using % for font resizing, I've seen a couple of big websites use this technique (namely, Yahoo) and from what I understand it seems to have all of the advantages of em without the incredibly annoying amplification thing.

So in short, I'm just wondering if there are any issues with using % for font-sizing in CSS? Would it be better than using PX in terms of font-resizing? And are there any noticeable draw backs?

Apologies if the blurb before the question is a little much :/ I'm still kind of getting used to the whole QA thing

Css Solutions

Solution 1 - Css

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;
}

Solution 2 - Css

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

Solution 3 - Css

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.

Solution 4 - Css

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 );

Solution 5 - Css

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Sean	View Question on Stackoverflow
Solution 1 - Css	Richik SC	View Answer on Stackoverflow
Solution 2 - Css	Alwin Kesler	View Answer on Stackoverflow
Solution 3 - Css	bronzehedwick	View Answer on Stackoverflow
Solution 4 - Css	Brigand	View Answer on Stackoverflow
Solution 5 - Css	Bob Dolman	View Answer on Stackoverflow