Thank you for this, it is very helpful! Please keep it up :

Great one. I have done the same process. I use Sharpe and None. I also try to never use the B option but the font version of Bold. I see a lot of great Photoshop/jpg sketches that you clearly see that stuff like spacing would not look like that as HTML text. A friend of mine tipped me about having "html font sample" as brushes. I have not tested it though myself.

That's a serious problem Anton. Photoshop should have more options of anti-aliasing instead of just nothing, sharp, crisp, strong and smooth.

Something like Flash custom AA would be fine for most of us.

Thans for share your PSD file with us!

Thanks for putting this font stylesheet together. I spend probably 90% of my work day in photoshop developing websites for the web and applications for the desktop and phone. Font rendering has always been a thorn in my side. I tend to approach the issue the same way as you. For smaller fonts, I keep the aliasing to none. This really brings out the individual glyphs and is much easier to read. Larger fonts are always set to crisp, as opposed to sharp - which seems to be the direction you take. There is not much difference visually, except Sharp tends to appear bolder. In certain situations this helps. In the end, I end up having to run back over the developers css, changing font sizing, family, and weight to match up with how I intended it in the design;)

Thanks again, JoHn

OH...I'd love to see the stylesheet expanded out to include Helvetica and Georgia as well.

Awesome content...

A couple questions... 1) What screen capture software are you using for videos like this? 2) In an effort to improve on font appearances on HTML sites... what is Fi's policy or your philosophy for Flash Font Replacement on Fi sites? Curious

You guys are great! Keep up with these great little lessons!

I use: http://www.techsmith.com/camtasia.asp

Bachian, totally agree with you. That way designers will be able to use many fonts (not only these 2) in a more effective way.

Hi, first of all thanks for the post, it is really great and helpful to see how other people work! I think I have a similar process has you. I try to work for the browsers that have the worst type rendering...in this case Firefox. So, if I’m working with fonts smaller than 17px I normally put the text set to "none", and if it´s bigger, set to "crisp". And because I usually like to work with a lot of grid systems and rulers, I find it cleaner and "pixel perfect" to work this way.

Normally I don´t have any bad surprise in internet explorer (great render) on in the safari (only when it´s white fonts in dark background). Of course, because of the kerning changes, when you work with thin blocks of text, the difference is bigger.

Again, great post!

Ps. sorry for my English...but I'm Portuguese.

Hi Anton, thank you for the entry! I have a question though. When you set a title to smooth, like the "Amelie" text, won't it still come out as having none instead of smooth when displayed in browsers?

It will, in Firefox (PC). The thing is that I like the way "sharp" in Photoshop looks like more than when it is "none". But settings in Photoshop are really weak, that "none" even look closer to what IE and Firefox will have with smoothing on it. So I am using none on everything that is 12 and below, all fonts that are larger I set to "sharp" (instead of chrisp) just because none looks way too ugly (and in reality will be only in Firefox PC), it's a small compromise here :)

I was using Screenflick on my Mac.

We had an Adobe representative visit us last week and say that Adobe recommend that we use Fireworks for web projects and photoshop for everything else. Which sure enough we questioned him on.

So a small test I will do tonight as I' am really interested in this topic:

I would like to compare font rendering in Fireworks to Photoshop and see if there is any difference? Now straight away I would think that they should be the same but if Fireworks was to look closer to how browsers represent text then there is my request for Photoshop CS5 :)

Thanks for sharing, I'm a big fan of Arial and use it for all projects as i find its very professional and works well at most sizes, the shape of the font is great too which is why I choose arial. I totally hate Verdana as its too wide and heavy and just looks ugly. I've used tahoma in the past but after watching this you've made some good points for small type fonts on screen. I do use sharp often as well as smooth just seems too blurry in most cases.

tahoma rocks!

Tahoma is definitely a great typeface to use, especially at 11pt where I believe it looks its best. However, one thing to keep in mind is that Macs, unlike Windows PCs, don't come with Tahoma pre-installed. Tahoma only gets installed if the user installs MS Office on their Mac.

To get around this, I'd suggest using Lucidia Grande as a secondary font for Macs. We did some tests a while back and decided that Lucidia Grande was the best looking font to replace Tahoma at the point sizes we were using, and if you actually look at Kontain closely, you will see that all Tahoma has been replaced with Lucidia Grande on the Mac.

I'm actually in process in developing a very simple module called Font Rendering which solves this problem, which you use ANY font type and display it in legit html font type. The designer can package any font type into a special format then we have the html/css reference the javascript which reads and translate the package and display the font type into html basically tricking the browser to reference the font package instead of the users installed fonts without having the user to download or install anything the best part is it's very quick, seamless and efficient and will soon be out for all the developers to use :) If anyone is interested in more about this you can email me at e_correa909@hotmail.com

Anton.

