...

View Full Version : relative font sizing.



melCarmasin
05-21-2007, 12:03 PM
Just wondering how to set my fonts to relative sizing with css. I dont really know much about relative sizing. Does it change the look of the fonts at all?
Can I use css? Or do I have to set relative sizing for each page?

OutThisLife
05-21-2007, 02:40 PM
font-size: x%

Arbitrator
05-21-2007, 04:39 PM
You use relative font sizing by using relative units:

Percentages are relative to the current font size. If no font size has been specified yet, then theyíre relative to the userís default font size.
Ditto for ems.
Exs are relative to the x‐height of a font. If the x‐height canít be calculated, this ends up being half an em.
Pixels are relative to the resolution of the viewing device although, in practice, I believe that browsers use a predefined resolution rather than obtaining it from said device.

croatiankid
05-21-2007, 07:35 PM
Just a note on accessibility: pixel based font sizes can't be made larger/smaller in Internet Explorer.

kewlceo
05-21-2007, 07:49 PM
Let's not forget xx-small, x-small, small, medium, large, x-large, xx-large. These resize nicely across browsers, too.

smkied
05-21-2007, 08:11 PM
Using the "em" is by far the best.

What you do is set your body tag default font and size, and then from there all other fonts should be relative to that site.

For example:

body { font: 12px Arial; }

and then all your other font sizing would be either 0.5em or 1.25em etc., all relative to the original 12px size.

koyama
05-22-2007, 03:46 PM
For example:
body { font: 12px Arial; }
and then all your other font sizing would be either 0.5em or 1.25em etc., all relative to the original 12px size.
That would not be a good idea. In IE, as said, text having font-sizes set with the pixel unit will not scale under text-zoom. It won't help that you set the font-size for child elements using the em unit because they will still be based on what you have set for the body element (which is pixels). Advice is to not use pixel units at all.

kewlceo
05-22-2007, 04:18 PM
That would not be a good idea. In IE, as said, text having font-sizes set with the pixel unit will not scale under text-zoom. It won't help that you set the font-size for child elements using the em unit because they will still be based on what you have set for the body element (which is pixels). Advice is to not use pixel units at all.
QFT. :thumbsup:

When I work with ems, I start like so:


body {
font: 62.5%/1.4 "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
}

Arbitrator
05-22-2007, 09:16 PM
Let's not forget xx-small, x-small, small, medium, large, x-large, xx-large. These resize nicely across browsers, too.Looks like I forgot about these. For completeness, keywords are relative in the same way as percentages and ems (and, sometimes, exs) with the medium value being the default font size if an explicit font size has not yet been specified.

Looking at the spec, Iíve just realized that the keywords are referred to as absolute sizes. That seems rather odd since they are relative to an existing font size.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum