I have always been annoyed by how not-bold the standard browser-safe system fonts are at smaller font sizes. And even now, calling in a bolder typeface using @font-face is not always a viable option (like a project I’m working on right now). I need heavier type than Verdana bold, and it needs an outline to make it stand out against its background, it can’t have any extra markup, and it has to be cross browser compatible.

Here’s my text without styling:

This is Verdana or Tahoma or Geneva

Note, these are actual colors from a current project and no, I don’t get a say in that. I just have to make it work. But this? Is totally unreadable. Let’s make it bold:

Really? You call this bold?

Better, but still basically unreadable. For one thing, it’s not bold enough. But even if I could make it bolder, it would still be hard to read against this background. It needs a nice dark background for that color of text!

I grumble to myself: If I could just do this in photoshop… ah, for a good black outline.

But wait!

Firefox supports text-shadows now. IE has its weird “filter” renderings. Maybe just throwing in a text-shadow will solve it:

Better but… still hard on the eyes. Also, not very bold.

Here’s the css for the shadow:

text-shadow:1px 1px 2px #000;
filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=90, Strength=4);

I? Am very picky. I may not get to pick the color and the background but I can damn well make the combination work. That’s what I do.

Some people may use the word “stubborn” in place of picky…

So I ponder. I google to see the progress on font-effect:outline (which really doesn’t do what I want but hey, the spec’s still up in the air). I see lots of people asking the question of how to add an outline but no one answering it…

And then it hits me. I can make the text bolder using the text-shadow declaration with a 0px offset.

Going cross-eyed trying to read this.

text-shadow:0px 0px 1px #fc0;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#ffcc00', Direction=90, Strength=3);

Kinda fuzzy. And it doesn’t stand out against the background. Not happy with this one. But text-shadow supports multiple shadows on the same element (IE doesn’t, but it worked with just one filter):

Ah, bolder and actually legible!

text-shadow:0px 0px 1px #fc0,0px 0px 3px #000,0px 0px 3px #000;
filter:progid:DXImageTransform.Microsoft.Glow(color='#333333', Strength='1');

The trick is to declare the black shadow twice at 3px because once is hardly visible. It’s transparent enough at that distance to barely register.But the 1px gold shadow gives the letter forms just a hair’s more heft. It’s not really any bolder, it just looks bolder.

Haven’t had a chance to test it in Safari, Chrome, IE6 or Opera but I’m pretty happy with it in Firefox 3.6 and IE7/8 — which is more than 97% of the users I have to consider for this project. I’ll update as I get the chance to test in other browsers.

Edit: Safari’s good.