liveBook · Manning

Counter

As explained in Web Design Playground, Second Edition

A counter is an enclosed or partially enclosed negative space within a letterform.

A counter is the enclosed negative space inside a letterform. In letters such as A, R, d, and g, a larger counter usually makes text easier to read on small screens. section 20.3

When auditioning typefaces, check the counter alongside a few nearby clues:

  • Pair counter size with aperture size, x-height, and stroke contrast when judging screen readability. section 20.3
  • Remember that a and e can contain both a counter and an aperture; a larger counter can mean a smaller aperture. section 20.3
  • Look for an x-height greater than half the font size to help common lowercase characters render clearly. section 20.3
Figure 20.2 When deciding on a typeface that will render well even on small displays, look for larger counters and apertures, good x-height, and low stroke contrast.

Compare the figure’s typeface examples by inspecting counters, apertures, x-height, and stroke contrast for small-display readability. section 20.3

How Web Design Playground, Second Edition covers it

How deep it goes
Defines counters, identifies representative letters, and connects them to legibility without covering letterform construction internals.
Examples
Uses A, R, d, g, a, and e, plus Google Fonts comparisons and a small-screen typeface figure.
What you can do after
Evaluate typefaces for counter size and likely text legibility on small screens.
How it connects
Connects counters with apertures, x-height, stroke contrast, typefaces, and legibility.

Also explained in

Compare how 2 books explain counter →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.