Font Hinting Visualization

The following images show how font hinting affects glyph outlines and their pixel rendering.

Outline and bitmap (monochrome) rendering with no hinting

Font: Ubuntu Regular · Size: 16 px (16 ppem) · Hinting: off

Outline only no hinting

Outline + bitmap (mono) no hinting

Outline and bitmap (monochrome) rendering with hinting

Font: Ubuntu Regular · Size: 16 px (16 ppem) · Hinting: on (dotted blue outline + bitmap)

Outline original + hinted outline

Hinted outline + hinted bitmap (mono)

Outline and bitmap (grayscale) rendering without and with hinting

Font: Ubuntu Regular · Size: 16 px (16 ppem) · Hinting: off (left) and on (right)

Outline + bitmap (grayscale) no hinting

Hinted outline + hinted bitmap (grayscale)

View of the glyphs structure and metrics

Numbers in em-units.

Glyph structure and metrics