1

I'm struggling with an issue where I'm given designs for websites in PSDs and they use Google Font fonts and trying to match them when building the site in HTML/CSS.

Is there something i'm missing in terms of being able to match the font sizes and weights with that in the design? The sizes in the photoshop file don't match reality at all, and the font weights look wrong on my Windows machine when trying to match.

  • Font sizesare only meaningful if your document is set to 72 DPI – joojaa Apr 28 at 10:30
  • 1
    This is a large reason the workflow of full building Photoshop mockups for web pages/site lost traction 10 years ago. – Scott Apr 28 at 11:27
  • @joojaa thanks, i'll try getting the designer to work to that – Joe Simpson Apr 28 at 12:14
  • @Scott thanks for your opinion but that doesn't contribute anything towards resolving the issue – Joe Simpson Apr 28 at 12:14
  • Did the designers convert all text to bitmaps? If so, ask them ("please") to not do that and send you a new file. – usr2564301 Apr 28 at 13:26
2

The reality is, it's a guessing game and it's never going to match exactly.

I lost count of how many times I heard "that text doesn't match the image" and had to explain that live HTML text is a different animal than text in a raster image.

A great deal of this issue specifically is why building full page Photoshop mock-ups was a workflow I feel died in the early 2000s when CSS3 came along. Create sketches and wireframes, but actual buildouts in HTML/CSS often save a lot of time nowadays.

The long and short of it is, you have to eyeball it.

The only real solution is to utilize the settings from the image to get close, but then there's probably a need to tweak the CSS to get a little closer to the image. This is often quite easy for sizes. However, for weight it can be a nightmare. A great deal of type in a raster image may appear bolder or thinner than HTML type - much of this is related to any anti-aliasing method/setting in the image itself, not necessarily the typeface. For weights, which are impossible to match due to anti-aliasing, you can only explain things to the client.

This is akin to trying to match colors on every possible monitor... it's simply something that is not going to happen most of the time. The only real option is to educate the client as to what is and is not possible given the delivery medium.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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