0

I have a strange problem with a Photoshop file that I have received from a designer. It is a web site which will be translated into html and css. I suspect that the designer has used a retina screen to do the design because the pixel-sizes is all way too large.

All the fonts will be about the correct size if I use half the pixel size in css of what Photoshop says, so this is no problem. What is a problem though, is that the font-weight differs a lot between css and photoshop. 700 in photoshop looks about "semi-bold" in css (but semi-bold does not exist in this particular font), any idea on how I could possibly solve this problem? Font weight 700 in css is way too bold to be correct. Could this be due to the retina resolution in the Photoshop file?

Improve this question
3
  • 1
    The Retina display won't have any effect on font weights, a font weight is a font weight, regardless of resolution. You will get differences in rendering based on PS type anti-aliasing, OS differences, browser differences etc though... Could you upload some screenshots of your results and the exact weights you have set in each case?
    – Cai
    Commented Aug 5, 2016 at 22:45
  • I had a similar issue when creating a site using Futura PT. The mockups were created on a Retina screen using medium (500) weight. However when this page was developed and later viewed on a standard LCD monitor there were no differences between Book and Medium weights. I think the cause of this, and your issue, is down to the screen pixels available on non-Retina monitors.
    – Bagseye
    Commented Sep 5, 2016 at 7:10
  • The fonts are still on text fields or they were expanded? Sometimes designers alter the font to suit the project needs. If the font doesn't have a semi bold weight the designer can create outlines to make the characters thicker.
    – Peacekeeper
    Commented Aug 22, 2017 at 19:01

1 Answer 1

Reset to default
-1

I can certainly see how pixel-based measurements are going to vary a lot between different devices, and that could apply to the perception of font weight as much as to overall height and width of glyphs. But there's also the possibility that the fonts will always differ between a designer's Mac and the end-user's Windows browser -- unless the exact same cross platform font files are used and downloaded to the browser. (That's a little of a side note, but it is an aspect of font appearance matching that has to be considered.

Improve this answer

Your Answer

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

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