I recently quite repetitively encounter the same problem - the fonts in photoshop don't look even close to the fonts embedded onto the websites.
Obviously - it's mostly about external, 3rd party fonts, because for Helvetica, Arial, etc. I get quite good results. Most troublesome are thin and tall fonts, although this issue occurs also with regular fonts if used in sizes lower than 16px (no idea why so often there's a magical border at 16px since when stuff starts to look great everywhere).
Here we've got an example of SkarpaLT font at 14px #000000 - on a left you can see it embedded using @font-face onto a website as it is rendered in Firefox on Windows 7. On a right you can see the exact same font in exact same color and size as it appears in photoshop using different anti-alias settings:
As you see - the difference is quite gigantic. In Firefox:
- Whole font is by far thicker, seems like in photoshop it's light version, while in firefox it's regular
- Anti-aliasing is very weird, on some letters (eg. O) it almost doesn't exist, on other it's fine
- A is oddly short comparing to the other letters
- O isn't round
As you can see - I tried messing with photoshop settings, but so far I never managed to pull out the results that are close to the Firefox. I also made few attempts with changing text in Firefox to make it look closer to what the Photoshop renders, but I got nowhere.
Therefore two-part question:
- Is there any way designer can predict when font won't behave nicely in web browser, even if it looks fine in FireFox?
- How to either render fonts in photoshop in a way that's closer to a web browser, or force web browser to render fonts in a way that's closer to the photoshop?
Or a long story short: How to design a websites using unconventional, thin fonts that will look good in a web browser?
[edit:] Solution highlight: Seems like the only good solution is font dragr which allows testing of the fonts in a web browser to actually see if they don't produce any weird artefacts. Nothing much other than that can be done.
On a side of the designs this action can be used to create subpixel anti-aliasing in Photoshop. It'll make fonts sharper and similar to what you get in a browser. Only issue is that it creates 3 text layers, so it needs to be applied after all of the text editing is done.