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

Answer 1

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

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

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 4

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 5

The issues and errors of % is only in the misconceptions.

Elements inherit font-size from their parent, unless overridden by a more specific selector. Example:

strong {font-size: 120%}

This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text. Source w3.org

Elements inherit font-size from their parent. So, if a font-size is specified for the body-element (or the html-element by default), all other elements inherit that value (unless overridden by a more specific selector).

body {
    font-size: 62.5%;
}

There is no problems to use % all way for a simplified understanding and a good responsive design. Then in some cases rem must be used to make a reference back to the :root value; if a reuse of an element inside another makes it smaller and you not want it to be resized.

Sure, you can get used to this way of thinking, but Many prefer the other way around by using rem as much as possible by a value of 1 with some decimals. Then they set this in beginning of css:

html {
    /* scaled version of users default setting */
    font-size: 62.5%;
}

Answer 6

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.