Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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.
