SkillShare Forum - CSS Beauty - Appearance of text in Photoshop vs Browser

Appearance of text in Photoshop vs Browser

rasice — Thu, 23 Mar 2006 11:21:08 -0500

I have recently developed a liking towards text based design. I have always designed my websites entirely using photoshop and then moved on to coding.

The thing that bugs me(and makes it difficult to do such designs) is how anti aliased text looks on photoshop and then how it looks entirely different on the browser when its coded using the same font. For example fonts like Lucida Grande/Sans Unicode, look terrible on photoshop and great on the browser once coded (as we know).

I was wonder if theres something im doing wrong, or is there sort of setting that could fix this problem?

I am using CS2 on the windows platform

thanks in advance

EDIT: I do mean aliased text , anti aliased text obviously is totally different.

Appearance of text in Photoshop vs Browser

mista3 — Thu, 23 Mar 2006 11:28:44 -0500

I know the problem... I use Fireworks for mockups but it is also pretty rubbish and rendering small text the same way a browser does...

Sometimes I use http://typetester.maratz.com/ to generate snippets of text that I then screengrab and paste into my mockups, or I quickly put together some css/html for the text I need and screengrab that instead.

Appearance of text in Photoshop vs Browser

rasice — Thu, 23 Mar 2006 11:50:28 -0500

I use typetester for that purpose as well. There must be an easier way :)

Appearance of text in Photoshop vs Browser

mista3 — Thu, 23 Mar 2006 12:07:22 -0500

Hmmm... Photoshop - no.... Fireworks - no..... Illustrator - no....

Must be missing something! (I'm on a mac though)

Appearance of text in Photoshop vs Browser

McJay — Fri, 24 Mar 2006 00:35:57 -0500

Just use aliased text.. if you can make your layout look good with that it'll look VERY good in browser. I always use that method.

Appearance of text in Photoshop vs Browser

dmitryseliv — Fri, 24 Mar 2006 09:22:57 -0500

In Photoshop you can use Anti- Aliasing for that.
If you want it to look pretty much the same as browser display select none.
Otherwise Photoshop treat it as a bitmap image rather then vector.
When you using Anti-Aliasing method like Sharp or Crisp Photoshop rendering text differently so pixels on a sides are degrading and not equal to the pixels in a middle.

Best, DS

Appearance of text in Photoshop vs Browser

rasice — Fri, 24 Mar 2006 12:48:07 -0500

I should have made that clear in the post, but I do mean aliased text. But even aliased text looks totally different in the browser compared to photoshop.

Appearance of text in Photoshop vs Browser

JohnRiv — Fri, 24 Mar 2006 14:21:09 -0500

I just did a testcase on my PC and the fonts are very close. Sure they're slightly off, but I wouldn't say they're "entirely different". In the case of Lucida Sans with aliased text, it's actually 100% identical.

I'm also using CS2 on the Windows Platform, so I'm not sure what's going on... unless you guys are using text smaller than 9px?

Appearance of text in Photoshop vs Browser

Nick Presta — Fri, 24 Mar 2006 16:28:30 -0500

John, if you don't mind, I will be saving that image and using it for future reference. I would've tested this myself but my computer's physical limitations prevents me from using Photoshop 7 (yes, 7) for a long time.

Thanks,

Appearance of text in Photoshop vs Browser

rasice — Mon, 27 Mar 2006 00:32:47 -0500

@ JohnRiv your testcase has helped me understand the problem. Basically the difference in photoshop compared to the browser is Cleartype. Theres a plugin that is supposed to mimic Cleartype on PS called Sharptype.

A similar thread at Aquasoft:

http://www.aqua-soft.org/board/showthread.php?t=32390

Appearance of text in Photoshop vs Browser

VectorGirl — Thu, 10 Feb 2011 08:56:20 -0500

I realize that this is a much older post, but I found this forum post to be rather interesting. If I could recommend anything, I would recommend just toying around with photoshop and your browser. While some aspects of your text design may look awful in the browser or in photoshop, it varies a lot from computer to computer. Graphics cards, monitors and one's overall system can literally make or break a design. I really don't believe that there are synonymous designs for every computer.

If you want to get more tips, why not visit this post? It's what I use as a reference:

http://www.instantshift.com/2009/06/19/trace communications /125-creative-text-based-logo-designs-for-design-inspiration/

Hope this helps and I hope you've since learned more tricks. Peace! :)

Rebecca Stone

Appearance of text in Photoshop vs Browser

AdamC — Mon, 21 Mar 2011 20:05:33 -0400

I find it to be less hassle to stick to the fonts which I know are generally supported across most major operating systems. The real challenge is when you want to translate your site into another language. Then you have to hope that the font you used looks fine in that language too. It's a real headache sometimes.

Appearance of text in Photoshop vs Browser

designgene — Sat, 26 Mar 2011 10:09:07 -0400

Cool tips, I was wondering about not exactly same but similar problems where same text behaves different in different browsers. Now I am sure that this information is going to help me a lot in new website design

Thanks,

Appearance of text in Photoshop vs Browser

AdamC — Wed, 30 Mar 2011 00:37:55 -0400

Another thing: with the newer versions of PS the font rendering is more accurate. I think the TrueType fonts tend to have the best rendering online.

Appearance of text in Photoshop vs Browser

designgene — Sun, 15 May 2011 02:23:48 -0400

Yeah really, the font rendering is a great feature of new PhotoShop. This really helps to identify and implement different fonts and use them accurately in logo design and all your graphics.