13

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.

hakre
  • 193,403
  • 52
  • 435
  • 836
chris
  • 36,115
  • 52
  • 143
  • 252
  • 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 Jun 01 '12 at 18:07
  • See e.g. http://stackoverflow.com/questions/3333076/difference-between-px-and-em – Pekka Jun 01 '12 at 18:07
  • 1
    Also http://stackoverflow.com/questions/609517/why-em-instead-of-px – Pekka Jun 01 '12 at 18:08
  • 1
    http://v1.jontangerine.com/silo/css/pixels-to-ems/ – Ram Jun 01 '12 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 Jun 01 '12 at 18:19
  • I much love the other, relation to other. That's gonna be fun. But joke aside, the conversion from PX to CM for example depends on the screen you display on. PX is relative to screen resolution. – hakre Jun 01 '12 at 21:46
  • @hakre depends on the CSS level see https://www.w3.org/TR/css3-values/#absolute-lengths – Wolf Sep 08 '20 at 11:24

4 Answers4

24

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.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • I am usually a fan of em myself, the biggest thing in this scenario is I work with several designers and they each have there own preferences of what they prefer. And Ill get spec from one guy thats like we need this to be "320pt x 600pt" and getting that figured out in em or px in some cases is sometimes a pain. – chris Jun 01 '12 at 18:21
  • For web design, pt is never right. Perhaps talk to them about what they think a pt means. You might find they think pt == px... – Rich Bradshaw Jun 01 '12 at 18:36
  • 1
    For web design yes, I agree, but maybe one or 2 of these people know anything about web design, they are all graphic guys working in photoshop, illistrator, or in several cases print designers. So more often than not I am converting something that was intended for print rather than the web – chris Jun 01 '12 at 18:42
  • That sounds like a nightmare! Hope these conversions are useful to you! – Rich Bradshaw Jun 01 '12 at 19:31
  • After 6 years of the post, did I see an mistake? if 12pt=16px, it is should be 1pt = 4/3px, not 1pt = 3/4px as stated in the above. – hjchin Aug 20 '18 at 17:56
  • @hjchin Your definition 1pt = 4/3px is correct as well as the formula pt=3/4*px. If you put the value 1.3333 for px in the formula, you will get 1 for pt. Also interesting: For the web 1 px is not the same as 1 px on the display. It is specified in relation to inch, so we can always use the formula above for conversion. See here: https://www.w3.org/TR/css3-values/#absolute-lengths – David Gausmann Mar 24 '20 at 09:55
  • There is an error in the relations: 12pt = 16px = 1em = 100% and pt = 3/4*px; em = pt/12 => 1 px = 16 em ?? – trig-ger Oct 21 '21 at 15:29
3

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

davethegr8
  • 11,323
  • 5
  • 36
  • 61
1
  • 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.

JacquesB
  • 41,662
  • 13
  • 71
  • 86
-1

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)

Ed Heal
  • 59,252
  • 17
  • 87
  • 127
  • 1
    yes, and no one is disagreeing with that, but as previously mentioned.. the designers I work with don't take that into account when giving me initial specs for stuff, so I have to go out and find the equivalents so I can make the sites/software more up to standards on the web side of things. I find trying to conform the masses to the need is a ridiculous concept, so rather than fight the stream I just take what I get and do what I gotta to make it right. But in the end its about making small tools to help me out on my quest :-) – chris Jun 01 '12 at 22:21
  • @chris - Please fight the stream - because one day YOU may need somebody to fight your stream. – Ed Heal Jun 02 '12 at 00:24