Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 2 down vote favorite
1

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

5 Answers

up vote 3 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
up vote 2 down vote

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
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
up vote 1 down vote

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
up vote 1 down vote

Quick answer would be: Yes. If you want to see what body fonts (like Arial, Verdana or Georgia in small sizes) will look like in any Windows computer, then it's the only way to go. But this doesn't apply to every font or size. Arial 10 will render exactly the same in Photoshop and Windows, but if you are using @font-face, then result will vary (and A LOT) from OS to OS and from browser to browser. Unfortunately, the only way to see what a font looks like in the web is to use @font-face and test-drive all the different renderings. But if you are designing mockups to show to a client, I recommend you use Smooth instead of None and leave the tweaking worries for later!

share|improve this answer
I don't understand "If you want to see what they will look like in any Windows computer"? – e100 Jun 13 '12 at 11:38
how about a normal web-safe font such as "tahoma". It looks much better with any of the anti-aliasing setting in photoshop vs rendered in all the browsers i've checked. 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? – jonn_g Jun 13 '12 at 18:35
@e100 I meant a font will always look more like the original in a Mac, because they use an algorithm to preserve the design of the typeface, while Microsoft hammers the font into pixel boundaries to improve readability (and as Patch says, Linux is kind of in the middle of these two). – Yisela♦ Jun 13 '12 at 20:15
yisela, in Photoshop any anti-aliasing setting (including 'none') will show a font differently than it would in a html page. At least on Windows. So your answer is incorrect. – poepje Jun 14 '12 at 9:29
@poepje that's why I said "this doesn't apply to every font or size". For body text, the usual suspects like Arial, Verdana or Georgia in sizes 8-12 will look the same. – Yisela♦ Jun 14 '12 at 20:27
show 2 more comments
up vote 0 down vote

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

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.