[Paul O'B]

FAQ:What size text should I use in my css?

A simple question but not such a simple answer!

The easiest answer would be to say, “do nothing “and let the users default text size be the one that your visitors use. However most designers want some control over their layout so a better method is required.

CSS is very handy when it comes to specifying the size of your text. You can specify it in a number of formats depending on the application you want it for. On the surface font sizing seems quite simple but it is actually quite a complicated topic.

One of the first things to remember though is that ultimately the size of the text should be left up to the visitor to decide as we all have different eyesight requirements. Most modern browsers will allow you to change the size of the text from the main menu.

In IE this would be from the View menu and then select Text and then the options are as follows:

Largest
Larger
Medium
Smaller
Smallest

These sizes are sizes that the visitor can use irrespective of the size that you have set in your mark up.

Well that's the way it should be but unfortunately if you specify your size in pixels IE will not allow the above user menu to work and the text will remain exactly the same size. (Mozilla and other browsers however will size the text as required.)

Here is the list of available font units:

pixels
points
in
cm
mm
Picas
ems
exs
%

and a list of available keywords:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

Which relates similarly (although not exactly) to the sizes that you can specify from the browser in IE.

So what do we use if we want the visitor to be able to specify his or her own size?

We could use keywords as follows:

<style type="text/css" media="screen">
p {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
color: #000;
background-color: #FFF;
}
</style>

Using the style above will allow the user to be able to change the size of text as required by using the browser controls in most (if not all) main browsers.
Using one of the keywords for font-size is fine as long as you realise that
it may vary slightly between browsers. In fact ie5 (and 5.5.) are out by one size and display x-small as small - which means they should be provided with one of the ie5 hacks to pass a different size to them.
e.g.

* html body {font-size:small;f\ont-size:medium}

Using the above code will ensure that IE5 – IE6 all use the same size which will be medium.

The keywords are not precisely defined by the specs so UA's (User Agents (browsers)) may vary but they should have a defined relationship between the keyword sizes. However, according to Eric Meyer (Cascading Style Sheets the definitive guide) this is loosely defined and apparently different fonts may have different scaling factors.

So what else can we use apart from keywords?

Well Points shouldn’t be used either unless the output is to the printer. Points are a fixed size that will not scale and are ideal for printed output. The same goes for in cm and mm as these are sizes that won't scale but are ideal for printing or for fixed size content.

Therefore we are left with % (percentage) and ems. Percentages as explained by the W3C are as follows: "A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets."

An em is the equivalent to the letter M in the parentfont-size and ex's are equivalent to the small letter x of the default font size. Both of these can be used to set size that is relative to the standard. Em and Ex sizes are based on a size defined with the CSS body style.

For instance, in a style as follows

body { font-size: small}.

That means that 1 em is equal to the size "small."

So if a normal size is 1 em or 100% we can set text that is twice the size by specifying 2em or 200%. In this way the size will be relevant to the screen size and font size that is used and therefore should be consistent among compliant browsers.
e.g.
CSS:

<style type="text/css">
body {
font-size: xx-small;
}
p.emsize {
font-size:2em;
}
p.percentsize {
font-size:150%;
}
</style>

html:

<p>
This is the size set in the body of xx-small
</p> 
<p class="emsize">
This text is specified as 2 em e.g. twice the size of its parent
</p>
<p class="percentsize">
This text is specified as 150% of its parent.
</p>

One thing to remember is that nested elements may compound the size when percentages and ems are used. That is to say that if you nest elements that have their font-sizes set as follows then the size is compounded.
e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {font-size:83%}
.test {font-size:120%}
</style>
</head>
<body>
<p>This is the normal size</p>
<p class="test">This should be 120% of the preceeding text</p>
<div class="test"> 
<p class="test"> I wonder what size this will be.... ? its 120% larger again</p>
</div>
</body>
</html>

As long as you are aware of this you then can work around it. If you want to learn more then there are some useful links here that explain the above in more detail.

http://diveintoaccessibility.org/day...ont_sizes.html
http://www.thenoodleincident.com/tut...ont/index.html
http://www.bigbaer.com/css_tutorials/css_font_size.htm