CODEWITHSUNDEEP
cssphotoshopmockups
Chris Woolum
Chris Woolum

Reputation: 2904

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

Upvotes: 0

Views: 1000

Answers (3)

Apps Maven
Apps Maven

Reputation: 1410

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;
}

Upvotes: 0

Arkam Jabir
Arkam Jabir

Reputation: 21

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/

Upvotes: 0

tklodd
tklodd

Reputation: 1079

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.

Upvotes: 1

Related Questions