Page 1 of 1

relative font sizes and css

Posted: Sat Oct 04, 2003 2:29 pm
by m3rajk
i use <font size="-2">some text</font> in my pages.

i'm trying to move this to a css class that i use in a <span></span>

my problem is that the test i did for display looked like it was absolute with + and ignoring -
i tried:

Code: Select all

<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2">this is css+2</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2mm">this is css+2mm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2cm">this is css+2cm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2in">this is css+2in</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2pc">this is css+2pc</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2pt">this is css+2pt</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="+2">this is font+2</font>
&nbsp;&nbsp;<span style="font-size:+2em">this is css+2em</span></p>

<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2">this is css-2</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2mm">this is css-2mm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2cm">this is css-2cm</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2in">this is css-2in</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2pc">this is css-2pc</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2pt">this is css-2pt</span></p>
<p>this is regular text&nbsp;&nbsp;<font size="-2">this is font-2</font>
&nbsp;&nbsp;<span style="font-size:-2em">this is css-2em</span></p>
i tried it in ie and mozilla. both looked to me like it was absolute when using + and ignored when using -
i want the same size as <font size="+2">

can anyone help me out here?

Posted: Sat Oct 04, 2003 3:33 pm
by evilMind
Negative length font-size values are not permitted. However, if you use a base font size you can make your font smaller....

Code: Select all

body &#123;
   font-size: 1.2em; /* default font-size */
&#125;
Now later you can use % to make the font samller/larger as needed.
ie,

Code: Select all

<body> <!-- our css sheet says font-size = 1.2em; -->
 <span style="font-size: 80%"> font </span> <!-- 80% of the parent's font-size -->
</body>

Posted: Mon Oct 06, 2003 12:16 pm
by Unipus
ems are automatically relative.

body {
font-size: .8em;
}

p {
font-size: .5em;
}


would give you paragraph text .4 ems in size.

Posted: Tue Oct 07, 2003 5:47 pm
by m3rajk
and how does that work out if i want to allow the user to use the size that's "browser friendly" ie: if the user adjusts the size in the browser, then the browser will change sizes

Posted: Tue Oct 07, 2003 6:14 pm
by Unipus
You don't mean the browser window, do you? I wouldn't do that if I were you.

I think what you mean is: "the user has set their default type size preference in the browser's settings, so how do I use that to set the type size throughout my site?"

Basically, work everything from 1em. 1.2em would be 120% of the default size. .6em would be 60%. And as I mentioned already, these sizes are relative and nestable. Be careful with that, a simple nesting mistake might drive you insane trying to find.

Posted: Mon Oct 13, 2003 8:58 am
by m3rajk
.2 em in css font-size is roughly 1 in html <font size>