[OT] Re: font size

Hi Reagan,

you might be better asking this question on a CSS list (there are 
several around) although if you're particularly interested in the 
accessibility aspects this is an appropriate place to ask. Anyway, here 
is a rough guide...

px, pt, cm, in, %, em and ex are different units for sizes.

pt is points - there are 72 of them in an inch, and they don't change 
size.

cm and in are centimetres and inches - depending on whether you grew up 
in the rest of the world in the last few decades, or grew up as a 
british subject or an American, one or the other will be familiar. They 
don't change size either.

px is pixels - there are generally between 70 and 100 of them in an 
inch. It really depends on the settings you have for your monitor 
display, although there are several assorted ways of varying it. Some 
browsers will let you change the size of a pixel by zooming in and out, 
some don't, or make it extra hard. Generally you can't change the size 
of a pixel by setting up a user style sheet.

% is percentage. What happens when you set a font-size in % is that it 
calculates based on the base font size. For example, if my default size 
is 12pt (as is the case for many browsers) and you set font-size: 80% 
my browser will try to render it as 9.6 pt (If you happen to be in 
Australia, note that this is too small for a legal contract. People may 
be able to ignore what ever they decide that is presented thus. More to 
the point, many people everywhere find it too small to read 
comfortably).

This effect accumulates. If I set the size of a list item to be 80%, 
and the size of my body content to be 80%, then when the browser 
computes the size for the list item it will be 80% of 80% (because the 
list item is  in the body and the body is already 80%) or 64%. (There 
are easy ways around this - you just have to specify what happens when 
you have combinations).

em is similar - it is a unit based on a particular measure of the 
character size. So 1em is equivalent to 100% (or whatever size things 
were already), 0.8 em is equivalent to 80% and 2em is equivalent to 
200%. (Sort of. The way it works is a bit more complex, and you get the 
effects where mixing % and em is useful. See the earlier messages in 
this thread for more links to information like this).

ex is similar to em, although measured on a different part of the 
character. It seems to be rarely used today on the Web.

The point about % and em (and ex) is that they are based on the user's 
font size - one of the things that (in theory) is very easy to change, 
so setting your sizes in terms of them allows for easily flowing 
layouts when users change the size of their font. If you set sizes in 
terms of pt, cm, mm, or in then in theory it is quite hard to change 
them as a user (in practice this isn't always the case - there are 
different ways of zooming things, but the results are not quite so 
predictable as an author).

There is a lot of discussion over how easy or hard it is to change the 
size of pixels, and whether these should be considered "relative units" 
- a technical term used in a particular WCAG checkpoint whose goal is 
to make it easy for the user to change the size of presentational 
aspects of their browser (window size, font size) and have the content 
come out looking reasonable. As you can see earlier in this thread...

Hope that is helpful as a rough introduction. Please do follow up with 
the links and information that is more detailed if you want to 
understand the intricacies of this area.

cheers

Chaals

On 7 Apr 2004, at 14:18, Reagan D. Lynch wrote:

> Hello,
>
> I have a question about font size and css.
>
> I understand what font-size: 12px would mean, but what
> would fon-size: 12pt do?
>
> Also, what is the difference between % and em?
>
> And why would I be better off using font-size: 100%?
>
> Thanks,
>
> Reagan D. Lynch
>
>
--
Charles McCathieNevile                          Fundación Sidar
charles@sidar.org                                http://www.sidar.org

Received on Wednesday, 7 April 2004 01:46:53 UTC