Grow your CSS skills. Land your dream job.

font smooth in CSS

  • # March 25, 2009 at 10:23 pm

    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

    # March 26, 2009 at 2:39 pm

    Font smoothing settings are set on the user’s computer. You can’t control it through CSS. Assuming you’re on XP, go to Control Panel > Display > Appearance > Effects and enable ClearType.

    # March 26, 2009 at 2:41 pm

    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".

    # March 27, 2009 at 12:09 am

    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 …. >.<

    # March 27, 2009 at 12:24 am

    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 ?

    # March 27, 2009 at 12:57 am

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

    # March 27, 2009 at 1:02 am

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

    # March 27, 2009 at 2:58 am

    Although font smoothing is part of the CSS3 spec there is no browser that supports it and it will be a long time before one (if any) do.
    The only solution I see for you to get out of the hole you dug yourself into is to use one of the font replacement techniques: sIFR, FLIR or Cufon.

    # March 27, 2009 at 10:17 am

    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).

    # March 27, 2009 at 2:03 pm

    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

    # March 29, 2009 at 2:03 am

    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.

    # April 1, 2009 at 7:12 am

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".