Controlling font size using CSS

CSS offers designers a great deal of control over text and has good browser support. Many web designers overlook Typography, a crucial element of design. This article looks at a best practice method for controlling font size on your website.

Controlling typography - a solid base

Controlling the size of type is the first challenge a web typographer will face. Different browsers may not display font size consistently. Furthermore if you want your site to be usable and accessible you will want to allow users to resize text. Fixing the size of your text is not an option. Over at Clagnut there is a great article explaining how to maintain control over font size whilst allowing users to resize text. This is a classic article and one I recommend you read.

The idea is that you take the default browser text size of 16pt and work with this to control the size of typography. First the body tag is used to reduce the default size to 62.5% of 16pt. This results in a default size of 10pt, which makes creating new rules and managing CSS rules easy.

body
    { 
    /* Reduce default font size to 10pt */
    font: 62.5%/1.5  "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, sans-serif;
    } 

Now we are ready to control the font size using ems

What is an em?

An em is a traditional unit of measurement among typographers. It is a sliding scale based on the horizontal width of your font. An em is directly proportional to the pt size of your font so for a 16pt 1 em is equal to 16 points. Using ems allows you to maintain control and allow text to be resizable.

How do I use ems?

Using the CSS rule above all text is resizable and by default is 10pt. To increase or shrink the font size we define subsequent rules that are inherited in the cascade.

p {font-size:1em} /* This keeps the font at 10pt */

h2 {font-size:1.2em} /* This increases the font to 12pt */

.small {font-size: 0.8em} /* This decreases the font to 8pt */

Want to see this code in action? Check out the demo page

I love this method and thoroughly recommend it. You will save time and maintain tighter control of your typography whilst allowing users to resize text if they wish.

Comments

Patrick Jan 15 2007

Nice article.
I tool I find very useful for calculating the em values is the em calculator: http://riddle.pl/emcalc/

czhorse Mar 8 2007

an awesome tutorial. A real nice addition to my vocabulary of tutorial indexed webpage.Thanks alot ..... with the best wishes!

stephen murdoch Apr 15 2007

Thanks for this, I found very helpful

Ben Glancy Dec 15 2007

It’s ok but you haven’t actually mentioned that em inherits it’s computed value from it’s parent container. Slightly important point!

David Spector Feb 4 2008

I found the statement that the default browser text size is 16pt startling. Doesn’t it depend on the operating system (through such display settings as resolution and dots per inch)?

In any case, measurement shows that the default size of Medium text in IE6 is 12 points = 20 pixels on my computer with my particular settings, which is pretty far away from 16 points.

Another issue that gets ignored is that the proper suppor of variable-sized Web pages requires not only adjusting the size of text, but of images and other graphic elements. Currently, some browsers change the size of all elements when the user changes text size, and some do not. Changing text size may or may not rearrange elements to make them fit on the page.

I have had success designing pages that adjust to user size preferences in addition to user browser window sizing, but only by using controls and Javascript or server-side programming in addition to CSS (http://www.ourmoneytoo.org/photos-6-25-05.php).

BEGIN FLAME

Finally, I’d like to say that I’m very dissatisfied with the overall design of HTML/XTML/CSS/DOM in many ways, and its inconsistent support in various browser versions.

For example, it is hard to do many simple things, such as positioning two buttons above a textarea such that the two buttons are vertically aligned with each other, the left button’s left edge is aligned with the left edge of the textarea, and the right button’s right edge is aligned with the right edge of the text area.

Another example is that CSS does not permit the use of a style class in a class definition, such as the user-friendly

.Yellow {background-color #ffe; ...}
.Heading {.Yellow; ...}
.TopicHead {.Yellow; ...}

Instead, one must write “backward”:

/* Add yellow to some elements */
.Heading,.TopicHead {background-color #ffe}

/* Add ... to some elements */
...

Compare with the cleanness of the design of many mature computer programming languages. Yes, Web design is not as decomposible or regular as computer programming, but this is nowhere near a sufficient excuse. The design of standards and browsers is dominated by amateurs, influenced by existing commercial architectures, with enormous egos who are certain their way is best. This is not the best approach for achieving a really good Web site design environment.

END FLAME

petnos Jun 7 2008

Useful hints. Thanks. I will use some of them.

Mark Jul 18 2008

This is absolutley stupid, I’ve problem with the difference of platforms. Firefox on windows is able to ‘dipslay web corectly’ but firefox on Linux has problem with displaying this ‘hack’ and I dont know how it works under the MacOS.

In my opinion is best way to use percentage or keywords to define font-size, coz its depends on your system and the printer is too able to ‘print’ it well.

May I help you ;]

Sry for my english.

Rohit Oct 4 2008

I would suggest an alternate method - using the CSS font size property values of xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, %. This is browser/platform/resolution independent.

Jon Williams Dec 10 2008