Aperture

As explained in Web Design Playground

The open or partially enclosed negative space in a letterform, especially where strokes do not fully close a counter.

An aperture is the partly enclosed negative space inside a letterform. In letters such as C, S, a, and e, a larger opening usually makes the character easier to recognize, especially on a small screen. section 20.3

When auditioning a typeface, look for:

• Large apertures, which help letterforms remain readable. section 20.3
• A useful balance with counters, x-height, and stroke contrast. section 20.3

Try it with Google Fonts

Open a typeface in Google Fonts, type sample text, and compare how clearly letters such as a and e appear at small sizes. Remember that a and e contain both a counter and an aperture: enlarging one can reduce the other. section 20.3

Use the figure to compare apertures alongside the other visual features that support small-screen readability. section 20.3

How Web Design Playground covers it

How deep it goes

Defines apertures, identifies letter examples, and relates them to counters and x-height without explaining font construction internals.

Examples

Uses C, S, a, and e, plus Google Fonts sample-text comparisons, to demonstrate apertures.

What it assumes

Teaches counters, x-height, and stroke contrast alongside aperture rather than assuming their definitions.

What you can do after

Evaluate typefaces in Google Fonts for aperture size and small-screen legibility.

How it connects

Connects apertures with counters, x-height, stroke contrast, typefaces, and legibility.

liveBookmanning.com

Read Web Design Playground on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Web Design Playground, Second EditionAn aperture is a partially enclosed negative space formed by the opening of a letterform.

Compare how 2 books explain aperture →

Related concepts

• x-heightproduced by · X-height is the vertical distance from a typeface’s baseline to the height of its lowercase letters, conventionally represented by the letter x.
• countercontrasts with · A CSS counter is a named numerical value that CSS can increment or manipulate to generate sequential content such as numbering.

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