2

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 if there was a specific term for this so I can more easily search for a solution to my font problem. Below I've attached an image to show you what I mean:

enter image description here

4
  • 1
    Many changes when a font i on a pixel screen at small sizes are because of hinting - not sure if that's what it is in this case though. Hinting sometimes saves readability and other times ruins your type, here's an example of hinting gone wild. Setting the type to a common round number like 14pt or 12pt can help make hinting behave. Sep 24, 2014 at 14:32
  • Is that an actual image being used or is that a screen shot of live text on the web page?
    – Scott
    Sep 24, 2014 at 17:36
  • @Scott sorry that's a screen shot of actual text on a webpage. I'm using a web font but was wondering if there is a specific term for this kind of thing. Sep 24, 2014 at 17:37
  • On press it's called "dot gain" and "plugging".... not sure if those terms directly translate to on screen though. "Too much dot gain" is more common. (I know dot gain doesn't apply to screens.) Truth is.. I can't ever recall seeing a font do that on screen with live type.
    – Scott
    Sep 24, 2014 at 17:39

1 Answer 1

4

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:

enter image description here

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.