More so than less I run into times when I need to use pt instead of px or em instead of pt, or whatever the case, and trying to find the right size for something bigger than say 36px is sometimes more of a pain in the .... than it should. So I basically want to make myself a little conversion calculator. However I can't seem to find anything that distinguishes what the conversion rate is from one to the other for an equal counter part of the other.

I am hoping I can find someone here who can help me with that. Basically my overall hope is to make myself a little jquery based input like calculator. I key in my px, pt, %, other and select my conversion to type and click ok.

Creating the calculate, easy enough. The math I would have to apply on a per conversion basis not so much, and thats what I am hoping to find here so I can do it.

More so than less I run into times when I need to use pt instead of px or em instead of pt, or whatever the case, and trying to find the right size for something bigger than say 36px is sometimes more of a pain in the .... than it should. So I basically want to make myself a little conversion calculator. However I can't seem to find anything that distinguishes what the conversion rate is from one to the other for an equal counter part of the other.

I am hoping I can find someone here who can help me with that. Basically my overall hope is to make myself a little jquery based input like calculator. I key in my px, pt, %, other and select my conversion to type and click ok.

Creating the calculate, easy enough. The math I would have to apply on a per conversion basis not so much, and thats what I am hoping to find here so I can do it.

• php
• javascript
• jquery
• css
• size

• 1 There's a reason why such a calculator doesn't exist: px is an absolute value, like pt, em, percent, etc. are relative ones. Hang on, I'll dig up a SO question... – Pekka Commented Jun 1, 2012 at 18:07
• See e.g. stackoverflow.com/questions/3333076/… – Pekka Commented Jun 1, 2012 at 18:07
• 1 Also stackoverflow.com/questions/609517/why-em-instead-of-px – Pekka Commented Jun 1, 2012 at 18:08
• 1 v1.jontangerine.com/silo/css/pixels-to-ems – Ram Commented Jun 1, 2012 at 18:11
• 1 I should have emphasized that I knew it wasn't an exact science, that I wouldn't get exact representations or conversions cause of exactly what Pekka said, but overall I am just looking for close enough when I actually need to go from one or the other to the other. – chris Commented Jun 1, 2012 at 18:19

4 Answers 4

Well,

12pt = 16px = 1em = 100%

assuming you don't change the font size on the body (else the pt will be different), the dpi of your OS is set at 72 etc etc..

The relationship looks like:

pt = 3/4*px

em = pt/12

% = pt*100/12

in this case. It's worth pointing out that using pt is wrong, unless you are printing something, and that using px, % or em is more usual.

Personally, I just use px or em. Using % or em is handy for designs where the base font size changes for smaller screens.

Ems and %s are relative values which can change depending on your context. Normally, 1em is equivalent to 16px, but if you change your body's font-size 1em is equivalent to whatever you changed it to. 1.25em is also equivalent to 125%.

Generally, 72pt is equivalent to 1 inch, but it shouldn't be used outside of print CSS.

px is also absolute but is highly dependent on the client device DPI. This varies greatly, but most devices handle px values in a perdictable manner -- 10px on a retina iphone displays the same as 10px on a pre-retina device.

There's also rem which refers to the font-size of your html element. See more: http://snook.ca/archives/html_and_css/font-size-with-rem

• 1mm = ca 3.78 px
• 1cm = 10 mm = ca 37.8 px
• 1in = 25.4mm = 96px
• 1pt = 1/72 in = 1 1/3 px
• 1 pc = 12pt = 1/6 in = 16px
• 1 px = 3/4pt = 1/96 in

These relations are fixed to each other BUT be aware that they do not correspond to physical dimensions in screen layout. 1in only correspond to an actual inch on the screen if the screen has en exact DPI at 96. There exists a wide variety of screens and devices, so only rarely will this actually be the case.

1px does not always correspond to a physical pixel either. For high dpi devices (eg "retina" displays), the browser may convert px units to multiples of physical pixels, eg. 1px = 4x4 physical pixels.

In print, the units in, cm, mm actually do correspond to the physical units. The px unit though, does not have any relation to screen pixels (or dpi) when used for a print stylesheet. It is just defined as 1/96 of an inch.

The relative units (em, ex, %) cannot be converted into absolute units (px, cm, mm, in, pc, pt) because the relative units depends on the current font size.

To make a web site truely open for all, you need to get rid of points and pixels. You need those measurements to be relative. Hence percents and ems.

That is the best way to go.

Lots of people (customers) has a variety of eyesight problems.

Why make a web site that those people cannot easily use?

(Variety of standards address these problems)