I have some text on my website that I would like to make 'bold', and its font-size to be 'x-small'. But whenever I apply the font-size, the text loses its bold. When I remove the font-size, and the text goes back to default, it's bold again. What's going on here?
<span style="font-size:x-small; font-weight:bold;">TESTING</span
Hello,
the thing is that true type fonts DO render differently on various sizes. If you have bitmap fonts, its just resampled to whatever size necessary. TTF are based on vector graphics and can be scaled to any size needed. However there are, depending on the font family, differences in how the font is rendered in different sizes. Theese changes are intentionally and coded by in by the designer of the font. Usually lines get thinner the smaller the font is rendered, this could cause the effect you are experiencing. You can try different fonts, but rest assuered that, unless you use certified standardized fonts, there is no guarantee of how they will be rendered.
Have you tried other font families? If I remember correctly, Arial in small sizes looks the same in bold and normal weights. Give Verdana a shot.
Some font families will appear as normal when you shrink them.
Try using Type Tester to see exactly how your fonts look. It will use the web safe ones as well as what's on your machine if your using @font-face.