[surfershort]

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

Al

[bigdave]

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.

[surfershort]

Originally Posted by bigdave

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.

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 festivalnet.co.uk (festivalnetUK) on Twitter

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

Thanks
Al

[Boss Hog]

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.

[surfershort]

Originally Posted by Boss Hog

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.

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

Thanks
Al

[bigdave]

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

[djb]

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!