Photoshop fonts vs. browser fonts

27 Jul 2011 - 9:00am
3 years ago
2 replies
2946 reads
Maurice
2009

Hi all,

This has been a debate for years.
"How can I replicate browser looking fonts in Photoshop? It always looks blurry."

Well. This is still a problem, particularly with Windows.
The text in Photoshop is not the text on the web. ... Also, type in Photoshop never seems to be the right size as type in HTML. It just never seems to feel the same. It doesn’t wrap the same, it doesn’t space out the same.
It is the ClearType smoothing from Windows.

Adobe is well aware of the issue and I'm always anticipating some fix in every upcoming release they have (not yet).

Adobe:
"Part of the problem is that every browser renders text differently.
And part of it is that many browsers currently render with an anti-aliasing style that Photoshop doesn't support (color edges).
Then there's the lack of kerning in browsers and ....
We've been thinking about how to replicate browser font rendering, but it's not nearly as easy as it sounds."

The Problem:
Actually, it's not so much the browser rendering as it is the ClearType smoothing from Windows that's making text look like that outside of Photoshop.

Solutions?: - Work Arounds?:
Here are some things I have tried:
1) Pasting your text into Notepad > Select Font and Size from "Format" menu > Use line breaks and paragraphs to format text > Copy from Notepad to Photoshop > Adjust layer to "Multiply, Opacity 100, Fill 100" which create a transparent effect > whoala!

2) Do the same thing as above using Snagit

3) Use "Sub-Pixel Redering Action" for Photoshop
http://www.tutorial9.net/tutorials/photoshop-tutorials/super-crisp-font-anti-aliasing-in-photoshop-with-sub-pixel-hinting/

4) Say. "That's how Photoshop renders fonts and not much I can do about it. Sorry."

Though these aren't the best solutions they get the job done but can be very time consuming and may/will require additional tweekings.

If your final deliverable is a pixel perfect design comp, then you know this issue well.
I'm interested in some of the "creative solutions" you have found to address this.

Other Stuff:
Understanding Aliased vs. Anti-Aliased
http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/

Thanks,
Maurice

Comments

27 Jul 2011 - 3:05pm
Hugh Griffith
2007

Solution #5: Use Fireworks

:)

Hugh Griffith
Visual / Interaction Designer
www.interactionhero.com
208-343-4420
Skype: hughgriffith
Gtalk: hugemm@gmail.com

28 Jul 2011 - 4:08pm
xmetal
2011

Honestly, I find this "debate" rather perplexing. 

Have you ever had a client look at your comp and say "yeah, let's do it!"  and then a month later when you have the website up and running they look it over and say "Now you wait one darn minute mister! This text has different aliasing than the comp you showed me! What gives!?"

I see the point, that it would be nice if it was all subpixel perfect, but is it really a big enough issue that you'd resort to screengrabbing text in Notepad for your comp? Perhaps I just have dumb clients.

Syndicate content Get the feed