6 ms·
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
by faramarz 16y ago
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 16y agoNice tip - but the @font-face generator on the linked site actually does font smoothing before generating the output.
- faramarz 16y agoI 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 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.
- deleted 16y ago[deleted]
- zweben 16y agoWhat 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 16y agoYou 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 16y agoAFAIK, 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.
- faramarz 16y agoThanks dude. I had initally turned off ClearType because smaller texts were too blurry or you could see a hint of red in some letters. Found a tool that optimizes the contrast http://www.microsoft.com/typography/ClearTypePowerToy.mspx http://www.microsoft.com/typography/ClearTypePowerToy.mspx
- qeorge 16y agoThe difference is striking. This is a great tip, thank you for sharing.
- zweben 16y agoI'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.