0

Have a good day guys, I attached 2 screenshots (from photoshop and from google chrome) - what's happening to font characters? Font size is the same as in psd, I also did css reset (Meyer Reset, looked even wierder before that) - what could probably be wrong? Can you help me make it look the same as in photoshop?

Thanks in advance.

https://www.dropbox.com/s/zdg3k6a3rd49ygv/Desktop%2028-08-2013%2019-03-08-628.png https://www.dropbox.com/s/kszj0n1ql1jkfv7/Desktop%2028-08-2013%2019-03-15-829.png

here is the code:

article {
font-family: 'CaviarDreams', Arial, sans-serif;
font-size: 17px;
color: #ffffff;
font-style: normal;
}

and the Meyer Reset: css-tricks dot com/snippets/css/meyer-reset/

Ralph Sandoval
  • 25
  • 1
  • 9
  • 1
    The font in the web browser will never look as sharp as the font in Photoshop. They are rendered differently. Regarding the look and feel (spacings, etc) you will need to publish at least the code you are trying to use, otherwise we won't be able to help. – Henrique Feijo Aug 28 '13 at 15:25
  • All the crazy fancy effects that you give to your text in Photoshop cannot be reproduced using css,you can make it somewhat similar by adding a subtle text-shadow, but still it wont work properly in IE. – majorhavoc Aug 28 '13 at 15:27
  • I didn't use any effects, just a regular font and #ffffff color. – Ralph Sandoval Aug 28 '13 at 15:30

1 Answers1

0

What size is the font when you check it in the PSD and what size are you using for the font when you style in for the browser.

The font in Photoshop will probably have been drawn with Anti-aliasing and other smoothing effects. There's not really any way to control this as a web developer across all browsers.

Chrome has a CS3 tag that you can try

-webkit-font-smoothing: antialiased;
Code Uniquely
  • 6,356
  • 4
  • 30
  • 40
  • I just figured out that this problem occurs only in Opera and Chrome, IE renders fine, but webkit-font-smoothing line doesn't help - already tried it. – Ralph Sandoval Aug 28 '13 at 16:05
  • I understand if font characters look not so smooth as they do in Photoshop, but when text obviously looks wierd and kinda cracked - it's abnormal. What can possibly be wrong here? – Ralph Sandoval Aug 28 '13 at 17:24
  • Have you used the Font Squirrel tools to generate the font CSS definitions they can be found at http://www.fontsquirrel.com/tools/webfont-generator – Code Uniquely Aug 29 '13 at 08:26
  • you can also read a previuios post at http://stackoverflow.com/questions/11915288/fonts-not-rendering-uniformly-in-browsers/11915427#11915427 – Code Uniquely Aug 29 '13 at 08:27