CODEWITHSUNDEEP
photoshop
James Umeris
James Umeris

Reputation: 619

Adobe Photoshop pixels to CSS

How do I convert Adobe Photoshop points to pixels in CSS?

My font size is 48pt, how does that convert to pixels?

Also, are there tools that help convert photoshop psds into CSS/Html?

Upvotes: 2

Views: 1135

Answers (3)

mrdcmiller
mrdcmiller

Reputation: 1

OSX renders 72 ppi (dpi), windows renders bitmaps at 96 ppi (dpi). Knowing the 72ppi or 96ppi numbers can help you work out what's going on.

Photoshop will alter the Text Point size depending on what the image ppi is set to.

However, with today's high pixel density displays the whole dpi to ppi is something of a fudge. Wikipedia has a good, but dated, article on pixels (screens) vs dots (print)

https://en.wikipedia.org/wiki/Dots_per_inch

Upvotes: 0

Lais Célem
Lais Célem

Reputation: 19

You can use points to declare the size of your text in css if you like, there's no need to convert. That way if your photoshop file is set up for 72ppi, you see the same size of font in both photoshop and web. If you building mobile thou, sizes work differently. Than the best thing is to look for a guide, depending on which devices you're building for.

I believe there isn't a tool to convert photoshop pds into css/html. Although, Zeplin may helps. Zeplin is a tool to easily export assets and make guidelines for projects, but it also helps you create a css file from your screen. https://zeplin.io/ It's really nice!

Upvotes: 1

Matt Greenberg
Matt Greenberg

Reputation: 2330

If your Photoshop document is 72pixels per inch (the standard of the web). 1px = pt.

Upvotes: 0

Related Questions