Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to sharpen text

Discussion in 'Graphic Design Forum:' started by surfershort, Aug 25, 2010.

  1. surfershort

    surfershort New Member

    Hi All,

    Im really strugling to work out how to keep small text looking sharp on the web. If you look on my website festivalnet at the logo in the top left area the 'The UKs music festival and live events service directory' looks a little blurred to me.

    I designed the logo in photoshop with a commercial font called museo slab and i made sure i anti aliased the text.

    Am i missing something?

    Thanks for any pointers

  2. bigdave

    bigdave Moderator Staff Member

    On my MBP screen it looks ok but I'll check again on my HD monitor at work. At that size its only going to be as sharp as your screens resolution.

    The only alternative would be to produce it as a vector in illustrator.
  3. surfershort

    surfershort New Member

    Thanks big dave, id actually just changed the font to arial and it seemed to help maybe a better example would be the text on the left side in my twitter background here (festivalnetUK) on Twitter

    I really should start to learn illustrator, i just thought that text is vector in photoshop...? am i wrong.

  4. Stationery Direct

    Stationery Direct Administrator Staff Member

    From what I can see from the twitter background you have exported to jpeg and used too much optimisation, try reducing the optimisation settings (although this will give you a larger file size).

    The image mentioned on your website looks perfect to me.

    Text in Photoshop is vector but when exporting to .gif or .jpeg for use on websites the text is rasterised.
  5. surfershort

    surfershort New Member

    Cheers Boss, thanks for the tip so what would an acceptable size in kb be for a background?

    Really appreciate your help guys, ive got to go out and do my shitty (carpenter) day job now but ill check back later

  6. bigdave

    bigdave Moderator Staff Member

    Id love to be a carpenter! I used to do wood work classes as a youngster and loved it!
  7. djb

    djb Member

    To get small fonts to look good you need to turn OFF anti-aliasing and align them to a pixel grid. You seem to have done this perfectly with your first example. Saving them as a GIF rather than a JPG will help as JPG’s tend to blur pixels together so you lose the sharp edge.

    There’s only certain sizes of fonts which work when you turn off anti-aliasing. I’m buggered if I can remember any more details than this and I’m in a massive rush but I think this page explains some of it. I have some fonts called Minifonts which were designed just for this type of thing.

    Basically set yourself up a 1px x 1px grid, write some text, turn anti-aliasing off and then muck around making it larger and smaller until it slots perfectly into the grid. Save this as a GIF and you’ll have lovely, crisp small text.

    Again sorry for the rushed explanation - going to Wales with the outlaws in a minute and have yet to pack!

    PS: I’d love to be a carpenter too, and my creative director friend does woodwork in his spare time!

Share This Page