CODEWITHSUNDEEP
css
Jonny Jordan
Jonny Jordan

Reputation: 407

Converting pt and px

I'm trying to understand converting PT to PX. I'm using Photoshop, HTML and CSS and it doesn't seem to work out the same in the browser. I understand that you can work it out by using this: points = pixels * 72 / 96? Is 96 the DPI set on the computer? Will the resolution of the screen or the resolution you set in Photoshop effect the formula as well?

Upvotes: 1

Views: 3593

Answers (1)

reece
reece

Reputation: 8145

If you look at the CSS Values and Units Level 3 specification, the physically sized units (including pt) are defined to be their physical size on the given medium (so 1cm is the same size on screen and paper). The px (pixel) unit is defined in terms of a reference pixel of 96dpi irrespective of the resolution of the medium being displayed.

Older versions of the CSS specification did not define a pixel to be 96dpi, but most of the existing content depends on this assumption so using another DPI value would break existing content.

You have 1px = 1/96in => 96px = 1in due to the definition of the reference pixel.

You have 1pt = 1/72in => 72pt = 1in due to the definition of the point.

Therefore, combining the two equations, you have:

   72pt = 96px
=> (72 / 96)pt = 1px

multiplying both sides of the equation by P (the number of pixels) gives you:

P(72 / 96)pt = Ppx

which is the equation you have.

You need to make sure that the DPI settings for Photoshop are set to the equivalent settings.

Upvotes: 2

Related Questions