0

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

Chris Woolum
  • 2,854
  • 20
  • 20
  • 1
    iPhone X has a scaling factor of 3. You may therefore find that dividing the values by 3 will give you the result you want. [This](https://www.paintcodeapp.com/news/iphone-x-screen-demystified) may help. – fubar Jul 02 '20 at 20:44
  • Your comment actually got me the closest. I was able to scale everything down ~3x. – Chris Woolum Jul 29 '20 at 20:07

3 Answers3

1

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.

kloddant
  • 1,026
  • 12
  • 19
0

Try assigning the size of the font using px, You convert fonts to px and em here https://www.joomlasrilanka.com/web-design-development-blog/web-design-font-size-measurements-convert-points-pixelsems-percentages-web-designing/

Arkam Jabir
  • 21
  • 5
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;
}
Apps Maven
  • 1,314
  • 1
  • 4
  • 17
  • 1
    Unfortunately, this is based on the sizing of the PSD. When using these values in CSS, the font size is wayyy too large. – Chris Woolum Jul 29 '20 at 20:06