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

Trying to convert Photoshop font sizes to CSS

I was recently delivered a Photoshop Mockup that was designed for an iPhone X. The resolution is 1125px x 2436px @ 72ppi. I am trying to convert this to CSS and am starting with the fonts.

For example, the title text of my mockup is 60pt/px. When I use this as the CSS font-size though, it is wayyy to large. I tried changing the image size in Photoshop to be 1125 x 2436 @ 458ppi in hopes it would correct the font sizes but the font size doesn’t actually change which is really confusing to me.

Can anyone tell me what I am missing here?

enter image description here

Tags:

3

Answers


  1. 0

    Normally when doing this, I do not go by the exact font sizes given in the psd, because they are always slightly off and don’t account for dynamic page and container sizes. Instead, pick the smallest font size for the psd and set that as the default font size for the whole page in the body tag. Then make everything else relative to that (in em, not px), based on their relative sizes in the psd. That way, you can finish the rest of the page with an approximate font size, and then go back later and adjust the single font size after the fact to whatever looks most like what you encountered in the psd.

    Login or Signup to reply.
  3. 0

    You can select a text layer from your mokeup. and right-click on this text layer then you will see several options, but you need to click on "copy CSS". Then your text will convert to CSS.
    For Example:

    Python_vs_PHP {

font-size: 56px;

font-family: "Montserrat";

color: rgb(0, 0, 0);

font-weight: bold;

line-height: 1.2;

position: absolute;

left: 307.359px;

top: 51.801px;

z-index: 7;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search