HN Explorer

25 comments

[ 3.4 ms ] story [ 70.5 ms ] thread
paulirish
Additionally, if you're looking for higher quality fonts, the same guy (Ethan) who runs the squirrel runs a boutique for @font-face fonts: http://fontspring.com
ComputerGuru
Yep. They've got great fonts - but a friendly note: they're not free. Well worth the money, though... and very sensibly priced.
samdk
http://www.theleagueofmoveabletype.com/ is another place that has a bunch of good open-licensed and free-to-use fonts.
seliopou
I came across this site a while ago and have been trying to find it again for the past couple days. Thanks for the link!
antidaily
Great resource, though I've personally found cufon to be easier to deal with across browsers.
faramarz
Just a quick tip while we're on subject.

If you use any exotic type for your @font-face, be sure to give it a text-shadow: 0px 0px 1px #fff; to smooth out the edges.

The shadow colour should be the same as the background colour. So technically, it's just a smoother, not a shadow.

The result is the same smooth render you would get with sIFR. Works wonders.

ComputerGuru
Nice tip - but the @font-face generator on the linked site actually does font smoothing before generating the output.
faramarz
I just tried it. It's not the same, they're using Hinting to render better, but it's definitely not smooth.

my comparison http://img709.imageshack.us/img709/9537/textshadow.png

It's even worst at smaller font-size. My test font is relatively simple also, imagine the disaster the NYT font would be without a blank shadow.

zweben
What browser is that in, and do you have anti-aliasing enabled in your OS? The 'original' text in your screenshot isn't anti-aliased at all, which I don't think should happen unless you have AA off on a system level.
faramarz
You know what, it just dawned on me that at one point I had my IE7 ClearType disabled because I didn't like it's smoothing effect. I don't know if that setting is carried on to Chrome or not.

I'm on XP + Chrome.

zweben
AFAIK, ClearType settings apply system-wide. It should be pretty easy to tell though; if any non-image text in your browser is smoothed, it's on. If it's not, it's off.

What it sounds like the white drop shadow did in your case was simply force ClearType on for that text.

[deleted]
(comment deleted)
qeorge
The difference is striking. This is a great tip, thank you for sharing.
zweben
I've noticed this myself. Any idea why that happens?

I've noticed that sometimes adding a blurred shadow disables sub-pixel anti-aliasing, and sometimes that makes things look better. I think, though, that there's a separate effect that makes the font look thinner when a blurred shadow is added that I don't really understand.

nitrogen
Suggested feature for a @font-face site: include a sample of the font using @font-face for browsers that support it, instead of just images (at least I didn't see any live samples).