4

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!

c_m3
  • 63
  • 1
  • 5
  • 6
    I think that make font identical to a PSD is a lost battle... consider that a font looks already different on different browser and OS. – Fabrizio Calderan Jun 14 '12 at 10:22
  • If you don't use the same font, use fontface (css3) to add it to your page to fit the design – Jerome Cance Jun 14 '12 at 10:22
  • What OS and browser? I checked several, but they all display a `p` with `font-weight:bolder` bolder than a `p` without. And `text-shadow:black 1px 0 0` works too. – Mr Lister Jun 14 '12 at 10:30
  • I use Windows and checked it in every browser. I see that the `font-weight` adds a little weight (compared to a `p` without `font-weight`), but I want it to be bolder than the boldest `font-weight`. Just wondering if there's a smart trick. – c_m3 Jun 14 '12 at 10:33
  • In Windows XP, Chrome 19 seems to apply more boldness if you specify `font-weight:600`. Not sure why. The other browsers don't. – Mr Lister Jun 14 '12 at 10:35

2 Answers2

8

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

Joshua
  • 6,320
  • 6
  • 45
  • 62
  • also rgba(0,0,0, .5) to use half transparent black – Vladimir Starkov Jun 14 '12 at 10:45
  • Nice, `text-shadow: 1px 0px 0px rgba(0,0,0,.5)` gives the most satisfying result (especially with the addition of vladimir). CSS3 does indeed have some incompatibility in different browsers, so this is not THE solution, but probably the best solution available! Thanks guys. – c_m3 Jun 14 '12 at 11:26
0

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.

Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
  • _Courier New_ only has two weights, so anything larger than 700 will look the same as 700. – Mr Lister Jun 14 '12 at 10:39
  • @MrLister Yes, you are right. But "Courier New" is not problem of question and not main theme of my answer. – Vladimir Starkov Jun 14 '12 at 10:50
  • In that case, you should also suggest using a font that is bolder at 900 than at 700. – Mr Lister Jun 14 '12 at 10:54
  • @MrLister do you know such font? – Vladimir Starkov Jun 14 '12 at 10:55
  • yeah i'm aware of the differences between css interpretation and photoshop; i was asking for making a font bolder than the maximum boldness size of css. this still doesn't do the trick. – c_m3 Jun 14 '12 at 11:22
  • @ChristiaanvanBemmel try to accurate use `rdba(0,0,0, .5)` color with small `box-shadow` — it is the only way to solve your problem, because it is impossible make font *bolder* than the *maximum* – Vladimir Starkov Jun 14 '12 at 11:27