Have you not thought about using SiFR? I have implemented it on my latest website - just for main headers - and it has an amazing effect. It is pretty robust and reliable. I haven't come across any issues in any browsers yet (except my Mother's old Nokia phone browser!).

The important thing about using SiFR is that you can really 'flavour' a site design with even a single typeface, and this flavour will cascade down through the design to give a rich / beautiful / unique feel. So many websites have an 'arial, arial, arial, tahoma, arial' sans-serif feel to them, but with a carefully chosen SiFR font header, it makes an amazing amount of difference to an html site.

Really great post, thanks!

By the way: Are you at F-I using a css solution to have a "white shadow' beneath the 'Related' and 'Playing Now' typo's?

Congratulations on an amazing video, very insightfull and a good explanation, thank you and keep doing more posts with this quality. As to the font using and rendering i basically go for the workflow you use, and Lucida Grande omg, it's so cool when we are designing =]

K, think I got it. Thanks anton!

Privet! Ohen' poleznoe video. Spasibo! U menya est' tol'ko odin vopros. Kogda ti pokazival shrift, kotoriy ti ispol'zoval, to tam bilo ukazano 12 pt. V svoyu ohered' ya privik k edinice "px" i vsegda dumal hto "pt" eto dlya pechati v poligrafii.

Hi, this video was very helpful in clearing my doubts about the same. I usually used 'none' with Arial 12. But now am all game for Tahoma :)

The designers at my firm could server well to follow this tutorial/observation. Especially since they're Mac people and I am a PC guy ... the fonts never match and my published Flash projects NEVER have the same Humanist 56B T-Obscure-Leading font they have!

Very nice post!

Already couple years I use Arial, Tahoma in combination with sharp, none options. But I agree that photoshop is realy weak in antialising fonts and I can`t understand whay Adobe still not solved this problem in photoshop, so I think Arial, Tahoma with Sharp, None options is the best way to do it.

Ive been doing similar. Instead of using Tahoma, ive used verdana none, i really like the way it looks at 11. But thanks for reminding me about Tahoma, and its better kerning compared to arial.

YO Jean! excellent post... i found this sweet little site that is along the same lines as your post.. www.typechart.com

Thx for the tip .. Anton.

You could of course specifiy Helvetica before Arial in your style sheets, so you could add that to the chart under all OSX browsers.

Then you can have a comparison of Arial (PC) vs Helvetica (OSX) and then Arial (OSX) vs Helvetica (OSX).

Nice Job Anton ! Those components looks very JUICY little request I think from me and all other viewers out there too, You should make a tutorial/video on how you design compnenets and what are the principles of designing an application something like that.

Thanks Love those juicy embeded buttons.

I agree wth Ali :)

for the sake of the argument, i would like to see there IE6 :)

Hi from Bulgaria :) Great post Anton. I work exactly like you.

Hi, anton nice post! ver usefull. I don't get why you use "Sharp" in AA settings don't that make your fonts blurry ? It does on my PS (PC). Dosen't it look blurry on the web browser too ?

Great post. I will use it to prepare my clients :)

I would love to see a similar comarison with negative text. All negative text looks bold in Sarafi.

Hello Anton,

It's nice to see how other designers in the industry do stuff you had questions about. I used to design mockups with no aliasing on fonts but now I mostly use crisp or smooth. It doesn't look exactly like in the browser but that is a display medium influenced by the user-agent and by the os, and not the least by the user who decides if he wants to turn on any aliasing features and so on.

Looking fwd to more practical posts, and i've also subscibed to your rss

Good Luck!

Thank you. Here's another handy web font site http://www.typetester.org/

Thanks for the post. This is useful. Have a look at the following link. Veer have created a font comparison webpage: http://www.typetester.org/ hope this is useful

Great post - I typically only use my Photoshop/Fireworks files to get a rough idea of how something will look because I know I'll have to use HTML-standard fonts when it is built. I also only use HTML-ready fonts in my designs so I'm not tempted to create a bunch of images that can potentially make the site sluggish for the end-user.

Thanks for the post. This is useful.

Like you, I use the Sharp method of anti-aliasing in my Photoshop mock-ups because it is the most accurate representation of how the font will render in a browser. I turn off anti-aliasing for font sizes 10pt and smaller.

If I'm designing something for Apple OSX, I will use Lucida Grande because a) it's the default system font on a Mac, and b) it's beautiful.

Thanks for putting the chart together, great reference sheet!

Thanks man, Useful! But as you said "In reality" we have to use 'none' for the development, eventually the design look little from the original PSD, so is that a great idea to keep it sharp and later change to ‘none’?

Once again thanks for the post! I love Fi designs... You guys rocks!!

Hi to all!

Somebody has ideas how to do similar things in Adobe Illustrator?

I apply Rasterize (Type Optimized) effect and then Unsharp Mask effect to all texts exclude titles. But the result is not so perfect.

waste of time

Hi Anton and others. Can someone tell me how to create the embedded looking buttons and font in Anton's video? would appreciate it!