line-height in pixels and font-size in percent.. correct?

[duuudie]

Hi

Is that correct to have something like this?

 line-height: 17px; 
 font-size: 75%;

Should I have the line height in percent as well? What would be equal to 17px in percent?

thanks in advance

[ethanp]

I don't believe it will matter. I've done line height it pt (forgot what it stands for) and my font size in pixels.

[vgarcia]

If your font size is going to be set in percentages, set your line-height to a percentage as well for consistency. If a user bumps their text size up to something past 17px tall, your lines will run into each other.

[Paul O'B]

Yes as Vinnie says if the line-height is fixed in pixels and the font is percent then the font will grow but the line-height will stay the same and the font may grow out of the line.

If you use percent or ems for line-height then they stay proportional to each other as the text is resized.

If you have the font-size int the body set to 12px and your p tag set to 75% then that will be 9px high. So you can work out from there how much bigger 17px line height would need to be (about 1.9ems if my maths is correct )

Paul

[vgarcia]

If you have the font-size int the body set to 12px and your p tag set to 75% then that will be 9px high. So you can work out from there how much bigger 17px line height would need to be (about 1.9ems if my maths is correct )

It's actually 1.8888888888888888888..... ems, but that's just splitting hairs

[Paul O'B]

lol - but I worked it out in my head not on a calculator

[vgarcia]

lol - but I worked it out in my head not on a calculator

I did too. Any number divided by 9 will just repeat itself. Example:

2/9 = .2222222222222

Ex-math major here

[Paul O'B]

Any number divided by 9 will just repeat itself

how about 9/9

[Xerxos]

Paul: well it is equal to 1.00000... if u think about it

[vgarcia]

how about 9/9

The remainder repeats itself, smarty pants

[duuudie]

lol

thanks guys

[duuudie]

btw... can anyone tell what is the math for translating pixels into em?

now, what if I let the margin in px? Is that a problem (in terms of consitancy):

body { 
 background: #fff;
 color: #000; 
 margin: 10px;
 line-height: 1.9em; 
 font-size: 0.75em; 
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align: center;/* center for ie5*/
 }

and also.. one last thing... when the text appears in the context of a form, such as in the above code. When setting the size of the text to something quite big (using my browser) I realized that the input fields and the text don't line up nicely... why is that? can I avoid that?

<fieldset>
<legend>Admin Login</legend>

<form action="/admin/home.php" method="post">

<p> 
   <label for="username">Username</label>
   <input type="text" name="username" title="input your  username here" size="20" maxlength="30" />
</p>
<p> 
   <label for="password">Password</label>
   <input type="password" name="password" title="input your password here" size=20 maxlength="30" />
</p>
<p></p>
<p> 
   <input type="submit" value="login" title="click this button to login in the admin control panel" />
</p>

</form>

</fieldset>

[vgarcia]

There's no real way to directly translate pixels to ems. Ems are based on the user's default text setting in their browser. Most browsers' default size is 14px unless the user decides to change it, but some browsers have 16px as the default. If you need to use pixels, then use pixels. Otherwise, if you have more flexibility in your layout use percentages or ems.

[duuudie]

So using % or ems is quite the same is that it?
In this case I think I will feel more comfortable with ems...

what about the 'resizing text/forms' issue?

[vgarcia]

So using % or ems is quite the same is that it?
In this case I think I will feel more comfortable with ems...

Use what you're comfortable with. They pretty much do the same thing.

what about the 'resizing text/forms' issue?

What do you mean? A user will resize text if they need to (I tend to do it on small-text sites myself; my eyesight isn't so great if I don't have my contact lenses in). Make sure your layout can accommodate at least a few different text sizes if possible. .