Text Too Small For Bold

Get Started
1

Has anyone ever run into an issue with your font size being too small for it to turn bold? I have some type styled with 10px Arial with font-weight bold and it won’t turn bold. If I change the size to 11px it will turn bold but is too big. It works on my mac but not on windows. Does anyone know the full reason why this is happening?

2

Did you try to use numbers instead of keywords? I.E.


.yourdiv{
	font-family:Arial, Helvetica, sans-serif
	font-size: 10px;
	font-weight: 900;    
}
3

Font-weight is unlikely to make a difference. I’ve not seen any evidence that browsers output anything other than 400=normal and 700=bold. While some font families do have variants that offer more granularity than that, they are generally packaged as separate fonts rather than as additional variants on the same font, at least for general non-specialist Windows fonts like Gill Sans and Eras.

If the text is so small than making it bold has no discernable effect than that almost certainly means you’ve made it too small in the first place. Bear in mind that some people don’t have such good eyesight as you, making text that small will be illegible for a lot of people.

4

11px fonts might as well be invisible to me, bold or not.

Is there something about older folks with poorish eyesite that makes you not want them using your site? Is elderly people’s money tainted to you so that you don’t want it?

5

I’m with Ed on that. anything less than 12px is a miserable /FAIL/ at web design… and if that’s a content area of flow text you shouldn’t be using PX for fonts in the first place.

But I’m the guy who gets squirrelly declaring anything smaller than 14px… when forced to use px because of something like an image interaction I refuse to use anything smaller than that.

You may wish to review the WCAG, as 10px is 100% garbage so far as accessibility is concerned.