Working with Small Font Text

[jhilgeman]

On some projects, I've had to work with really small text as part of the design. Personally, I don't often recommend using tiny text in web designs, because you can often use normal, readable-sized text and still be "stylish."

However, let's say that you are creating a really small button or something, and you're trying to use 6-8 point-size fonts. There's only so much you can do with just a few pixels, and if you use anti-aliasing, the "blurring" effect can make text nearly unreadable. Unfortunately, there's no guaranteed way of making the text read better, but here are a couple of things to try:

Make the Font Bold!
This can be either the font style (i.e. Arial Bold), or if you have Photoshop 6+, you have a font/text palette that has a lot more options. If you don't know where your text palette is, just go to your Window menu, and click on the "Character" item. From there, you should be able to change the anti-aliasing style (my version 7.0 has None, Sharp, Crisp, Strong, and Smooth) - the Strong option has a bolding effect. You can also turn on Faux Bold as a last resort by clicking on the encircled arrow button near the top-right of the palette, and choosing Faux Bold from the pop-up. You can see the pop-up in Figure-1 below.

FIGURE-1


Use Small Caps
I believe this text option was introduced in version 6, and this trick is a little weird to explain. This works well in SOME cases when you're using all-capital letters.

Like a small "HOME" button, for instance. For such a button, I might create a new text layer that has an Arial font of 8 points, then type in the word "HOME" - but sometimes this can be kind've blurry.

In these cases, I'll edit the text layer and change the word to lower-case letters "home". Then, I'll get out of the text editing/insert mode by clicking on a different tool, and then I'll open the text options popup shown in Figure-1, and check on "Small Caps".

Now I'll have the word "HOME" again, except a bit smaller. I'll just increase the font size by a few points, and I should be back at a normal-sized word "HOME" - and this time it might be a little clearer. This trick doesn't ALWAYS make clearer-text. Sometimes it looks the same as before, but if you're having a tough time trying to get clear-looking, small text, this is a good trick to try.

- Jonathan

[jScott_Harris]

I have to disagree with you here, small fonts are absolutely the coolest thing going. I'm a huge fan of pixel fonts. Mini 7, and FontsForFlash (FFF) fonts are awesome because even small they're very readable. Currently embedding fonts isn't a sure fire thing on the internet, and the different tecnologies for doing so aren't entirely perfected, but as embedding fonts becomes easier, you'll see a great deal of pixel and smaller fonts being used.

[jhilgeman]

<grin> Disagreement noted. I'll grant you that small fonts CAN look good in some instances, but I haven't found very many instances in which a larger font or just a larger font size looked better and/or more readable.

But you do make the point that they are being used a lot right now, and that's partially why I made this article. :)

I think screen resolutions will be stable for a while as flat panel technology comes into the picture and they find new ways of increasing max resolutions. So for a while, it'll probably stay "cool" to use small fonts.

Then again, it will also depend on the type of site you're designing. A teen/young person's techie site may utilize 2 pt. grey text that says "b4d4zz h4x0r" against a black background. A design site might use grossly-oversized fonts as design elements, while a car insurance site strives for normal, readable text. :)

Point taken, though. $jScott_Harris++;

I'm such a nerd.

- Jonathan