21 replies [Last post]
godly.asian
godly.asian's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

is there a formula to convert px to em?

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 34 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

in short, no. pt and px are

in short, no.

pt and px are absolute values, em and % are relative values.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Deuce is right, there is no

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 5 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

PX to EM

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

Verschwindende wrote:
  • CSS doesn't make pies

godly.asian
godly.asian's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

standard

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
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Wow bad paragraph Not sure

Wow bad paragraph Smile

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

godly.asian
godly.asian's picture
Offline
Regular
Last seen: 7 years 20 weeks ago
Timezone: GMT-5
Joined: 2007-07-27
Posts: 13
Points: 0

hmm, let me rephrase what I

hmm, let me rephrase what I said.
Is there any formula to convert px to em, on a standard font.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

As stated earlier, an em is

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Zander78
Offline
newbie
Last seen: 6 years 32 weeks ago
Joined: 2008-05-08
Posts: 2
Points: 0

You can't use a formula

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

godly.asian wrote:hmm, let

godly.asian wrote:
hmm, let me rephrase what I said.
Is there any formula to convert px to em, on a standard font.

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?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 8 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Blah

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 fake one on teh Internets

luwana
luwana's picture
Offline
newbie
las vegas
Last seen: 6 years 31 weeks ago
las vegas
Timezone: GMT-7
Joined: 2008-05-12
Posts: 8
Points: 0

Out of all the estimates

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
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

luwana wrote:Out of all the

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

luwana
luwana's picture
Offline
newbie
las vegas
Last seen: 6 years 31 weeks ago
las vegas
Timezone: GMT-7
Joined: 2008-05-12
Posts: 8
Points: 0

hmmm

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
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

First, there is no universal

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You do all realise this is a

You do all realise this is a pointless resurrection of a 10 month old thread. Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

Oh, sure. Bring sanity to

Oh, sure. Bring sanity to the party.

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

luwana wrote:Ed Seedhouse

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

*sigh*. Gary, I'm not well

*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?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Sorry - didn't realize it

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 29 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9276
Points: 3282

Same with me, Ed. And, I

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. Smile

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Chris..S

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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me