Photoshop Question posted in
The official user guide can be found here.

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?

Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search