Make small font bolder

Question

I'm wondering if anyone has a smart js or css trick to make a small font a little bolder.

For a client, we're using the Courier font with font-size 12px/15px and text-transform uppercased. I added font-weight bolder to the text, but the text still isn't as bold as it is in the Photoshop design file.

Does anyone know any tricks to make a small font appear bolder?

My current CSS:

.block.project p {
    font-family: "Courier New",Courier,monospace;
    font-size: 12px;
    line-height: 15px;
    font-weight: bolder;
}

I tried do perform some tricks with text-shadow, but that doesn't give the satisfied effect.

Thanks in advance!

Answer 1

You could try a font-shadow using the same colour shadow as font colour.

One of the following might do it:

Add a blurred font shadow to each edge

text-shadow: 0px 0px 1px #000000;

Or add one pix to the vertical thickness of each letter

text-shadow: 0px 1px 0px #000000;

Or add one pix to the horizontal thickness of each letter

text-shadow: 1px 0px 0px #000000;

I think the 2nd of these would be my personal preference.

However, support is not guaranteed being CSS3 (although I believe this is one of the better supported features) and may detract from the readability.

Find a generator here

Answer 2

Try to set font-weight: 900; — it is the maximum value for font-weight. If it is not help, try to increase font-size;.

Also, Photoshop and browsers are using different rendering models, that's why difference differences will always exist.