Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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, I can see what it will actually look like when on the web. Using @font-face is a separate issue I imagine to tackle next.

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?

share|improve this question
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 '12 at 18:37
add comment

5 Answers

up vote 5 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 '13 at 15:45
add comment

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. ;)

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
    
+1 for designing in the medium itself. –  DA01 Jun 13 '12 at 18:37
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 '12 at 22:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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