Posts: 2528
Joined: 2005-12-14 Location: Victoria British Columbia
Deuce is right, there is no
Posted: Sun, 2007-07-29 01:47
Deuce is right, there is no simple conversion. Roughly speaking an em is the size of the current font, whatever that happens to be. It is best to avoid defining font sizes in pixels on the web. The web is not paper and you shouldn't try to treat is as if it were.
I could change my plea to guilty,
but I don't think it would stick.
Somebody hit the lights
So we can rock it day and night
People gettin' down that's right
From PX to EM
Everybody lookin' like stars (like stars)
All the chicks and the fellas in the bars (in the bars)
All ya'll bumpin' this in ya cars (in ya cars)
From PX to EM
godly.asian
Regular
Posts: 13
Joined: 2007-07-27
standard
Posted: Sun, 2007-07-29 19:28
lets say the font size was standard. would there still be any...and if there is, is there neway to not allow users to change the font size(through javascript or nething).
Hugo
Moderator
Posts: 12314
Joined: 2004-06-06 Location: London
Wow bad paragraph
Not sure
Posted: Sun, 2007-07-29 20:21
Wow bad paragraph
Not sure what you're asking but if it's whether there is a means to prevent font-resizing no and nor should one want to do this.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
godly.asian
Regular
Posts: 13
Joined: 2007-07-27
hmm, let me rephrase what I
Posted: Sun, 2007-07-29 22:01
hmm, let me rephrase what I said.
Is there any formula to convert px to em, on a standard font.
gary.turner
Moderator
Posts: 5848
Joined: 2004-06-25 Location: Dallas
As stated earlier, an em is
Posted: Sun, 2007-07-29 22:15
As stated earlier, an em is the size of the current font. If the current font is 16px, that's one em.
If you have that 1em font and you want a child to be 12px, that would be .75em relative to its parent. Within the child element, that 12px font is 1em.
It will give you tired head while you're learning it, but it is worthwhile as you will be able to alter all fonts proportionally by simply modifying the top level font size, and you will have a font-size gestalt.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Zander78
newbie
Posts: 2
Joined: 2008-05-08
You can't use a formula
Posted: Thu, 2008-05-08 11:02
You can't use a formula, as said, since it's a relative unit and depends on what font-size the parent element (and the parent's parent ...) has. For example if the body element has 10px, 10px = 1em. If then a element inside of the body has 2em and its child 1em, the font-size is 20px.
You seem to want to make it into paper, and it can't be done. It just isn't, and nothing you can do will make it into paper.
If you insist on trying you will only write very bad sites that will make a lot of people go away from them. Nothing you can do will make the web into paper. Understand this, and learn to adapt.
The web isn't even visual. A certain percentage of visitors will not look at your site, but they will still visit it. The most important non visual visitor is, of course, the Google spider, but some folks with no eyesite still have money they can spend. Why would you voluntarily throw away part of your possible income?
I could change my plea to guilty,
but I don't think it would stick.
Because as everyone has said above px are static and em are relative, what this page seems to do is use JS to determine what YOUR font size is (by default). Obviously, everyone else isn't going to have that same font size but what the tool is good for is when you are sizing up boxes (I was doing a crapload of forms and no, I could not eyeball it by imagining letter M and seeing how wide in em the box should be) next to boxes and boxes. I would measure what I had already with a ruler that came with the Web Developer Toolbar to get a px unit. Then I plugged it into the pxtoem calc, and took that number and used it as a basis to get a feel to how close it really was to what I needed.
I usually still had to adjust the amounts, of course, but a lot less adjusting since I was starting out in the ballpark already (test test test in all browsers). Now I have wonderful boxes who scale with the text! It doesn't matter how big people make the font, everything stays cool. : )
I'm no expert, but I can fake one on teh Interwebz
luwana
newbie
Posts: 8
Joined: 2008-05-12 Location: las vegas
Out of all the estimates
Posted: Mon, 2008-05-12 19:03
Out of all the estimates i've seen I kept this in my notes...
for font size:
1em=12px
.8em=11px
If you set the font size to something in px then the em will be the size of an "M" in that font size - here is a better explanation: http://24ways.org/2005/an-explanation-of-ems
Ed Seedhouse
Guru
Posts: 2528
Joined: 2005-12-14 Location: Victoria British Columbia
luwana wrote:Out of all the
Posted: Mon, 2008-05-12 19:30
luwana wrote:
Out of all the estimates i've seen I kept this in my notes...
for font size:
1em=12px
.8em=11px
Totally wrong. There is no such simple conversion.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
luwana
newbie
Posts: 8
Joined: 2008-05-12 Location: las vegas
hmmm
Posted: Mon, 2008-05-12 19:58
Ed Seedhouse wrote:
Totally wrong. There is no such simple conversion.
Hmmm. I suppose we could use the calculator an figure that is the universal truth. Is that totally wrong too? Or might both of these be some sort of a reference point for all of us youngers?
gary.turner
Moderator
Posts: 5848
Joined: 2004-06-25 Location: Dallas
First, there is no universal
Posted: Mon, 2008-05-12 23:41
First, there is no universal conversion. Let me create an example.
We will accept the browser's default default value of 16px for the base text size.
body {font-size: 100%;}
p {font-size: 1em;} /*or, 16px*/
h3 {font-size: 1.25em;} /*or 20px*/
Now, in a certain section of the page, we want a smaller base size so we do this;
#special {font-size: .75em;} /*or 12px*/
Within #special, p's 1em will now be 12px, and h3's 1.25em will be 15px.
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Ed Seedhouse
Guru
Posts: 2528
Joined: 2005-12-14 Location: Victoria British Columbia
luwana wrote:Ed Seedhouse
Posted: Tue, 2008-05-13 00:23
luwana wrote:
Ed Seedhouse wrote:
Totally wrong. There is no such simple conversion.
Hmmm. I suppose we could use the calculator an figure that is the universal truth. Is that totally wrong too? Or might both of these be some sort of a reference point for all of us youngers?
There is no "universal truth" and there is no defined relationship between pixel size and em size. There just isn't any, period. The web is not paper. Trying to make it into paper won't work.
Gary's calculations are fine if we know that every browser defaults to 16 pixels, but in fact we know that they don't! Macs default to 15. Lots of people override the defaults. I override Firefox to default to 20 pixels for 1em because I need that to read easily. A lot of people are over 40 these days and they have money to spend. The boomers won't all be dead any time soon and you ignore them at your peril. (I say them because I myself am not one, I'm too old.)
The web just isn't paper. Many people who browse the web don't see it at all because they are blind.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Chris..S
Moderator
Posts: 5678
Joined: 2005-02-22
*sigh*.
Gary, I'm not well
Posted: Tue, 2008-05-13 01:21
*sigh*.
Gary, I'm not well versed in forum lore, but isn't there some magic word you can include in a post to finally kill a thread?
Posts: 2528
Joined: 2005-12-14 Location: Victoria British Columbia
Sorry - didn't realize it
Posted: Tue, 2008-05-13 01:41
Sorry - didn't realize it was supposedly dead and buried. With this incarnation of the system I just browse the most recent messages and if someone posts on an old one it never penetrates my skull that this is so.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
gary.turner
Moderator
Posts: 5848
Joined: 2004-06-25 Location: Dallas
Same with me, Ed. And, I
Posted: Tue, 2008-05-13 04:50
Same with me, Ed. And, I wasn't doing more than using the 16ppx starting point as a reference for the calculations. The point being that all em font metrics are relative to the element's parent size, and that 1em in one element could be a different size in another element.
And, that gives me the last word as I close comments.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Hugo
Moderator
Posts: 12314
Joined: 2004-06-06 Location: London
Chris..S
Posted: Tue, 2008-05-13 10:53
Chris..S wrote:
*sigh*.
Gary, I'm not well versed in forum lore, but isn't there some magic word you can include in a post to finally kill a thread?
Hitler, Nazis.
Now it's closed. If anyone unsure of the meaning there is an old thread that can be resurrected on the subject
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Elder
Posts: 1653
Joined: 2005-11-20
Location: STL
in short, no. pt and px are
Posted: Sat, 2007-07-28 23:56
in short, no.
pt and px are absolute values, em and % are relative values.
all. <Dictionary.com http://dictionary.reference.com/browse/all>
Guru
Posts: 2528
Joined: 2005-12-14
Location: Victoria British Columbia
Deuce is right, there is no
Posted: Sun, 2007-07-29 01:47
Deuce is right, there is no simple conversion. Roughly speaking an em is the size of the current font, whatever that happens to be. It is best to avoid defining font sizes in pixels on the web. The web is not paper and you shouldn't try to treat is as if it were.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Moderator
Posts: 9203
Joined: 2004-06-30
Location: Milton Keynes
PX to EM
Posted: Sun, 2007-07-29 10:08
Somebody hit the lights
So we can rock it day and night
People gettin' down that's right
From PX to EM
Everybody lookin' like stars (like stars)
All the chicks and the fellas in the bars (in the bars)
All ya'll bumpin' this in ya cars (in ya cars)
From PX to EM
Regular
Posts: 13
Joined: 2007-07-27
standard
Posted: Sun, 2007-07-29 19:28
lets say the font size was standard. would there still be any...and if there is, is there neway to not allow users to change the font size(through javascript or nething).
Moderator
Posts: 12314
Joined: 2004-06-06
Location: London
Wow bad paragraph Not sure
Posted: Sun, 2007-07-29 20:21
Wow bad paragraph
Not sure what you're asking but if it's whether there is a means to prevent font-resizing no and nor should one want to do this.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Regular
Posts: 13
Joined: 2007-07-27
hmm, let me rephrase what I
Posted: Sun, 2007-07-29 22:01
hmm, let me rephrase what I said.
Is there any formula to convert px to em, on a standard font.
Moderator
Posts: 5848
Joined: 2004-06-25
Location: Dallas
As stated earlier, an em is
Posted: Sun, 2007-07-29 22:15
As stated earlier, an em is the size of the current font. If the current font is 16px, that's one em.
If you have that 1em font and you want a child to be 12px, that would be .75em relative to its parent. Within the child element, that 12px font is 1em.
It will give you tired head while you're learning it, but it is worthwhile as you will be able to alter all fonts proportionally by simply modifying the top level font size, and you will have a font-size gestalt.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
newbie
Posts: 2
Joined: 2008-05-08
You can't use a formula
Posted: Thu, 2008-05-08 11:02
You can't use a formula, as said, since it's a relative unit and depends on what font-size the parent element (and the parent's parent ...) has. For example if the body element has 10px, 10px = 1em. If then a element inside of the body has 2em and its child 1em, the font-size is 20px.
If you're familiar with javascript, you can check out this:
http://chrisbk.de/post/33642727
Guru
Posts: 2528
Joined: 2005-12-14
Location: Victoria British Columbia
godly.asian wrote:hmm, let
Posted: Thu, 2008-05-08 17:20
You have to understand that THE WEB IS NOT PAPER!!
You seem to want to make it into paper, and it can't be done. It just isn't, and nothing you can do will make it into paper.
If you insist on trying you will only write very bad sites that will make a lot of people go away from them. Nothing you can do will make the web into paper. Understand this, and learn to adapt.
The web isn't even visual. A certain percentage of visitors will not look at your site, but they will still visit it. The most important non visual visitor is, of course, the Google spider, but some folks with no eyesite still have money they can spend. Why would you voluntarily throw away part of your possible income?
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Leader
Posts: 607
Joined: 2008-02-04
Location: Netherlands
Blah
Posted: Fri, 2008-05-09 18:52
Actually, I found this px-to-em calculator to be very helpful: http://riddle.pl/emcalc/
Because as everyone has said above px are static and em are relative, what this page seems to do is use JS to determine what YOUR font size is (by default). Obviously, everyone else isn't going to have that same font size but what the tool is good for is when you are sizing up boxes (I was doing a crapload of forms and no, I could not eyeball it by imagining letter M and seeing how wide in em the box should be) next to boxes and boxes. I would measure what I had already with a ruler that came with the Web Developer Toolbar to get a px unit. Then I plugged it into the pxtoem calc, and took that number and used it as a basis to get a feel to how close it really was to what I needed.
I usually still had to adjust the amounts, of course, but a lot less adjusting since I was starting out in the ballpark already (test test test in all browsers). Now I have wonderful boxes who scale with the text! It doesn't matter how big people make the font, everything stays cool. : )
I'm no expert, but I can fake one on teh Interwebz
newbie
Posts: 8
Joined: 2008-05-12
Location: las vegas
Out of all the estimates
Posted: Mon, 2008-05-12 19:03
Out of all the estimates i've seen I kept this in my notes...
for font size:
1em=12px
.8em=11px
If you set the font size to something in px then the em will be the size of an "M" in that font size - here is a better explanation: http://24ways.org/2005/an-explanation-of-ems
Guru
Posts: 2528
Joined: 2005-12-14
Location: Victoria British Columbia
luwana wrote:Out of all the
Posted: Mon, 2008-05-12 19:30
Totally wrong. There is no such simple conversion.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
newbie
Posts: 8
Joined: 2008-05-12
Location: las vegas
hmmm
Posted: Mon, 2008-05-12 19:58
Hmmm. I suppose we could use the calculator an figure that is the universal truth. Is that totally wrong too? Or might both of these be some sort of a reference point for all of us youngers?
Moderator
Posts: 5848
Joined: 2004-06-25
Location: Dallas
First, there is no universal
Posted: Mon, 2008-05-12 23:41
First, there is no universal conversion. Let me create an example.
We will accept the browser's default default value of 16px for the base text size.
body {font-size: 100%;}
p {font-size: 1em;} /*or, 16px*/
h3 {font-size: 1.25em;} /*or 20px*/
Now, in a certain section of the page, we want a smaller base size so we do this;
#special {font-size: .75em;} /*or 12px*/
Within #special, p's 1em will now be 12px, and h3's 1.25em will be 15px.
But we still want the larger font for h3, so
#special h3 {font-size: 1.667em;} /*uh huh, 20px*/
#special h3 span {font-size: 1em;} /*20px*/
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Moderator
Posts: 5678
Joined: 2005-02-22
You do all realise this is a
Posted: Tue, 2008-05-13 00:15
You do all realise this is a pointless resurrection of a 10 month old thread.
On Having Layout | The One True Layout | menus by listamatic
Moderator
Posts: 5848
Joined: 2004-06-25
Location: Dallas
Oh, sure. Bring sanity to
Posted: Tue, 2008-05-13 00:21
Oh, sure. Bring sanity to the party.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Guru
Posts: 2528
Joined: 2005-12-14
Location: Victoria British Columbia
luwana wrote:Ed Seedhouse
Posted: Tue, 2008-05-13 00:23
There is no "universal truth" and there is no defined relationship between pixel size and em size. There just isn't any, period. The web is not paper. Trying to make it into paper won't work.
Gary's calculations are fine if we know that every browser defaults to 16 pixels, but in fact we know that they don't! Macs default to 15. Lots of people override the defaults. I override Firefox to default to 20 pixels for 1em because I need that to read easily. A lot of people are over 40 these days and they have money to spend. The boomers won't all be dead any time soon and you ignore them at your peril. (I say them because I myself am not one, I'm too old.)
The web just isn't paper. Many people who browse the web don't see it at all because they are blind.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Moderator
Posts: 5678
Joined: 2005-02-22
*sigh*. Gary, I'm not well
Posted: Tue, 2008-05-13 01:21
*sigh*.
Gary, I'm not well versed in forum lore, but isn't there some magic word you can include in a post to finally kill a thread?
On Having Layout | The One True Layout | menus by listamatic
Guru
Posts: 2528
Joined: 2005-12-14
Location: Victoria British Columbia
Sorry - didn't realize it
Posted: Tue, 2008-05-13 01:41
Sorry - didn't realize it was supposedly dead and buried. With this incarnation of the system I just browse the most recent messages and if someone posts on an old one it never penetrates my skull that this is so.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Moderator
Posts: 5848
Joined: 2004-06-25
Location: Dallas
Same with me, Ed. And, I
Posted: Tue, 2008-05-13 04:50
Same with me, Ed. And, I wasn't doing more than using the 16ppx starting point as a reference for the calculations. The point being that all em font metrics are relative to the element's parent size, and that 1em in one element could be a different size in another element.
And, that gives me the last word as I close comments.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Moderator
Posts: 12314
Joined: 2004-06-06
Location: London
Chris..S
Posted: Tue, 2008-05-13 10:53
Hitler, Nazis.
Now it's closed. If anyone unsure of the meaning there is an old thread that can be resurrected on the subject
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me