Hi Everyone,
I change my body font px to %.
font: normal 85%/140% "trebuchet ms", tahoma, sans-serif;
my question is that how to covert this 85% font size to em? is there any formula?
Thanks
0.85em
If doing that, perhaps set the font to 100% on the body first.
deathshadow suggested me to use the 85% body font…
I want to know the conversion of formula to covert my 85% to em and px… 
Effect of Font Metrics on Common Sizes
thanks raplh
Fair enough. to each his/her own.
I want to know the conversion of formula to covert my 85% to em and px.. :)
Well, converting from % to em just involves converting from % to decimal, e.g. 85% = 0.85em. No more formula needed there.
Pixels are trickier only in that you don’t know what the initial font size is, as you don’t know what size the user’s computer displays fonts at. People often say that 100% = 16px, and I find that a useful guide, but it’s a guide only, as you don’t really know for user. (For some users, 100% might be 24px, for all you know, depending on how they have set up their computer to display fonts.)
But if you assume that 16px = 100% = 1em, then the mathematics are pretty simple.
85% = 0.85 em = 0.85 x 16 = 13.6px (so each browser will have to round that up or down).
I prefer to assume that 16px = 1em (ok, kick me if you want to) and then use ems as follows:
14px = 0.875em (14/16 = 0.875)
12px = 0.75em (12/16 = 0.75)
10px = 0.625em (10/16 = 0.625)
And so on.
But it gets messy if you then have an elements within elements with set font sizes, so be careful.
ok thanks for your reply. so you mean it is better to use 100% body font size? than 85%?
Ok… this all good advice but what you really need is the PRINCIPLE behind this. so keep these points in mind in the following order:
-
all browsers begin with a default px size, but this size varies from browser to browser and even user to user.
-
As far a FONT-SIZE is concerned there is no real difference from ems to % ( other than multiplying x100)
3)Body-100% or 1em means you don’t change the default size of the that browser font at all!
- the “em” value in pixels represents a cascade, font-size:1em=100% of the size of the CONTAINING ELEMENT. ( and the containing element of all elements is the HTML/BODY tags… thus what DS was mentioned)
5)What you really need to keep in mind is the CASCADE.
… it gets messy if you then have an elements within elements with set font sizes, so be careful.
lets say , fore the sake of example , the default font-size of a browser is 20px. you have nested the following elements in the body:
<div id=“page”> <div id=“main”><div class=“story”> <p>
and set the following rules:
body {.9em)
p{font-size:.7em}
.story{font-size:.5em}
.main{font-size:.8em}
when you test thsi out on that browser your paragraph is text: about 5px!!! “But I set my P rule to .7em that should be 14px” , you say!?!
what happen is the body is set at 18px (.9em x 20=18px)
but then the next rule bases it self on thet 18px size, so .main=.8em x18px= 14.4px
and .story does the same based on .main… 14.4px x .5em =7.7px… finally your rule for P applies 7.7px X .7= 5.39px
so in fact when you work with ems, you need to cascade size rules.
lets assume you intend for all Ps to have a size of 14px FOR that BROSWER with ( for the sake of example) the rules described above…
you would need to create these additional rules:
body {.9em)
p{font-size:.77778em}/this general a rule should be removed actually, as it would only work on a direct child of he DODY element, maybe it should be body >p for this example/
.story{font-size:.5em}
.main{font-size:.8em} /* if you removed the rules above you would need to recalculate everything , BTW*/
.story p{font-size:1.94446em}
.main p{font-size:.972223em}
This is not meant as example of efficient code, just a demonstration of how font size is cascaded when using ems or %s you need to think in proportions when you design an an not px, at that point it will make sense to set the body to 1em as a base unit… of that proportion.
No, it’s just a choice you make. Neither is better or worse. To me, 100% makes more sense, but ds60 knows his stuff, so I would never cross him in matters of this sort. 