Using Percentages

From CSS Discuss

Jump to: navigation, search

Part of: Using Font Size

See also: Using Percent

This page suggests a way of ensuring that your different sizes of text will be differentiable on multiple platforms and multiple user agents (namely Mac, PC, and Unix for Gecko, IE, KHTML/ Web Core and Opera). The problem with just using any old sizes is that the size differences may disappear on certain browser, OS and font combinations.

An example should highlight things better. You have a main page with a H1, and under that a H2 slightly smaller, and then your main copy. Now you move to another operating system and find that your H1 and H2 now look the same size. This is because different fonts have different stepping points at which they change size from being 9px high to 10px high.


We spent a whole day going through as many combinations of browsers and fonts as realistic to get a combination of fonts and sizes that would ensure each size level would be consistently different from the next on all platforms. An extra constraint we set ourselves was to ensure that the sizes were also differentiable when the user resized their fonts by one size up or one size down.

As an extension to this idea, we also got fed up of calculating nested sizes (i.e. to get 130% when you have a base of 90% and a container of 70% you need 195% blah blah.). So, we suggest the following process:

1) Never set percentage sizes directly on an element (e.g. P { font-size: 77% } ). This will cause headaches for other nested content. 2) Always try to use a container element and a class or id to apply size. (e.g. DIV#mycontent { font-size: 91% }) 3) If you set the base size for your main containing elements, you should be able to get away with just using the default size of elements in 90% of cases using one of the scaling percentages when tweaking sizes for headers, etc. 4) If you are applying scaling to a list, only apply it to the UL/OL, and always associate it with an class or id where possible (using selectord can manage this) by associating with the parent container which has it's own div. Also, forcing nested elements to be 100% sized through the use of "LI UL { font-size: 100% }" can go some way to stopping confusion. (as seen on clagnut also)

/*
 * Base              79%    91%   103%
 *
 * size              -2	    -1      0
 * -------------------------------------
 * biggest          151%   147%   160%		
 * bigger           130%   131%   130%
 * big              115%   113%   116%
 * normal           100%   100%   100%
 * small             89%    90%    88%
 * smaller            x     77%    77%
 * smallest           x      x     68%
 *
 */
body 
{ 
    font-family: Verdana, Geneva, "Bitstream Vera Sans", Helvetica, sans; 
    /* font-family: Georgia, "Bitstream Vera Serif", "New York", Palatino, serif; */ 
    font-size: 103%; 
} 
 
th, td /* Needed for NN4 and Quirks mode in Moz/FF as its tables do not inherit styles */ 
{ 
    font-family: Verdana, Geneva, "Bitstream Vera Sans", Helvetica, sans; 
    /* font-family: Georgia, "Bitstream Vera Serif", "New York", Palatino, serif; */ 
    font-size: 103%;
} 
 
/* Headings */ 
 
h1 
{ 
    font-size: 160%; 
} 
 
h2 
{ 
    font-size: 130%; 
} 
 
h3 
{ 
    font-size: 116%; 
} 
 
/* Standard sizes */ 
 
.small 
{ 
    font-size: 88%; 
} 
 
.smaller 
{ 
    font-size: 77%; 
} 
 
.smallest 
{ 
    font-size: 68%; 
} 


Tim Parkin and Matt Goodall of www.pollenation.net

Personal tools