On my mac I use font 'Open Sans' Semibold which translate to: font-family: "Open Sans"; font-size: 14px; font-weight: 600; line-height: 16px;

using CSShat plugin.

The result in HTMl doesn't look the same as is PSD (see attached image).

Any ideas please?

left is HTML, right is PS

  • 1
    I have no experience with the plugin you're using but seems like one has more character spacing than the other?
    – Summer
    Mar 29 '17 at 10:51
  • Possible duplicate of Font (anti)aliasing in Photoshop
    – Luciano
    Mar 29 '17 at 12:38
  • The rendering is always going to look different (as the Q&A Luciano just posted says), PS isn't really meant for laying text... other than that you just have some tracking in the PSD which you don't in the CSS.
    – Cai
    Mar 29 '17 at 13:18
  • Shouldn't be designing in Photoshop should be designing in the browser. You will never get that finite look unless you make everything image based. Mar 29 '17 at 13:48

Try adding letter-spacing: 1px; to your ID or class.

font-family: "Open Sans";
font-size: 14px;
font-weight: 600;
line-height: 16px;
letter-spacing: 1px;

The default is letter-spacing: 0px;. You can also use letter-spacing: 0.25px; or letter-spacing: 0.5px;, etc.

Example: http://codepen.io/anon/pen/oZarEx

  • 2
    I think you got that the wrong way around... looks like the PSD has positive tracking applied and the CSS has none
    – Cai
    Mar 29 '17 at 13:17
  • Corrected. Also added 0.25 and 0.5 to the Codepen example. Mar 29 '17 at 13:27
  • Steve, you nailed it! CSSHat plugin ignores VA value of the font. thanks!
    – badigard
    Mar 29 '17 at 14:10

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.