: When A Font "Fills In" - Does That Have A Specific Definition? I have a font that just won't cooperate. At certain sizes the font fills in the a and e loops whenever bold. I was wondering

@Holmes874

As scott says, on press, that's called a number of things...such as dot gain and plugging (I've always used the term ink spread). It's caused by the fact that paper will absorb ink and cause it to spread (just as a drop of water on a paper towel will 'grow' as the water spreads).

When designing type for printing on low quality paper--which has a high ink spread--one could design around this using ink traps which were voids in spots where ink would normally spill out causing weird junctions. Perhaps one of the more notable uses of these was in Matthew Carter's Bell Centennial--which was designed for phone books:



Blown up, the type looks goofy with those weird gaps. But when printed small on paper, the gaps fill in with ink and the typeface appears as originally intended.

Of course, we're not talking paper here, we're talking screen.

But...I think the concepts are very related. We don't have ink spread on screen, but we do have anti-aliasing...which is where the edges of shapes are blurred to make the square pixels appears smooth from a distance.

As there's only so many pixels, at very small sizes, there's no extra pixels for this smoothing, so they fill in.

Some options:


choose a different typeface with well designed hinting at small sizes (hinting is the process of making very specific bitmap versions of the typeface for specific sizes on screen to compensate for this issue)
make sure your typeface has a proper bold weight and this isn't the browser doing an 'auto-bold' effect (which naturally won't be as well designed as a true bold as it's automated).
try a dark gray rather than black as your type color. (A subtle shift in color can change how the font smoothing is working.)
if this is a web page, make sure you also view it in a browser that supports font-smoothing. It appears in your example there is no font smoothing happening (meaning no proper anti-aliasing). In that case, it ONLY has black pixels to work with so is making everything blocky and filled in. Some browsers (or user settings) just don't have font smoothing.


For your specific needs, being that you are using a web font, the bottom line is simply that some fonts, on some OSes, on some browsers, just can't handle proper font smoothing. Your best bet might be to try a different font and/or not rely on web fonts for text at that size (I typically recommend that you stick with web fonts only for headlines and such at this time)

Vote Up Vote Down