1

I have some PSD files which has a lot of text in it.

Every text has different font sizes and when I am trying to put those font sizes in my HTML and CSS, its not looking exactly the same as in PSD.

I am wondering, can we use the same font size as present in the photoshop in our css as well ?When I am trying to do that things are not looking exactly similar. Is it worth it to copy the exact font size as present in the photoshop in our CSS as well or should we come up with our conclusion regarding the font size?

1 Answer 1

1

This is a very big reason the notion that one builds an entire page in Photoshop, gets approval of the image, then the page is reconstructed in HTML/CSS is a pretty poor workflow in modern times.

It is rare that HTML type and placement will always match a Photoshop document. This in addition to someone creating a full page .psd file with no understanding of how CSS/HTML works can lead to issues. Anyone familiar with CSS wouldn't be setting every line of type to a different size. (Unless it's clearly intentional such as headlines, sub-headlines, then body text)

In general, there needs to be some "wiggle room" between a flat image representation of a page and a live HTML/CSS page. Trying to be exact can be a lesson in frustration.

I would use my best judgement to convey the intent of the type, not worry about exact point sizes. If the bulk of body text is set at 14pt/px, and there are a few occasional lines set at 12pt/px or 15 pt/px, then I'd use 14px as the size. Unless, there is some purposeful intent to the varied type sizes. I wouldn't make 24, 14, 18, and 30pt type all the same size. But 12, 13, 14, and 15pt could probably all be unified.

This can, of course, cause the "that doesn't look like the image I approved" statements from clients.. in which case.. see the first paragraph here.

1
  • Just to comment on your valid point mate, photoshop has a marvellous text and graphic rendering engine that most browsers do not, text rendering on different browsers from varied operating systems is definitely a sore point for professionals trying to keep things all consistent looking. I would suggest you spend time and effort finding out if the font in question can be loaded with an @fontface or other font embedding tech for your html documents. It would be a sad pity to have spent some money on a font only to find out you can't use it o the Web too. Do a bit of testing on mobile too Jun 7, 2017 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.