font smooth in CSS

[odil]

hi everybody,
i have trouble when convert psd to html+css
i used font "Arial Narrow" 14pt – smooth in PSD
then i used font "Arial Narrow" 14pt in css (i don’t know how to make it smooth)
but the result is difference
you can see from the image attached
the first one is captured from PSD and the second one is captured from HTML
is there anyone have solution for this problems ?
thanks

[TheDoc]

To get a better idea of what your font will look like on the web, in Photoshop make sure anti-aliasing is set to "None".

[odil]

to TheDoc
yes, usually i use anti-aliasing to "none", but this time my fault
the mock-up have already agreed by customer and they want their website same with the mock-up :?

to daGuy
it’s work, great, but impossible if i tell my customer to do it
how about the other visitors :(

btw, i have tried css3
font-smooth: always
i found that firefox 3.1 support css3, but when i put that code and run it on firefox 3.1, nothing change
the display just like IE …
is there any idea to make it smooth ?

help meee …. >.<

[odil]

btw, i have tried to used "arial" instead of "arial narrow"
not like "arial narrow", "arial" appears smooth in html without any code
then i used "font-stretch: narrower;", but nothing changed
is there anyone know why it doesn’t work ?

[TheDoc]

If it’s just for the nav, just use images if you have to.

[odil]

can’t
because this template for CMS… can’t use image :(

[Chris Coyier]

Clearly the fact that it is much larger is an issue too? Maybe when you get it down to about the same size it will look closer to the mockup.

You are using point sizes (pt), which is a little unusual in CSS other than in print stylesheets. I’d go with a pixel size there so you can adjust it perfectly.

Other things to try:

Use Helvetica instead, it’s really really close to Arial and you might see if it looks better to you.

Take a screenshot on a mac instead =) — far nicer font smoothing. PC’s just have crappy looking type (at least to my eyes).

[odil]

aha.. yes i did mistake again, pt and px T.T

but helvetica is close with arial, isn’t close with "arial narrow"
i need something narrower to replace "arial narrow"

btw, i proposed customer to change font into helvetica and they agreed
phew… lucky me :lol:

to apostrophe: sIFR, FLIR or Cufon.. i never try it before, but if so, i must learn it
i am watching FLIR’s video screencast (no.54) right now ;)

ok thank you all … :D

[Matt]

I agree with Apostrophe. Use something like FLIR to create a perfectly smooth, yet dynamic nav. Text selection won’t be a big deal in Nav’s anyways, so font replacement shouldn’t be a big issue.

[nickstr]

can’t you use sprites/images with text-indent="-9999px"

[Author]

Posts