Take the 2-minute tour ×

When I enlarge the font in a web page, sometimes the font gets thick, "black-ed", why is that?

enter image description here

And after a few mouse scrolls:

enter image description here

share|improve this question
What browser/version/OS? –  soandos Oct 21 '12 at 7:55
@soandos updated tags –  warl0ck Oct 21 '12 at 7:57
Any chance you can also list the font? Does it work if you manually change the font to a more standard one (via dev tools) –  soandos Oct 21 '12 at 7:57

2 Answers 2

up vote 2 down vote accepted

When the thickness of the strokes within the glyph shapes is near the size of the pixels on the rendering device, compromises have to be made. For example, suppose the thickness of one of the vertical strokes works out to 1.5 pixels. Even if the font renderer supports sub-pixel anti-aliasing, it might be better (in terms of legibility or aesthetics) to fudge the font weight so it works out to one pixel, and fudge the exact stroke position so it lands in the middle of a column of pixels. The alternative, straddling the pixels, can lead to fuzziness or odd color shifts.

Modern font file formats support hinting, which allows the font designer to control how and when these adjustments happen. Which means if this font was properly hinted, neither of your samples is necessarily wrong in terms of the font designer's intent. The bottom sample is the intended weight when resolution is high enough to not be an issue, and the top sample is a compromise, but one made by the designer for this particular combination of font size and dpi. That said, I'd be willing to guess that the top sample is set at an odd size that the hints didn't cover.

share|improve this answer

I think you have a conceptual issue here.

In most cases, if you enlarge just the width and height of the font, at a sufficiently big enough size the text no longer resembles that font. Larger font sizes feature thicker characters than smaller fonts.

What you're seeing looks like normal behaviour to me.

share|improve this answer

Your Answer


