winding + fill rules in a font

I was watching a youtuber using Glyphs, and he said “I need to reverse this path”, when he reversed the path suddenly the counter inside the “d” he was working on was visible whereas before it was (wrongfully) filled in/solid.

So, what’s that mean?

Winding?

When he said “reverse the path”, what he is referring to is reversing the direction that the contour is defined in. AKA, reversing the order of it’s points. If it was a SVG, it would be reversing the order of it’s moveto/lineto/curveto…etc. that makes up the path.

Why this matters?

Paths in Fonts + font editing software have a “winding direction” that defines the contours/curves that make up a glyp. A path is just a path, it’s just a digital outline, not a shape.

The “winding direction” refers to the direction those points go in from the first moveto command.

What determines if the outline that the path makes up is filled in/solid vs. empty is based on a convention.

The convention:

• outer contours = clockwise
• counters (holes) = counterclockwise

That’s why in font editors, the pen tool shows a triangle at the start/the first “move to” command of a shape/curve, instead of a dot like a normal pen tool in e.g., illustrator.

So, Glyphs (and font renderers) use the winding direction to decide what’s “inside” vs “outside.” If it’s winding clockwise, that means it’s e.g., the outside of a “d”, if it’s winding counterclockwise, that means it’s the hole of the “d”, so it shouldn’t be filled in, it should be empty.

Non-zero winding rule

Fonts use the non-zero winding rule to decide fill. We can illustrate this using the idea of ray tracing. In short: as you trace a ray from a point to infinity, you add +1 for each clockwise crossing and −1 for each counterclockwise crossing of a contour. If the sum at any given spot on the glyph as you trace is non-zero, the point is considered inside (filled); if the sum is zero, it’s outside (unfilled).

Intuition:

• Direction matters. A clockwise outer shape contributes +1; a counterclockwise inner contour (a counter) contributes −1, canceling the outer and creating a hole.
• Simply reversing a contour flips its contribution’s sign, which can turn a hole into a filled region or vice versa.

tldr:

• imagine tracing the path: each clockwise segment adds +1, counterclockwise adds –1.
• if the total ≠ 0 → it’s filled.

Contrast with even-odd

SVG and some font renderers uses a similar rule called “even-odd” for deciding if an area is fill vs. empty. This is less common but SVG does work this way.

Here’s how it works: Even-odd ignores direction, no counterclockwise no clockwise, etc.. It just counts crossings; an even count is outside, odd is inside. That’s why in some vector apps (SVG with fill-rule: evenodd), reversing a path won’t change fill, but in font outlines (non-zero), it will.

tldr:

• count crossings, ignore winding direction.
• odd = filled, even = not filled.