11

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?

Improve this question
1
  • 1
    How a font looks 'on the web' is entirely dependent on the browser, the browser settings, the OS, and OS settings. In other words, it looks differently for different people.
    – DA01
    Jun 13, 2012 at 18:37

5 Answers 5

Reset to default
10

Most operating systems and browsers render with antialiasing or sub-pixel antialiasing. Sub-pixel antialiasing is common on desktop platforms, like Windows (with ClearType) and OS X. Standard monochrome antialiasing is common on mobile platforms, where the device's sub-pixel order may change with device orientation, and where sub-pixel rendering isn't as crucial, because they often have higher pixel density displays.

Aliased text rendering is common on Windows XP, where ClearType is disabled by default. Windows Vista and newer have ClearType turned on by default.

Rendering in Photoshop vs Windows vs OS X vs iOS vs Android vs WebKit vs Firefox (Gecko) are typically all different. So there's absolutely no way you can build something in Photoshop and know that the text rendering will be the same, unless you take a screenshot and add it to your document as a bitmap layer.

Improve this answer
1
  • 2
    Since answering this question, Adobe added “Mac” and “Mac LCD” options to Photoshop (plus equivalents on Windows) that use system font rendering. It’s often very close or identical to Safari now.
    – Marc Edwards
    Mar 5, 2015 at 8:07
8

No. The new line of thought is to avoid Photoshop for layout and typography design and start in the browser as early as possible.

By passing the client an actual URL as opposed to a Photoshop comp, you avoid the client's expectations being dashed when the final product renders slightly different in their browser of choice vs the Photoshop comps.

Ultimately, it's our responsibility to educate the client and make them aware of the unavoidable typographical discrepancies that occur between browsers and OSs.

Improve this answer
1
  • 1
    At my company, I create designs and hand them off to a front-end developer. I never touch code. With that said, I need a solution that doesn't involve actually building the web page to see my what text looks like.
    – jonn_g
    Jun 13, 2012 at 22:17
2

In Photoshop CC, we added new aliasing modes for your fonts. Instead of "crisp", or "strong", try the new "Mac LCD". You'll get a 100% web safe design.

Improve this answer
1
  • 1
    There is no such thing as "100% web safe design" given that there's no such thing as 100% consistency across browsers, fonts and operating systems.
    – DA01
    Sep 27, 2013 at 15:45
1

Short Answer: You can't.

Not only is Photoshop never ideal for knowing how your typefaces will render outside of it, it's just not ideal for working with fonts in general. (When I worked at a Design Firm/Print Shop, everything designed in PS had to be exported as a PDF for this same reason). Then comes the issue of the web, it's browsers and the OS that runs those browsers. So far, as far I am aware of, OS X is the best in terms of rendering fonts appropriately, whereas Linux comes second, and Windows of course comes last. The reality is, they all use different algorithms for rendering fonts, and you're not going to get the same result everywhere. If there were a solution, it'd be that we all switch to Linux, Macs, or wait 'til Microsoft either succeeds next time with Windows Metro (Sorry, I hate calling it Windows 8) or totally blows it, or you can use Cufon (I wouldn't recommend it.).

Just my 2 cents,

Patch

Improve this answer
0

To my eye, rendering in a browser is somewhere between Photoshop's "Sharp" and "Crisp" on a Mac, and between "Crisp" and "Strong" on Windows. I suggest using "Crisp" for live text to the graphic designers I work with. The default "Strong" always sets them up for disappointment. ;)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.