Forum Moderators: not2easy
[edited by: engine at 5:09 pm (utc) on Mar. 5, 2007]
[edit reason] TOS [/edit]
When I use text of large fonts very often I got sharp effect. Does anybody know the way to make it more smooth?
The only reason you're seeing anti-aliased text at all is due to a user setting on your part - usually by your Operating System (OS X has anti-aliasing on by default, and there's a setting on Windows XP for ClearType styling.)
There is no guarantee that, in using HTML text, any of your users will actually see what you are :)
Unfortunate circumstance of the web, I suppose..
Use a graphic, or pixel fonts.
Using a graphic is the only cross-browser compatible way, pretty much.
Pixel fonts? Never heard of this, but as I said, without anti-aliasing turned on as an OS setting, I doubt using HTML text will work.
There's a flash replacement technology called sIFR - you can google it - it replaces HTML text of your choosing (for example, div#content h1, you can use specificity) with flash.
This, of course, requires the flash plugin - if a user doesn't have it, it will be asked to be downloaded (though I don't see this happening often, flash is pretty wide-spread) - but it does anti-alias the text and is recommended by the W3C as a Rich-Text alternative meeting accessibility requirements.
In my own experiments I found putting sIFR in odd, complex parts of a website usually were more of a hindrance than a help. Stuff like a menu system relying on sIFR flash replacement meant being unable to style it in some ways. Don't replace an entire website with sIFR, it'd slow down the website too much. Transparency in sIFR 2.0.2 works alright, though not quite right in Safari and Opera. sIFR 3 is coming out soon, which I believe has quite a few new cool things and optimisations.
Food for thought :)
On second thought, most people won't have those fonts installed on their computer (hmmm, didn't think of that ... hehe), so using graphics is your best bet.
Well, not sure if pixel font is the technical term, but they are designed to look smooth at specific sizes. They're usually optimized for small sizes, say 8px (think Flash fonts), but they can be upsized to certain sizes and retain the look.On second thought, most people won't have those fonts installed on their computer (hmmm, didn't think of that ... hehe), so using graphics is your best bet.
I'm guessing the optimised sizes are probably 10pt, 12pt, 14pt, 18pt, 24pt etc.? The font sizes of old, before we had the control to make 9.75pt?
The problem with trying to find that is consistent font sizing issues :) What about screen resolution? What about OS anti-aliasing? And yes, what about the absence of a font?
Like sIFR... you can use JavaScript (or even CSS) to replace your text with a 'smooth' graphic. The 'graphic text' only gets served to those with JS and graphics enabled, otherwise they see the regular text. I'd only use it for headings etc. - but keeps your design 'accessible'.
Fair enough if you don't like third party code, issue with this to me is for sustainability - especially for large sites - using images for headings. What if a page heading needed to be changed, or a new page comes along, it's fiddling with both the HTML text and the image you want to replace it - whereas sIFR replaces on the fly, you needn't bother updating/adding images too.
