» Aliased or Anti-Aliased Type in Web Comps?

If you are a web designer, then you know exactly what I am talking about. When showing concepts to clients do you show type in aliased or anti-aliased form? Theoretically it shouldn’t really matter, but we know that it’s a problem. Many clients just don’t understand why the final website looks slightly different than the original concept you showed them. Just a few years ago this wasn’t much of a problem, if they were on a windows machine the likelihood that clear type tuning was turn on was slim to none, and the chances that the client was on a mac was even slimmer still. But things have changed, and I am torn for an answer.

Macs have gained market share lately, due to the popularity of the iPod and iPhone. Vista is slowly gaining ground meaning that clear type is turned on by default. The variables are too wide spread for any one answer that I can think of. Currently I continue to show comps with aliased type like I have in the past, with only about 1 of 10 clients being the wiser. To the clients with an acute sense of detail comes an explanation. This is usually enough to move on, but it just doesn’t seem like the proper way to handle the situation.

Some designers and developers would suggest creating a HTML proof to show the client, but I personally find this to be a lot of wasted time. Time that I would have to charge for, and would ultimately raise costs. Yes it is a more accurate representation, just one I can’t justify the cost of. So I leave it up to you the readers, what do you think is the solution? Or am I just making something out of nothing?

As a final note, when will Adobe give us the ability to set custom type aliasing settings in Photoshop? Am I the only one that would like to give a realistic representation if I am going to use aliasing? The four set options are not enough in my opinion.

10/12

ADD A COMMENT

17 Comments

Share This Page: Stumble It! // Del.icio.us // Float It! // Digg It! // Reddit

17 Responses to “Aliased or Anti-Aliased Type in Web Comps?”

Joshua Simmons
October 13th, 2008 at 12:49 am

I would like to see some custom aliasing settings as well, but I don’t expect to see them come to Photoshop. I think Adobe will be keeping their product features more and more in line with their specific purpose. This is in light of the fact that now Adobe has a vast array of creative tools and they’re really putting emphasis on facilitating work flow.

I think if an Adobe evangelist were asked, they’d say InDesign is what should be used for making comps. I’ve also heard some people recommend Fireworks.

For now, I’ll stick with using Photoshop for my design phase and will probably just continue anti-aliasing only larger text in design comps.
Grant Friedman
October 13th, 2008 at 2:01 am

If you want to turn off anti-aliasing in a mockup, why not use Fireworks? It does that well.
Adrian | Rubiqube
October 13th, 2008 at 6:28 am

I used to only design my mockups using No Anti-Alis option in Fireworks (yeah, that’s my tool of choice), but a couple of months ago I started using only Custom Anti-Alias, with settings that make the text look very similar to the way it looks in the browser.

But to be honest, I never had any complaints regarding the look and feel of the mockup vs. the live version. And I hope I never will, cause then it means my client is really obsessed with details, dictating colors and corner roundness (you know the kind). And since I’m a details freak myself, we might not get along very well. ;)
Zinni
October 13th, 2008 at 10:03 am

@Grant,

Turning off anti-aliasing on type isn’t a problem, its getting accurate results that are.

As of right now my workflow sounds pretty much the same as Joshua, however what I am ultimately worried about is the future. When you think about concepts, clients are supposed to notice details in the concepts before production. We hold clients to this, however if it really isn’t a completely accurate representation then how can we? I guess no static representation is exactly perfect, due to browser differences and dynamic content, but type just seems like a major issue to me…
Jim
October 13th, 2008 at 12:41 pm

Photoshop is not for type. If you really want good design, typography should be a major part of your work. You can’t just type it in Photoshop and hope it looks good. Photoshop was designed for photos, use illustrator and indesign for other things then combine all the elements at the end. Your results will be much better.
Professional Website Templates
October 13th, 2008 at 2:29 pm

Although there are still many things you can’t do with vector, I still feel use vector when you can!
Nacho
October 14th, 2008 at 12:10 pm

I don´t use aliased type because the text gets all blured, and is crap. I prefer to have legible text in an image preview anti-aliased, and then be a little different in a browser.
Max
October 14th, 2008 at 4:23 pm

We use anti-aliased for fonts 21pt and above in mockups. We never get any complaints from the client in this regard. Depending upon the computer that the client is reviewing it on, we have found that 9 times out of 10 the safest bet is to use the aliased, clearer form of the font when representing content in a mockup unless it is a header that is over 21pts in size.
Darren Hoyt
October 14th, 2008 at 11:36 pm

@Max: Isn’t 17px where aliased fonts begin to smooth?

I generally mock everything up with the most common platforms in mind (Win XP/IE6), and this means aliased type for body text. 1 in every 20 mockups, the client will ask about it, I’ll give a prepared explanation about browser differences and system fonts, and they’re fine with it.

Back in 2000-2005 this was a sticky problem, but I feel like clients are starting to get that buildouts won’t always mirror the mockups. Maybe my clients aren’t the sticklers I thought they were!
Winnie Lim
October 15th, 2008 at 2:05 am

I just wish that that browsers on windows offer better in-built anti-aliasing like the mac counterparts. It will make a lot of difference visually and we wouldn’t be discussing this issue.

I used to mockup with aliased text, and switched to anti-aliased when IE7 grew in terms of popularity. Realised the eventual site doesn’t look great in firefox/win which is growing in market-share. Italics and serifs render horribly on firefox/windows.

I might consider showing both options and explain the difference instead. It is not fair to the website if I show it with aliased text and it looks much better on the mac. And I really wouldn’t know if my client is one of those who uses the mac and might have a problem understanding aliased text. ;p
Ahmed
October 16th, 2008 at 11:09 am

I run into client with similar problem sometimes. Irony is if I put small fonts and anti-aliased version is very illegible I am stuck between adding crooked smootheness or pixelated fonts.
thinsoldier
October 16th, 2008 at 3:07 pm

Just make a basic html page with a div containing the text you want to use in your comp.
Size the div to match the comp and style the text to your liking.
Use a screen shot of that in your comp. Won’t take long and you can re-use the css you wrote on the actual site.
Levi
October 20th, 2008 at 12:44 am

I always send visuals/comps to clients with anti-aliased text, the reason being that I want to show clients what the site will look like at its best. If you have to explain why it looks less awesome in the final version then so be it. It’s important for us to accept the fact that the visual experience for everybody will never be the same and that we just need to try our best to compensate for those who may not have flash/javascript/font-smoothing/silverlight/a good web browser.
chu
October 20th, 2008 at 8:38 am

InDesign is pretty useless for comps as it doesn’t have pixel units.
Victor Teixeira
October 25th, 2008 at 2:12 pm

Adobe has a software developed specifically for websitedesign and mockup: Fireworks.
It supports custom antialias.
So you can make three different versions of your designs - one that the text looks as a Mac, one for windows cleartype and another one with aliased text.

That’s simple. I really dont understand why people prefer photoshop for website design. Fireworks is just faster and intuitive to work with.
If you need that extra retouch on your photos just click a button and optimize your image in photoshop then come back to fireworks to work on the design.

But I really think that the perfect app for webdesign was not made yet.
Someday I want to see a Fireworks-photoshop-indesign mashup only with the best features of each app and with the ability to generate the xhtml/css markup inside the app with integrated code and css editors for tweaking the markup and adding those ie hacks.
The problem of a software like this is that it would kill photoshop, fireworks and dreamweaver at the same time and I think adobe just prefer to sell 3 apps instead of just one.

That’s wat I think.
Matt
November 13th, 2008 at 10:25 pm

What Custom Anti-Alias settings do you recommend to replicate IE7 on XP?