Counter

A counter is the enclosed or partially enclosed white space that forms inside letters. It's the space inside the 'O', the openings in 'e' and 'a', the loops of 'g' and 'p'. Counters are one of the most important but least discussed elements of type design — they determine the visual rhythm of text just as much as the strokes themselves.

The shape, size, and openness of counters has enormous impact on a font's legibility and personality. Fully enclosed counters appear in letters like 'O', 'D', 'o', 'd', 'b', 'p', 'q'. Partially enclosed counters (where the space is almost but not completely enclosed) appear in letters like 'c', 'e', 's' — these open spaces are specifically called apertures.

Large, round counters create an open, friendly appearance and contribute to legibility at small sizes. Tight, compressed counters create a denser typographic texture, which can work beautifully for display headlines but reduces legibility in body text.

/* Fonts with generous counters work better for small UI labels */
.ui-label {
  font-family: 'Inter', sans-serif; /* Large, circular counters */
  font-size: 11px;
}

/* Fonts with characterful counters shine in editorial contexts */
.editorial-body {
  font-family: 'Merriweather', serif; /* Distinct counter shapes */
  font-size: 18px;
  line-height: 1.8;
}

Counter shape is also what makes certain fonts feel more or less like calligraphy. In humanist sans-serifs like Gill Sans or Open Sans, the counters have slightly irregular, hand-drawn quality — asymmetric, warmer. In geometric sans-serifs like Poppins or Futura, counters are perfect circles, giving a colder, more mechanical impression.

For developers choosing fonts for high-legibility contexts (forms, small print, interfaces), fonts with open counters — particularly open apertures where counters meet the outer world — are consistently more readable. Inter was specifically engineered with this in mind, optimizing counter shapes for screen readability at interface sizes.