Best small fonts for buttons

Could someone please advise me on the best fonts to use on small buttons? I’m particualrly interested in the font used for the vBulletin buttons. Some people claim that this is Arial, but when I try to use Arial in my graphics program (Ulead PhotoImpact 5.0) the font does not look as clear as this sample.

Thanks!

Steve

Have you tried verdana set at bold?
Or Arial set at bold?

Also you could try arial rounded or arial narrow, as there are different versions!

Nicky and Lor,

Thanks, I’ve tried all of these but they don’t duplicate the look of the font on this button. In fact I can’t find anyway to make the text appear as clear as it does on the button.

any sans-serif type font is good for small graphics as these are the most readable. Arial is one of them but there are plenty others.

aspen,

Thanks but as I stated the Arial font does not match the clarity of the font on this button.

Here’s what I mean (enlarged example):

Tahoma’s also another good font, it was actually designed to be fit small and readable.

You might also have to edit the font manually, after inserting the letters, enlarge a few times and change the individual pixels around the letters for clarity.

This method does not produce exactly the same result but I think it equally readable. Used verdana bold, in photoshop.

Convert to RGB

Add a layer set the colour to white and type the text and set anti-alias to Crisp.

Duplicate the layer, offset the text, set to shadow colour and move the layer order.

Convert back to palleted.

Hope this helps :slight_smile:

Origianal is on top, my version an bottom.

smachol…

all of these people are WRONG…hehe…only kidding all.

The way to accomplish this effect (if you are using Photoshop) is to set the type to:

Anti-alias: NONE

That is how they get the type crystal clear like that. It removes any fuzziness around the edges of the font.

In case you are interested the type is 9pt verdana bold with -20 tracking. These are the setting sin Photoshop. Below is my image, Top is the original, bottom is mine:

creole,

Thanks. This is a lot closer but still not exact. I think the problem may be related to my graphics program - PhotoImpact 5.0. For instance I can disable anti-aliasing but there’s no option for setting ‘tracking’. I don;t even know what this is.

hmmm…chances are your editing program might not have that feature.

Tracking refers to the spacing between letters. Another word for it is Kerning.

If you really MUST have that effect then you could create your type, then render it (convert it to pixels) then space the letters out by hand.

Another possibility is to use another font. One that is designed from the get-go to be used at amsll res.

http://www.kottke.org/plus/type/silkscreen/index.html

And here is a link to a search on SP about small fonts:
http://www.sitepointforums.com/search.php?s=&action=showresults&searchid=16010&sortby=lastpost&sortorder=descending

Silkscreen is an awesome font! :slight_smile:

http://www.wpdfd.com/wpdtypo1.htm - The SeveNet font is another one designed to be used as a small font. I’ve used Silkscreen more often than this one though… go figure :rolleyes:

creole,

Thanks again. Here’s the latest with Verdana Bold 9 and anti-aliasing off. It’s a lot closer than I’ve gotten before, but not perfect (notice the ‘r’ and ‘f’.) Nonetheless I think this will be acceptable.

<Later> Damn, I can’t upload the image to this site for some reason. It definitely meets the criteria. Here’s a link to it on the vB forum:

http://www.vbulletin.com/forum/showthread.php?s=&postid=87920#post87920

cokeman,

Silkscreen is nice and I have it on my system, but I didn’t want all CAPS for this graphic.

the only thing I can suggest is to get the button as close as you can, then render the type layer. Then adjust the pixels by hand.

Or, an easier way would be to just recolor the VB button itself. You are going to an awful lot of trouble when you could just take that image. Make a few selections and then colorize that layer.

try that and see if that helps.

creaole,

Thanks again. I actually strated out by recoloring the button but had trouble getting it right without messing up other parts of the button. That’s when I decided to start fresh and ran into the ‘font fiasco’. Once I strated on that I became obsessed! :smiley:

recoloring the button should be simplicity stself if you have a rectangular marquee tool in your app.

Originally posted by creole
recoloring the button should be simplicity stself if you have a rectangular marquee tool in your app.

Should be, but isn’t with PhotoImpact 5.0. At least not to the extent that I wanted it done. Clearly I’m not using the best graphics tool, but I can’t afford anything better right now.