How can I make my Photoshop text appear like it does on the web?

Question

Do I really have to design everything in Photoshop with anti-aliasing set to "none"? I'm sure there is a better way. I'd like to have a setting so that when picking a basic web-safe (such as Tahoma) in Photoshop so I can see what it will actually look like when on the web. For example: The difference between Tahoma with anti-aliasing set to "crisp" in Photoshop and how it renders in Firefox is major. It looks nice and smooth in Photoshop and looks like crap on the web. Is there a anti-aliasing choice that is best to start with (that has the most similar outcome) when planning to have the content live on the web?

Answer 1

Hello,

This is a great question, and one that I asked myself for years.

Yet the answer is actually very simple: Don't.

The reason you don't need to have to worry about how good or bad a font looks in either Photoshop or a browser is because they are all different programs. Photoshop and, say, Firefox or Chrome or Safari or Opera or Edge or IE or any other browser, use different font rendering engines. Same goes for operating systems.

Photoshop's font engine is far superior than any browsers' engine, thus text looks better in PS.

So no matter how much you try to make a font look good in a browser based on your Photoshop (or any other visual design software) design, you will never be able to match them. And there's nothing you can do about it.

And you know what? That's ok. Actually, you don't have to. In fact, you shouldn't have to. Because your (our) job isn't to make fonts look the same across applications. Our jobs as designers are at a much higher level, but that's another conversation :)

In the past, I designed with anti-aliasing disabled as well and my designs look VERY close to the real thing. But that is no longer the case, so I no longer worry about this anti-aliasing thing anymore.

What you should focus on is on creating a nice typography system for each project where all the necessary font sizes are accounted for, for a good user experience and legibility.

If you need help with that, just let me know :)

Hope this helps.